/* SkyWatch UI — visual language borrowed from beautifului.dev: near-black editorial surface, low-alpha hairline borders, rounded cards, monospaced index labels, one restrained accent. */ /* Two themes off one token set. Every surface, hairline and overlay below is painted from these variables, so a theme is a matter of redefining them — `data-theme` on picks one, and theme.js sets it before first paint. The literal-free rule downstream is what makes that possible: a raw rgba(255,255,255,…) would stay white-on-white when the page goes light. */ :root { --bg: #0a0a0b; /* --bg as channels, for the sticky bars, map chips and veils that let the page show through themselves at partial opacity. */ --bg-rgb: 10, 10, 11; --surface: rgba(20, 20, 23, 0.72); --surface-solid: #141417; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.14); --text: #ededed; --muted: #8a8a90; --accent: #7c8cf8; --ok: #4ade80; --warn: #fbbf24; --err: #f87171; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --accent-hover: #9aa6fa; --err-text: #fca5a5; color-scheme: dark; /* Text that sits on an --accent fill, and on a photo/overlay scrim. */ --on-accent: #0a0a0b; --on-scrim: #fff; --scrim: rgba(0, 0, 0, 0.55); /* Three tints, weakest to strongest: an inset well, a hover wash, a pressed/active fill. In dark these lighten; in light they darken. */ --fill-1: rgba(255, 255, 255, 0.035); --fill-2: rgba(255, 255, 255, 0.06); --fill-3: rgba(255, 255, 255, 0.09); --fill-hi: rgba(255, 255, 255, 0.2); /* border on hover */ /* Shadows read as depth in dark and as weight in light, so they carry their own alpha per theme rather than a shared black. */ --shadow: rgba(0, 0, 0, 0.55); --shadow-deep: rgba(0, 0, 0, 0.6); --placeholder: #5a5a60; --disabled: #3c3c44; --null: #4d4d55; /* Canvas can't read a hairline meant for 1px DOM borders, so the charts get their own slightly stronger grid and crosshair. */ --chart-grid: rgba(255, 255, 255, 0.08); --chart-crosshair: rgba(255, 255, 255, 0.4); --map-style: "mapbox://styles/mapbox/dark-v11"; --logo-pad: #fff; /* airline logos are dark-on-transparent; they need a plate */ } :root[data-theme="light"] { --bg: #f7f7f8; --bg-rgb: 247, 247, 248; --surface: rgba(255, 255, 255, 0.78); --surface-solid: #ffffff; --line: rgba(15, 18, 28, 0.1); --line-strong: rgba(15, 18, 28, 0.18); --text: #16171a; --muted: #64656d; --accent: #4f5bd5; --ok: #15803d; --warn: #a16207; --err: #dc2626; --accent-hover: #3f49b8; --err-text: #b91c1c; color-scheme: light; --on-accent: #ffffff; --on-scrim: #fff; --scrim: rgba(15, 18, 28, 0.6); --fill-1: rgba(15, 18, 28, 0.035); --fill-2: rgba(15, 18, 28, 0.06); --fill-3: rgba(15, 18, 28, 0.09); --fill-hi: rgba(15, 18, 28, 0.24); --shadow: rgba(15, 23, 42, 0.1); --shadow-deep: rgba(15, 23, 42, 0.16); --placeholder: #9a9ba3; --disabled: #c2c3ca; --null: #a6a7af; --chart-grid: rgba(15, 18, 28, 0.12); --chart-crosshair: rgba(15, 18, 28, 0.38); --map-style: "mapbox://styles/mapbox/light-v11"; --logo-pad: #f2f2f4; } /* Same palette, reached the other way: the OS asks for light and nothing has been pinned. This is what makes the stylesheet correct on its own, before theme.js has had a chance to put data-theme on . `:not([data-theme])` keeps an explicit choice — either one — winning over the OS. KEEP IN SYNC with the block above. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #f7f7f8; --bg-rgb: 247, 247, 248; --surface: rgba(255, 255, 255, 0.78); --surface-solid: #ffffff; --line: rgba(15, 18, 28, 0.1); --line-strong: rgba(15, 18, 28, 0.18); --text: #16171a; --muted: #64656d; --accent: #4f5bd5; --ok: #15803d; --warn: #a16207; --err: #dc2626; --accent-hover: #3f49b8; --err-text: #b91c1c; color-scheme: light; --on-accent: #ffffff; --on-scrim: #fff; --scrim: rgba(15, 18, 28, 0.6); --fill-1: rgba(15, 18, 28, 0.035); --fill-2: rgba(15, 18, 28, 0.06); --fill-3: rgba(15, 18, 28, 0.09); --fill-hi: rgba(15, 18, 28, 0.24); --shadow: rgba(15, 23, 42, 0.1); --shadow-deep: rgba(15, 23, 42, 0.16); --placeholder: #9a9ba3; --disabled: #c2c3ca; --null: #a6a7af; --chart-grid: rgba(15, 18, 28, 0.12); --chart-crosshair: rgba(15, 18, 28, 0.38); --map-style: "mapbox://styles/mapbox/light-v11"; --logo-pad: #f2f2f4; } } * { box-sizing: border-box; } body { margin: 0; font-family: "Inter", system-ui, sans-serif; background: var(--bg); color: var(--text); overflow: hidden; } #map { position: absolute; inset: 0; } /* ── Side panel ─────────────────────────────────────────────── */ .panel { position: absolute; top: 20px; left: 20px; width: 300px; display: flex; flex-direction: column; gap: 12px; z-index: 1; } .brand { display: flex; align-items: center; gap: 12px; padding: 4px 2px 8px; } .brand-mark { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(160deg, var(--accent), #4f46e5); box-shadow: 0 4px 18px rgba(79, 70, 229, 0.35); } .brand-mark svg { width: 19px; height: 19px; fill: var(--on-scrim); } .brand-name { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; } .brand-sub { margin: 2px 0 0; font-size: 0.72rem; color: var(--muted); } /* ── Cards (the "primitive" blocks) ─────────────────────────── */ .card { position: relative; background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 14px; padding: 16px; } .card-index { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); opacity: 0.6; } .card-title { margin: 2px 0 14px; font-size: 0.9rem; font-weight: 600; } .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .stat { border: 1px solid var(--line); border-radius: 10px; padding: 12px; } .stat-value { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; line-height: 1; } .stat-label { margin-top: 8px; font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .controls { display: flex; gap: 10px; } .btn { flex: 1; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--fill-1); color: var(--text); font: 500 0.82rem "Inter", sans-serif; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .btn:hover { background: var(--fill-3); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; } .btn-primary:hover { background: var(--accent-hover); } /* ── Altitude legend ────────────────────────────────────────── */ .legend-bar { height: 8px; border-radius: 5px; /* matches ALTITUDE_COLOR stops in app.js */ background: linear-gradient(90deg, #f97316 0%, #f59e0b 9%, #eab308 18%, #a3e635 27%, #22c55e 40%, #10b981 53%, #22d3ee 62%, #3b82f6 71%, #8b5cf6 84%, #d946ef 100%); } .legend-scale { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 0.62rem; color: var(--muted); } /* ── Status ─────────────────────────────────────────────────── */ .status { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 0.78rem; color: var(--muted); } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 2s infinite; } .dot.loading { background: var(--warn); box-shadow: 0 0 8px var(--warn); animation: none; } .dot.error { background: var(--err); box-shadow: 0 0 8px var(--err); animation: none; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ── Aircraft popup ─────────────────────────────────────────── */ .mapboxgl-popup-content { background: var(--surface-solid) !important; border: 1px solid var(--line-strong); border-radius: 14px; padding: 16px !important; color: var(--text); font-family: "Inter", sans-serif; box-shadow: 0 20px 50px var(--shadow); max-height: 78vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .mapboxgl-popup-content::-webkit-scrollbar { width: 8px; } .mapboxgl-popup-content::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; } .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { border-top-color: var(--surface-solid) !important; } .mapboxgl-popup-anchor-top .mapboxgl-popup-tip { border-bottom-color: var(--surface-solid) !important; } .popup-title { font-size: 1rem; font-weight: 600; margin-bottom: 12px; } .popup-title .hex { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); margin-left: 6px; } .popup-photo { width: 100%; height: 120px; border-radius: 9px; margin-bottom: 12px; background: var(--fill-1); display: grid; place-items: center; font-size: 0.75rem; color: var(--muted); overflow: hidden; } .popup-photo { position: relative; } .popup-photo img { width: 100%; height: 100%; object-fit: cover; } .photo-credit { position: absolute; right: 6px; bottom: 6px; font-size: 0.6rem; color: var(--on-scrim); background: var(--scrim); padding: 2px 6px; border-radius: 5px; text-decoration: none; } .popup-route { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.82rem; margin-bottom: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; } .popup-route .arrow { color: var(--accent); } .popup-route .via { color: var(--muted); font-size: 0.72rem; } .popup-meta .mono { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); } /* ── Popup entrance + close ─────────────────────────────────── */ .mapboxgl-popup-content { animation: popIn 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: bottom center; } @keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } } .mapboxgl-popup-close-button { color: var(--muted); font-size: 1.15rem; padding: 0 8px; right: 4px; top: 4px; } .mapboxgl-popup-close-button:hover { background: transparent; color: var(--text); } .popup-photo img { animation: fadeIn 0.45s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* staggered detail rows */ .popup-rows .popup-row { animation: rowIn 0.32s ease backwards; } @keyframes rowIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } } .popup-rows .popup-row:nth-child(1) { animation-delay: 0.03s; } .popup-rows .popup-row:nth-child(2) { animation-delay: 0.06s; } .popup-rows .popup-row:nth-child(3) { animation-delay: 0.09s; } .popup-rows .popup-row:nth-child(4) { animation-delay: 0.12s; } .popup-rows .popup-row:nth-child(5) { animation-delay: 0.15s; } .popup-rows .popup-row:nth-child(6) { animation-delay: 0.18s; } .popup-rows .popup-row:nth-child(7) { animation-delay: 0.21s; } .popup-rows .popup-row:nth-child(8) { animation-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { .mapboxgl-popup-content, .popup-price.in, .popup-photo img, .popup-rows .popup-row { animation: none; } } .popup-meta { font-size: 0.78rem; color: var(--muted); background: rgba(124, 140, 248, 0.08); border: 1px solid var(--line); border-radius: 9px; padding: 10px; margin-bottom: 12px; } .popup-meta b { color: var(--text); font-weight: 500; } .popup-row { display: flex; justify-content: space-between; font-size: 0.82rem; padding: 3px 0; } .popup-row .label { color: var(--muted); } .popup-row .value { font-family: var(--mono); } /* ── Selected-aircraft detail panel (replaces the popup) ────── */ .detail { position: absolute; top: 20px; left: 20px; /* Wide enough that seven calendar columns each fit a full "₹6,425" — at the old 300px every cell truncated to "₹6,4…", which is worse than useless for a price. Capped against the viewport so it still behaves on a small laptop. */ width: min(440px, calc(100vw - 40px)); z-index: 2; display: flex; flex-direction: column; max-height: calc(100vh - 40px); background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 25px 50px -12px var(--shadow); overflow: hidden; animation: panelIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); } .detail[hidden] { display: none; } @keyframes panelIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } } .detail-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 16px 12px; border-bottom: 1px solid var(--line); } .detail-id h2 { margin: 0; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; } .detail-hex { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); } .detail-close { background: transparent; border: none; color: var(--muted); font-size: 1.35rem; line-height: 1; cursor: pointer; padding: 0 4px; } .detail-close:hover { color: var(--text); } .detail-scroll { overflow-y: auto; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .detail-scroll::-webkit-scrollbar { width: 8px; } .detail-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; } .detail-photo { width: 100%; height: 150px; border-radius: 10px; position: relative; background: var(--fill-1); display: grid; place-items: center; font-size: 0.78rem; color: var(--muted); overflow: hidden; } .detail-photo img { width: 100%; height: 100%; object-fit: cover; animation: fadeIn 0.45s ease; } .detail-route { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.9rem; } .detail-route .rt-row { display: flex; align-items: center; justify-content: space-between; } .detail-route .ap { font-weight: 500; } .detail-route .arrow { color: var(--accent); } .detail-route .via { color: var(--muted); font-size: 0.72rem; } .dsec { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .dsec > summary { list-style: none; cursor: pointer; padding: 10px 12px; font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; } .dsec > summary::-webkit-details-marker { display: none; } .dsec > summary::after { content: "▾"; color: var(--muted); font-size: 0.7rem; transition: transform 0.2s ease; } .dsec[open] > summary::after { transform: rotate(180deg); } .dsec-body { padding: 2px 12px 12px; font-size: 0.8rem; color: var(--muted); } .dsec-body b { color: var(--text); font-weight: 500; } .dsec-body .mono { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); } .dsec-rows .popup-row { padding: 4px 0; } @media (max-width: 520px) { .detail { left: 12px; right: 12px; top: 12px; width: auto; } } /* ── Small screens ──────────────────────────────────────────── */ @media (max-width: 520px) { .panel { left: 12px; right: 12px; top: 12px; width: auto; } } /* ── Map → Dashboard switch button ──────────────────────────── */ .nav-switch { position: absolute; top: 20px; right: 20px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); backdrop-filter: blur(12px); border: 1px solid var(--line-strong); border-radius: 12px; color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600; transition: border-color 0.2s, transform 0.2s; } .nav-switch:hover { border-color: var(--accent); transform: translateY(-1px); } .nav-switch-idx { font-family: var(--mono); font-size: 11px; color: var(--accent); border: 1px solid var(--line-strong); border-radius: 6px; padding: 2px 6px; } .nav-switch-arrow { color: var(--muted); } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; } .stat-card { background: var(--surface-solid); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; } .stat-card .k { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .stat-card .v { font-size: 26px; font-weight: 700; margin-top: 6px; letter-spacing: -0.02em; } .stat-card .v small { font-size: 14px; font-weight: 500; color: var(--muted); } .up { color: var(--err); } .down { color: var(--ok); } .grid2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; } @media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } } .dcard { background: var(--surface-solid); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; margin-bottom: 16px; } .dcard h2 { font-size: 15px; font-weight: 600; margin: 0 0 2px; } .dcard .hint { color: var(--muted); font-size: 12px; margin: 0 0 14px; } .chart-box { position: relative; height: 340px; } .chart-box.short { height: 260px; } /* Sector table */ .sector { width: 100%; border-collapse: collapse; font-size: 13px; } .sector th { text-align: left; color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 8px; border-bottom: 1px solid var(--line); } .sector td { padding: 9px 8px; border-bottom: 1px solid var(--line); } .sector tr:last-child td { border-bottom: none; } .sector .pair { font-family: var(--mono); font-weight: 600; } .sector .bar-cell { width: 40%; } .sbar { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--accent), #a855f7); } .sector .price { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } /* Collect controls */ .collect-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; } .collect-bar .btn { cursor: pointer; } .collect-note { color: var(--muted); font-size: 12px; } .empty { color: var(--muted); font-size: 13px; text-align: center; padding: 40px 0; } /* ── Dashboard · sections ───────────────────────────────────── */ .tag { font-family: var(--mono); font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; vertical-align: middle; } /* ── Hero row · current index / validation / observation count ── */ .hero-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; } @media (max-width: 1000px) { .hero-row { grid-template-columns: 1fr; } } .hero-row .dcard { margin-bottom: 0; } .hero-card { background: radial-gradient(120% 140% at 0% 0%, rgba(124, 140, 248, 0.14), transparent 60%), var(--surface-solid); } .hero-card .k { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .hero-val { font-size: 52px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin-top: 6px; } .hero-meta { color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 1.5; } .chg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; } .chg { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; } .chg-k { font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .chg-v { font-size: 17px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; } .chg-s { font-size: 10.5px; color: var(--muted); margin-top: 2px; } /* Key/value stacks used by validation, tracked, availability */ .kv-list { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; } .kv { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--muted); } .kv b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; } .val-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 10px; border-radius: 999px; border: 1px solid; } .b-aligned { color: var(--ok); border-color: rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.1); } .b-watch { color: var(--warn); border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.1); } .b-divergent { color: var(--err); border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.1); } .val-score { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; } .val-score small { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 4px; } .val-note { margin: 12px 0 0 !important; line-height: 1.5; } .val-note a { color: var(--accent); } .tracked-val { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; } .tracked-val small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 2px; } /* ── Component donut legend ─────────────────────────────────── */ .comp-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; } .comp-item { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 9px; font-size: 12.5px; } .comp-item i { width: 10px; height: 10px; border-radius: 3px; display: block; } .comp-k { color: var(--muted); } .comp-v { font-variant-numeric: tabular-nums; font-weight: 600; } .comp-s { font-family: var(--mono); font-size: 11px; color: var(--muted); width: 44px; text-align: right; } .comp-total { border-top: 1px solid var(--line); padding-top: 7px; margin-top: 2px; } .comp-total .comp-k { color: var(--text); font-weight: 600; } /* ── Weight bar in the route-index table ────────────────────── */ .wbar { height: 6px; width: 72px; border-radius: 3px; background: var(--fill-2); overflow: hidden; } .wbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #a855f7); } /* ── Heatmap ────────────────────────────────────────────────── */ .scroll-x { overflow-x: auto; } .heat { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 12.5px; min-width: 620px; } .heat th { text-align: left; color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 6px; } .heat th.price { text-align: center; } .heat td.pair { font-family: var(--mono); font-weight: 600; white-space: nowrap; padding-right: 6px; } .heat td.price { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; padding-right: 6px; } .heat-cell { border-radius: 8px; padding: 8px 6px; text-align: center; line-height: 1.25; border: 1px solid var(--line); } .hc-p { display: block; font-weight: 600; font-variant-numeric: tabular-nums; } .hc-d { display: block; font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 2px; } /* Seven-step diverging scale: green (cheap) → neutral → red (dear). */ .s-3, .heat-swatch.s-3 { background: rgba(74, 222, 128, 0.30); border-color: rgba(74, 222, 128, 0.35); } .s-2, .heat-swatch.s-2 { background: rgba(74, 222, 128, 0.20); } .s-1, .heat-swatch.s-1 { background: rgba(74, 222, 128, 0.10); } .s0, .heat-swatch.s0 { background: var(--fill-1); } .s1, .heat-swatch.s1 { background: rgba(248, 113, 113, 0.10); } .s2, .heat-swatch.s2 { background: rgba(248, 113, 113, 0.20); } .s3, .heat-swatch.s3 { background: rgba(248, 113, 113, 0.32); border-color: rgba(248, 113, 113, 0.38); } .heat-cell.na { background: repeating-linear-gradient(45deg, var(--fill-1) 0 6px, transparent 6px 12px); color: var(--muted); } .heat-key { display: flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 11px; color: var(--muted); } .heat-swatch { width: 22px; height: 12px; border-radius: 3px; border: 1px solid var(--line); display: inline-block; } /* ── Generic row lists (book/wait, best time, deals, alerts) ─── */ .row-list { display: flex; flex-direction: column; } .row-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; } .row-list .row-item:last-child { border-bottom: none; } a.row-item.deal { border-radius: 8px; padding: 11px 8px; margin: 0 -8px; transition: background 0.15s ease; } a.row-item.deal:hover { background: rgba(124, 140, 248, 0.07); } .ri-main { min-width: 0; } .ri-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; flex-wrap: wrap; } .ri-title .pair { font-family: var(--mono); } .ri-sub { color: var(--muted); font-weight: 400; font-size: 12.5px; } .ri-note { color: var(--muted); font-size: 11.5px; margin-top: 3px; } .ri-side { text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; } .ri-price { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .ri-cap { font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } /* ── Book / hold / wait signal pills ────────────────────────── */ .sig-summary { display: flex; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; } .sig-pill { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; } .sig-book, b.sig-book { color: var(--ok); border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.1); } .sig-hold { color: var(--muted); border-color: var(--line-strong); background: var(--fill-1); } .sig-wait, b.sig-wait { color: var(--warn); border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.1); } b.sig-book, b.sig-wait { font-size: 10.5px; padding: 2px 6px; border-radius: 5px; border-width: 1px; border-style: solid; } /* ── Availability ───────────────────────────────────────────── */ .avail-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .avail-val { font-size: 42px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .avail-val small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 4px; } .avail-kv { margin-top: 0; min-width: 220px; flex: 1; } .avail-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } .ab-row { display: grid; grid-template-columns: 44px 1fr 46px; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); } .ab-k { font-family: var(--mono); } .ab-v { text-align: right; font-variant-numeric: tabular-nums; } .ab-track { height: 7px; border-radius: 4px; background: var(--fill-2); overflow: hidden; } .ab-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #22d3ee); } /* ── Price alerts ───────────────────────────────────────────── */ .alert-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; } .mini { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; } .mini-k { font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .mini-v { font-size: 20px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; } .alert-form { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; margin-bottom: 14px; } @media (max-width: 560px) { .alert-form { grid-template-columns: 1fr; } } .alert-form select, .alert-form input { background: var(--bg); border: 1px solid var(--line-strong); border-radius: 9px; color: var(--text); font: inherit; font-size: 12.5px; padding: 8px 10px; min-width: 0; } .alert-form select:focus, .alert-form input:focus { outline: none; border-color: var(--accent); } .alert-form button { white-space: nowrap; cursor: pointer; } .link-btn { background: transparent; border: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 11.5px; padding: 2px 0; text-decoration: underline; text-underline-offset: 2px; } .link-btn:hover { color: var(--err); } .link-btn:disabled { opacity: 0.5; cursor: default; } /* ── AirSewa complaint card ─────────────────────────────────── */ .complaint-card { display: flex; flex-direction: column; } .complaint-btn { display: inline-block; align-self: flex-start; margin-top: auto; text-decoration: none; } .complaint-note { margin: 12px 0 0 !important; } .wcell { display: flex; align-items: center; gap: 8px; } .wcell span { font-family: var(--mono); font-size: 11px; color: var(--muted); } .collect-bar .btn { flex: 0 0 auto; } /* Wide tables scroll inside their own card rather than the page body. */ #routeIndexBox, #airlineTableBox, #sectorBox { overflow-x: auto; } #routeIndexBox .sector, #airlineTableBox .sector, #sectorBox .sector { min-width: 480px; } /* Grid children default to min-width:auto, which lets a wide table push the card past the viewport instead of scrolling inside it. */ .grid2 > *, .hero-row > *, .stat-row > * { min-width: 0; } /* ── Auth pages (login / signup) ────────────────────────────── */ body.auth { overflow: hidden; } .auth-split { display: grid; grid-template-columns: minmax(420px, 46%) 1fr; height: 100vh; height: 100dvh; } /* Form side */ .auth-pane { display: flex; align-items: center; justify-content: center; padding: 32px; /* Still scrollable on short viewports, but without the bar cutting down the middle of the split. */ overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; background: radial-gradient(90% 70% at 0% 0%, rgba(124, 140, 248, 0.10), transparent 60%), var(--bg); border-right: 1px solid var(--line); } .auth-pane::-webkit-scrollbar { width: 0; height: 0; } .auth-inner { width: 100%; max-width: 380px; } .auth-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); margin-bottom: 34px; } .auth-brand-mark { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(160deg, var(--accent), #4f46e5); } .auth-brand-mark svg { width: 19px; height: 19px; fill: var(--on-accent); } .auth-brand b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .auth-brand small { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; } .auth-title { font-size: 27px; font-weight: 700; margin: 0; letter-spacing: -0.02em; } .auth-sub { color: var(--muted); font-size: 13px; margin: 7px 0 26px; line-height: 1.55; } .auth-error { border: 1px solid rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.09); color: var(--err-text); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45; margin-bottom: 16px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 12px; font-weight: 500; margin-bottom: 6px; color: var(--text); } .field label .opt { font-family: var(--mono); font-size: 10px; font-weight: 400; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-left: 5px; } .field input { width: 100%; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 10px; color: var(--text); font: inherit; font-size: 13.5px; padding: 11px 13px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .field input::placeholder { color: var(--placeholder); } .field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 140, 248, 0.15); } .field input:-webkit-autofill { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--surface-solid) inset; } .field-wrap { position: relative; } .field-wrap input { padding-right: 62px; } .reveal { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent; border: none; cursor: pointer; color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 500; padding: 5px 7px; border-radius: 6px; } .reveal:hover { color: var(--text); background: var(--fill-2); } .pw-hint { font-size: 11.5px; color: var(--muted); margin-top: 6px; min-height: 15px; } .pw-hint.weak { color: var(--warn); } .pw-hint.ok { color: var(--muted); } .pw-hint.strong { color: var(--ok); } .auth-submit { width: 100%; flex: none; padding: 12px; border-radius: 10px; font-size: 13.5px; margin-top: 6px; } .auth-submit:disabled { opacity: 0.65; cursor: default; } .auth-alt { font-size: 13px; color: var(--muted); margin: 20px 0 0; text-align: center; } .auth-alt a { color: var(--accent); text-decoration: none; font-weight: 500; } .auth-alt a:hover { text-decoration: underline; } .auth-foot { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); } .auth-foot a { color: var(--muted); text-decoration: none; } .auth-foot a:hover { color: var(--text); } /* Map side */ .auth-map-pane { position: relative; overflow: hidden; background: var(--bg); } #authMap { position: absolute; inset: 0; } /* Fades the globe into the page edges so the caption stays readable. */ .auth-map-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(var(--bg-rgb), 0.85), rgba(var(--bg-rgb), 0) 30%), linear-gradient(to top, rgba(var(--bg-rgb), 0.9), rgba(var(--bg-rgb), 0) 45%); } .auth-map-caption { position: absolute; left: 32px; bottom: 32px; right: 32px; max-width: 340px; pointer-events: none; } .amc-k { font-family: var(--mono); font-size: 10.5px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; } .amc-v { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; margin-top: 5px; } .auth-map-caption p { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin: 8px 0 0; } /* Below the split breakpoint the map becomes a banner above the form. */ @media (max-width: 860px) { body.auth { overflow: auto; } .auth-split { grid-template-columns: 1fr; grid-template-rows: 210px 1fr; height: auto; min-height: 100dvh; } .auth-map-pane { order: -1; border-bottom: 1px solid var(--line); } .auth-pane { border-right: none; padding: 28px 22px 44px; align-items: flex-start; } .auth-map-veil { background: linear-gradient(to bottom, rgba(var(--bg-rgb), 0.55), rgba(var(--bg-rgb), 0) 40%, rgba(var(--bg-rgb), 0.9)); } .auth-map-caption { left: 22px; right: 22px; bottom: 16px; max-width: none; } .auth-map-caption p { display: none; } .amc-v { font-size: 17px; } .auth-brand { margin-bottom: 24px; } } /* ── Account chip on the dashboard header ───────────────────── */ /* Keep the caption clear of Mapbox's logo / attribution in the bottom-left. */ .auth-map-caption { bottom: 58px; } .auth-map-pane .mapboxgl-ctrl-bottom-left, .auth-map-pane .mapboxgl-ctrl-bottom-right { z-index: 2; } @media (max-width: 860px) { /* On the banner the bottom edge belongs to the logo, so the caption moves up. */ .auth-map-caption { top: 14px; bottom: auto; } } /* ── Role picker (signup) ───────────────────────────────────── */ .roles { border: none; padding: 0; margin: 0 0 18px; min-width: 0; } .roles legend { padding: 0; font-size: 12px; font-weight: 500; color: var(--text); margin-bottom: 8px; } .role { display: block; cursor: pointer; } .role + .role { margin-top: 8px; } /* The native radio stays in the DOM for keyboard and screen-reader use, but is visually replaced by the card below. */ .role input { position: absolute; opacity: 0; width: 0; height: 0; } .role-box { display: block; position: relative; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-solid); padding: 11px 40px 11px 13px; transition: border-color 0.15s ease, background 0.15s ease; } .role-box b { display: block; font-size: 13px; font-weight: 600; } .role-box small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; } /* Radio dot on the right. */ .role-box::after { content: ""; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: transparent; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .role:hover .role-box { border-color: var(--fill-hi); } .role input:checked + .role-box { border-color: var(--accent); background: rgba(124, 140, 248, 0.08); } .role input:checked + .role-box::after { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface-solid); } .role input:focus-visible + .role-box { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 140, 248, 0.18); } /* Role badge on the dashboard account chip. */ /* Operations panels (collection controls, DGCA validation, run stats) are for employees; a consumer session drops them and the hero row reflows. */ body[data-role="consumer"] [data-ops] { display: none !important; } body[data-role="consumer"] .hero-row { grid-template-columns: 1fr; } /* Consumer-only blocks: the flight search. Employees get the ops view instead; signed-out visitors see both. */ body[data-role="employee"] [data-consumer] { display: none !important; } /* ── Flight search ──────────────────────────────────────────── */ .fsearch { display: grid; grid-template-columns: 1fr auto 1fr 1.1fr auto; gap: 10px; /* Top-aligned with a fixed-height label row: the inputs then line up across all four columns regardless of what sits under them. */ align-items: start; } @media (max-width: 900px) { .fsearch { grid-template-columns: 1fr auto 1fr; } .fsearch .fs-field:nth-of-type(3) { grid-column: 1 / -1; } .fs-go { grid-column: 1 / -1; margin-top: 4px; } } .fs-field { display: flex; flex-direction: column; min-width: 0; } .fs-field label { font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; height: 13px; line-height: 13px; margin-bottom: 7px; } .fs-field input { background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px; color: var(--text); font: inherit; font-size: 14px; padding: 10px 12px; min-width: 0; } .fs-field input#fsFrom, .fs-field input#fsTo { font-family: var(--mono); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .fs-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 140, 248, 0.15); } .fs-city { font-size: 11px; color: var(--muted); margin-top: 5px; min-height: 14px; } .fs-swap { background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 10px; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 11px 12px; margin-top: 20px; } .fs-swap:hover { color: var(--text); border-color: var(--accent); } .fs-go { flex: none; margin-top: 20px; cursor: pointer; white-space: nowrap; } .fs-error { margin-top: 14px; border: 1px solid rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.09); color: var(--err-text); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; } /* Route map card */ .route-map { position: relative; height: 300px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); } /* Lowest fare + verdict */ .lowest-val { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; } .lowest-val small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 5px; } .verdict { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .verdict-pill { font-size: 11.5px; padding: 4px 10px; } .verdict-why { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 9px 0 0; } .verdict .kv-list { margin-top: 11px; } .lowest-book { display: inline-block; margin-top: 16px; text-decoration: none; text-align: center; } .stale-note { margin: 10px 0 0 !important; } .cat-hidden { display: none !important; } /* A class-level `display` beats the [hidden] attribute's UA rule, so restate it or the bar renders for consumers, who have no tabs. */ /* With tabs, exactly one section shows and it always sits directly under them, so its divider rule would read as a stray line below the tab bar. */ /* ══ Dashboard shell · sidebar + topbar ═══════════════════════ */ body.dash { overflow: hidden; } .shell { display: grid; grid-template-columns: 244px 1fr; height: 100vh; height: 100dvh; } /* ── Sidebar ────────────────────────────────────────────────── */ .side { display: flex; flex-direction: column; min-height: 0; padding: 18px 14px; border-right: 1px solid var(--line); background: radial-gradient(120% 60% at 0% 0%, rgba(124, 140, 248, 0.09), transparent 60%), var(--surface-solid); } .side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; text-decoration: none; color: var(--text); } .side-mark { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(160deg, var(--accent), #4f46e5); } .side-mark svg { width: 18px; height: 18px; fill: var(--on-accent); } .side-brand-txt b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; } .side-brand-txt small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 1px; } .side-nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; } .side-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; font: 500 13px "Inter", system-ui, sans-serif; text-align: left; transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease; } .side-item:hover { color: var(--text); background: var(--fill-1); } .side-item.on { color: var(--text); font-weight: 600; background: rgba(124, 140, 248, 0.13); border-color: rgba(124, 140, 248, 0.34); } .side-item:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 140, 248, 0.18); } .side-ic { width: 17px; height: 17px; flex: none; opacity: 0.85; } .side-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .side-item.on .side-ic { opacity: 1; color: var(--accent); } .side-foot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; } .side-link { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; text-decoration: none; color: var(--muted); font-size: 12.5px; font-weight: 500; } .side-link:hover { color: var(--text); background: var(--fill-1); } .side-link-ic { font-size: 13px; width: 17px; text-align: center; } /* Signed-in user block at the foot of the sidebar */ .side-user { border-top: 1px solid var(--line); padding-top: 12px; } .side-user-top { display: flex; align-items: center; gap: 9px; } .side-avatar { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(124, 140, 248, 0.16); border: 1px solid rgba(124, 140, 248, 0.34); color: var(--accent); font-weight: 700; font-size: 12.5px; text-transform: uppercase; } .side-user-id { min-width: 0; } .side-user-id b { display: block; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-user-id small { display: block; font-family: var(--mono); font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 1px; } .side-signout { width: 100%; margin-top: 9px; padding: 7px; cursor: pointer; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; color: var(--muted); font: 500 12px "Inter", system-ui, sans-serif; } .side-signout:hover { color: var(--text); border-color: var(--accent); } /* ── Main column ────────────────────────────────────────────── */ .main { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .topbar { /* The consumer bar is sized by --panel rather than the viewport, so what fits in it is a question about the bar, not the window — see .tu-name. */ container-type: inline-size; display: flex; align-items: center; gap: 16px; padding: 16px 28px; border-bottom: 1px solid var(--line); background: rgba(var(--bg-rgb), 0.85); backdrop-filter: blur(8px); flex: none; } .topbar-txt { min-width: 0; flex: 1; } .topbar-title { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -0.02em; } .topbar-sub { color: var(--muted); font-size: 12.5px; margin: 3px 0 0; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-actions { display: flex; align-items: center; gap: 12px; flex: none; } .updated { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; } .topbar-refresh { flex: none; padding: 8px 14px; font-size: 12.5px; cursor: pointer; } .topbar-refresh:disabled { opacity: 0.6; cursor: default; } .nav-toggle { display: none; flex: none; cursor: pointer; background: transparent; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--text); font-size: 15px; padding: 7px 11px; } /* The scrolling region is the content, not the page — the chrome stays put. */ .content { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 28px 56px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .content::-webkit-scrollbar { width: 10px; } .content::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; } .content > .cat > :last-child { margin-bottom: 0; } /* ── Responsive: sidebar becomes a slide-over ───────────────── */ @media (max-width: 900px) { .shell { grid-template-columns: 1fr; } .side { position: fixed; z-index: 30; inset: 0 auto 0 0; width: 252px; transform: translateX(-100%); transition: transform 0.22s ease; background: var(--surface-solid); box-shadow: 0 0 40px var(--shadow); } body.nav-open .side { transform: none; } body.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 20; background: var(--scrim); } .nav-toggle { display: block; } .topbar { padding: 14px 16px; } .content { padding: 18px 16px 44px; } .topbar-sub { display: none; } } @media (max-width: 560px) { .updated { display: none; } } /* Cap the reading width on very wide screens without boxing the shell in. */ .content > .cat { max-width: 1500px; margin: 0 auto; } /* ── Consumer search: results left, map right ───────────────── */ .find-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; align-items: start; } .find-left { min-width: 0; } .find-right { min-width: 0; position: sticky; top: 0; display: flex; flex-direction: column; gap: 16px; /* A real height, not just a cap: the map card is flex:1 and only stretches if the column itself has a height to give it. */ height: calc(100dvh - 122px); } .find-right .dcard { margin-bottom: 0; } .map-card { padding: 0; overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 280px; } .map-head { padding: 14px 18px 10px; flex: none; } .map-head h2 { margin: 0 0 2px; } .map-head .hint { margin: 0; } .map-card .route-map { flex: 1 1 auto; height: auto; min-height: 220px; border: none; border-radius: 0; } .lowest-card { flex: none; padding: 14px 18px 16px; } .lowest-card h2 { margin: 0 0 2px; } .lowest-card .hint { margin: 0 0 10px; } @media (max-width: 1100px) { .find-split { grid-template-columns: 1fr; } .find-right { position: static; height: auto; } .map-card { min-height: 0; } .map-card .route-map { height: 320px; flex: none; } } /* Big search field, styled like a destination picker */ .ac { position: relative; } .ac-wrap { position: relative; display: flex; align-items: center; } .ac-ic { position: absolute; left: 12px; width: 16px; height: 16px; pointer-events: none; color: var(--muted); display: grid; place-items: center; } .ac-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .ac .fs-field input, .ac input { padding-left: 36px !important; } .ac-list { position: absolute; z-index: 40; top: calc(100% - 18px); left: 0; right: 0; margin: 6px 0 0; padding: 6px; list-style: none; max-height: 288px; overflow-y: auto; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 18px 44px var(--shadow); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .ac-list::-webkit-scrollbar { width: 8px; } .ac-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; } .ac-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; cursor: pointer; } .ac-item:hover, .ac-item.on { background: rgba(124, 140, 248, 0.13); } .ac-pin { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); } .ac-pin svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; } .ac-item.on .ac-pin, .ac-item:hover .ac-pin { color: var(--accent); border-color: rgba(124, 140, 248, 0.4); } .ac-txt { min-width: 0; } .ac-txt b { display: block; font-size: 13px; font-weight: 600; } .ac-code { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: 4px; } .ac-txt small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Selectable flight rows */ .flight-row { width: 100%; text-align: left; background: transparent; border: none; border-bottom: 1px solid var(--line); cursor: pointer; font: inherit; color: inherit; border-radius: 8px; padding: 11px 10px; margin: 0 -10px; width: calc(100% + 20px); } .flight-row:hover { background: var(--fill-1); } .flight-row.on { background: rgba(124, 140, 248, 0.12); box-shadow: inset 2px 0 0 var(--accent); } .flight-row:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(124, 140, 248, 0.5); } /* Popup for the selected flight on the map */ .flight-pop .mapboxgl-popup-content { background: var(--surface-solid) !important; border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px; box-shadow: 0 14px 40px var(--shadow); color: var(--text); } .flight-pop .mapboxgl-popup-tip { border-top-color: var(--surface-solid) !important; border-bottom-color: var(--surface-solid) !important; } .fp { min-width: 168px; } .fp-top { display: flex; align-items: baseline; gap: 7px; font-size: 13px; } .fp-no { font-family: var(--mono); font-size: 10.5px; color: var(--muted); } .fp-route { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 4px; } .fp-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; } .fp-price { font-size: 20px; font-weight: 700; margin-top: 7px; } .fp-book { display: block; margin-top: 9px; padding: 7px 10px; text-align: center; background: var(--accent); color: var(--on-accent); border-radius: 8px; font-size: 12px; font-weight: 600; text-decoration: none; } .fp-book:hover { background: var(--accent-hover); } /* ── Raw data ───────────────────────────────────────────────── */ .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .card-head h2 { margin: 0 0 2px; } .card-head .hint { margin: 0; } .card-head-btn { flex: none; cursor: pointer; padding: 8px 12px; font-size: 12.5px; } .raw-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .raw-actions .btn { flex: none; cursor: pointer; padding: 8px 12px; font-size: 12.5px; text-decoration: none; } .raw-select { background: var(--bg); border: 1px solid var(--line-strong); border-radius: 9px; color: var(--text); font: inherit; font-size: 12.5px; padding: 8px 10px; cursor: pointer; } .raw-select:focus { outline: none; border-color: var(--accent); } .raw-meta { font-size: 12px; color: var(--muted); margin-bottom: 12px; } .raw-meta code { font-family: var(--mono); font-size: 11px; color: var(--accent); } .raw-count { color: var(--text); font-weight: 600; } .raw { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 620px; } .raw th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 8px 10px; white-space: nowrap; font-family: var(--mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: var(--surface-solid); border-bottom: 1px solid var(--line-strong); } .raw td { padding: 7px 10px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; white-space: nowrap; } .raw tbody tr:hover { background: var(--fill-1); } .raw td.num { text-align: right; font-variant-numeric: tabular-nums; } .raw td.nul { color: var(--null); } #rawTableBox, #rawPeek { max-height: 560px; overflow-y: auto; } #rawPeek { max-height: none; } .raw-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; } .raw-pager .btn { flex: none; cursor: pointer; padding: 8px 14px; font-size: 12.5px; } .raw-pager .btn:disabled { opacity: 0.45; cursor: default; } .raw-range { font-family: var(--mono); font-size: 11.5px; color: var(--muted); } /* In the split view the search sits in a narrow column, so it wraps to two rows instead of squeezing five controls onto one line. */ .find-left .fsearch { grid-template-columns: 1fr auto 1fr; } .find-left .fsearch .fs-field:nth-of-type(3) { grid-column: 1 / 3; } .find-left .fs-go { grid-column: 3 / 4; margin-top: 20px; } .fs-city { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Compact lowest-fare card ───────────────────────────────── */ .lf-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .lf-price { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .lf-route { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 3px; } .lf-pill { flex: none; margin-top: 3px; } .lf-lines { display: flex; flex-direction: column; gap: 3px; margin-top: 9px; font-size: 11.5px; color: var(--muted); line-height: 1.45; } .lf-book { display: inline-block; margin-top: 11px; color: var(--accent); font-size: 12.5px; font-weight: 600; text-decoration: none; } .lf-book:hover { text-decoration: underline; text-underline-offset: 2px; } /* Date input: whole field is the click target for the picker. */ #fsDate { cursor: pointer; } #fsDate::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; opacity: 0.7; } #fsDate::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* Mapbox zoom control, themed to match */ .route-map .mapboxgl-ctrl-group { background: var(--surface-solid); border: 1px solid var(--line-strong); box-shadow: none; } .route-map .mapboxgl-ctrl-group button + button { border-top: 1px solid var(--line); } .route-map .mapboxgl-ctrl-group button span { filter: invert(0.85); } /* ── Origin / destination markers ───────────────────────────── */ .mpin { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: default; } .mpin-badge { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--bg-rgb), 0.9); border: 1.5px solid var(--line-strong); box-shadow: 0 4px 14px var(--shadow); } .mpin-badge svg { width: 17px; height: 17px; fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .mpin-origin .mpin-badge { border-color: rgba(124, 140, 248, 0.75); box-shadow: 0 0 0 4px rgba(124, 140, 248, 0.16), 0 4px 14px var(--shadow); } .mpin-origin .mpin-badge svg { stroke: var(--accent); } .mpin-dest .mpin-badge { border-color: rgba(34, 211, 238, 0.75); box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.14), 0 4px 14px var(--shadow); } .mpin-dest .mpin-badge svg { stroke: #22d3ee; } .mpin-label { display: flex; align-items: baseline; gap: 5px; padding: 3px 8px; border-radius: 999px; white-space: nowrap; background: rgba(var(--bg-rgb), 0.85); border: 1px solid var(--line); font-size: 10.5px; color: var(--muted); } .mpin-label b { font-family: var(--mono); font-size: 11px; color: var(--text); } /* Cooperative-gesture hint overlay, themed */ .mapboxgl-scroll-zoom-blocker, .mapboxgl-touch-pan-blocker { background: rgba(var(--bg-rgb), 0.72) !important; color: var(--text) !important; /* Mapbox hardcodes white here */ font: 500 13px "Inter", system-ui, sans-serif !important; } /* Endpoint markers stay above the flight card if they ever overlap. */ .mpin { z-index: 4; } .flight-pop { z-index: 3; } /* ══ Consumer: no sidebar, map fills the right half of the window ═════════ */ body[data-role="consumer"] .side { display: none; } body[data-role="consumer"] .shell { grid-template-columns: 1fr; } body[data-role="consumer"] .nav-toggle { display: none; } body[data-role="consumer"] .topbar { padding: 12px 20px; gap: 14px; background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.96), rgba(var(--bg-rgb), 0.86)); } body[data-role="consumer"] .topbar-title, body[data-role="consumer"] .topbar-sub { display: none; } body[data-role="consumer"] .content { padding: 0; overflow-y: auto; overflow-x: hidden; } /* min-height, not height: a fixed height would stop the section growing past the viewport and the scroll container would have nothing to scroll. */ body[data-role="consumer"] .content > .cat { max-width: none; min-height: 100%; } body[data-role="consumer"] .find-split { grid-template-columns: minmax(400px, 42%) 1fr; gap: 0; height: 100%; align-items: stretch; } body[data-role="consumer"] .find-left { padding: 18px 22px 40px; border-right: 1px solid var(--line); } body[data-role="consumer"] .content { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } body[data-role="consumer"] .content::-webkit-scrollbar { width: 9px; } body[data-role="consumer"] .content::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; } body[data-role="consumer"] .find-right { position: static; height: 100%; gap: 0; } body[data-role="consumer"] .map-card { border: none; border-radius: 0; margin: 0; min-height: 0; background: var(--bg); position: relative; } body[data-role="consumer"] .map-head { position: absolute; z-index: 2; top: 14px; left: 16px; right: 16px; padding: 10px 14px; border-radius: 12px; pointer-events: none; background: rgba(var(--bg-rgb), 0.78); border: 1px solid var(--line); backdrop-filter: blur(8px); } body[data-role="consumer"] .lowest-card { display: none; } /* Brand in the topbar, since the sidebar is gone */ .top-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex: none; } .top-brand .side-mark { width: 30px; height: 30px; } .top-brand .side-mark svg { width: 16px; height: 16px; } body[data-role="employee"] .top-brand { display: none; } /* Search / Wishlist switch */ .cview-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-solid); } .cview-tab { flex: 1; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font: 500 12.5px "Inter", system-ui, sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .cview-tab:hover { color: var(--text); background: var(--fill-1); } .cview-tab.on { color: var(--text); font-weight: 600; background: rgba(124,140,248,0.13); border-color: rgba(124,140,248,0.34); } .cview-count { min-width: 18px; padding: 1px 5px; border-radius: 999px; background: var(--fill-3); font-family: var(--mono); font-size: 10px; } .cview-tab.on .cview-count { background: rgba(124,140,248,0.28); color: var(--text); } /* ── Calendar ───────────────────────────────────────────────── */ .cal { position: relative; } .cal-btn { display: flex; align-items: center; gap: 9px; width: 100%; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px; color: var(--text); font: inherit; font-size: 13.5px; padding: 10px 12px; cursor: pointer; text-align: left; } .cal-btn:hover { border-color: var(--fill-hi); } .cal-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,140,248,0.15); } .cal-ic { width: 15px; height: 15px; flex: none; color: var(--muted); } .cal-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .cal-pop { position: absolute; z-index: 45; top: calc(100% + 6px); left: 0; padding: 14px; border-radius: 14px; background: var(--surface-solid); border: 1px solid var(--line-strong); box-shadow: 0 22px 54px var(--shadow-deep); } .cal-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .cal-title { font-size: 12.5px; font-weight: 600; } .cal-nav { width: 28px; height: 28px; flex: none; cursor: pointer; background: transparent; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); font-size: 15px; line-height: 1; } .cal-nav:hover:not(:disabled) { border-color: var(--accent); } .cal-nav:disabled { opacity: 0.35; cursor: default; } .cal-months { display: flex; gap: 20px; } .cal-mhead { font-size: 12.5px; font-weight: 600; text-align: center; margin-bottom: 9px; } .cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 30px); gap: 2px; } .cal-dow span { font-family: var(--mono); font-size: 9.5px; color: var(--muted); text-transform: uppercase; text-align: center; padding-bottom: 5px; } .cal-day { height: 30px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; font: 500 12px "Inter", system-ui, sans-serif; } .cal-day.out { visibility: hidden; } .cal-day:hover:not(:disabled):not(.on) { background: var(--fill-2); } .cal-day:disabled { color: var(--disabled); cursor: default; } .cal-day.today:not(.on) { border-color: var(--line-strong); } .cal-day.on { background: var(--accent); color: var(--on-accent); font-weight: 700; } .cal-foot { display: flex; align-items: center; gap: 8px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); } .cal-sel { flex: 1; font-size: 12px; color: var(--muted); } .cal-today { flex: none; padding: 6px 10px; font-size: 11.5px; cursor: pointer; } @media (max-width: 720px) { /* Anchored right, the two-month popover hangs off the left edge of a narrow screen, so pin it to the field's left and let the grid flex instead. */ .cal-months { flex-direction: column; gap: 14px; } .cal-pop { left: 0; right: auto; max-width: calc(100vw - 56px); } .cal-dow, .cal-grid { grid-template-columns: repeat(7, 1fr); } .cal-month { min-width: 196px; } } /* ── Flight row actions ─────────────────────────────────────── */ .flight-row { display: flex; align-items: center; gap: 12px; } .fr-acts { display: flex; align-items: center; gap: 4px; flex: none; } .fr-act { width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: transparent; text-decoration: none; } .fr-act svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .fr-act:hover { color: var(--text); border-color: var(--line-strong); background: var(--fill-2); } .fr-wish:hover { color: #f472b6; border-color: rgba(244,114,182,0.4); } .fr-wish.saved { color: #f472b6; border-color: rgba(244,114,182,0.5); background: rgba(244,114,182,0.12); } .fr-wish.saved svg { fill: #f472b6; } .fr-book:hover { color: var(--accent); border-color: rgba(124,140,248,0.45); } .wish-acts { display: flex; align-items: center; gap: 9px; } .wish-book { color: var(--accent); font-size: 11.5px; font-weight: 600; text-decoration: none; } .wish-book:hover { text-decoration: underline; text-underline-offset: 2px; } /* ── Best time to buy ───────────────────────────────────────── */ .bb-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); } .bb-row:last-child { border-bottom: none; } .bb-k { font-size: 12px; color: var(--muted); flex: none; } .bb-v { font-size: 12.5px; text-align: right; } .bb-v small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; line-height: 1.4; } .bb-v .sig-pill { vertical-align: middle; } /* ── Price calendar ─────────────────────────────────────────── */ /* A real month grid: seven weekday columns, Monday first, with leading blanks so each date sits under its own weekday. Cells are tinted by quartile against this route's own spread — "cheap" only ever means cheap for here. */ .pcal { display: flex; flex-direction: column; gap: 18px; } .pcal-month { min-width: 0; } .pcal-mh { font-size: 12px; font-weight: 600; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; } .pcal-mh::after { content: ""; flex: 1; height: 1px; background: var(--line); } .pcal-dow, .pcal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .pcal-dow { margin-bottom: 4px; } .pcal-dow span { font-family: var(--mono); font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; text-align: center; } /* Saturday and Sunday, so the weekend reads as a block at a glance. */ .pcal-dow span:nth-child(6), .pcal-dow span:nth-child(7) { color: var(--fg); } .pcal-pad { visibility: hidden; } .pcal-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; min-height: 42px; justify-content: center; border: 1px solid var(--line); border-radius: 7px; text-decoration: none; color: var(--fg); transition: transform 0.1s ease, border-color 0.1s ease; } .pcal-cell:hover { transform: translateY(-1px); border-color: var(--accent); } .pcal-n { font-family: var(--mono); font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1; } .pcal-p { font-size: 10.5px; font-variant-numeric: tabular-nums; line-height: 1.2; max-width: 100%; white-space: nowrap; } .pcal-cheap { background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.25); } .pcal-cheap .pcal-p { color: var(--ok); } .pcal-mid { background: rgba(255, 255, 255, 0.02); } .pcal-dear { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.2); } .pcal-dear .pcal-p { color: var(--err); } /* The single cheapest date in the whole range. */ .pcal-best { outline: 1px solid var(--ok); outline-offset: 1px; } .pcal-we .pcal-n { color: var(--fg); } .pcal-key { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 10.5px; color: var(--muted); } .pcal-key span { display: flex; align-items: center; gap: 5px; } .pcal-key i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--line); } .pcal-key i.pcal-cheap { background: rgba(74, 222, 128, 0.22); border-color: rgba(74, 222, 128, 0.4); } .pcal-key i.pcal-dear { background: rgba(248, 113, 113, 0.2); border-color: rgba(248, 113, 113, 0.36); } /* ── Price insights (Google Flights layout) ─────────────────── */ .pi-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .pi-head h2 { margin: 0; font-size: 17px; font-weight: 400; } .pi-head h2 b { font-weight: 700; } .pi-spark { flex: none; color: var(--accent); } .pi-spark svg { width: 24px; height: 24px; fill: currentColor; stroke: none; } .pi-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr); gap: 28px; align-items: start; padding: 16px 0 4px; } .pi-verdict { font-size: 15px; margin-bottom: 8px; } .pi-verdict b { text-transform: capitalize; } .pi-note { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; } /* The bubble and the end labels are absolutely positioned against the bar, so the gauge keeps its own height instead of collapsing onto them. */ .pi-gauge { position: relative; padding: 30px 0 22px; } .pi-bar { position: relative; display: flex; gap: 3px; height: 4px; } .pi-seg { border-radius: 2px; } .pi-mid { flex: 1 1 auto; background: var(--warn); } .pi-lo { background: var(--ok); } .pi-hi { background: var(--err); } .pi-dot { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--surface-solid); border: 2px solid var(--text); } .pi-bubble { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; text-transform: capitalize; } .pi-ends { position: relative; height: 14px; margin-top: 8px; } .pi-ends span { position: absolute; transform: translateX(-50%); font-size: 11.5px; color: var(--muted); } .pi-hist { margin-top: 18px; } .pi-hist-t { font-size: 14px; margin-bottom: 10px; } @media (max-width: 720px) { .pi-body { grid-template-columns: 1fr; gap: 10px; } } @media (max-width: 1100px) { body[data-role="consumer"] .find-split { grid-template-columns: 1fr; height: auto; } body[data-role="consumer"] .content { overflow-y: auto; } body[data-role="consumer"] .find-left { overflow: visible; border-right: none; } body[data-role="consumer"] .map-head { position: static; background: none; border: none; backdrop-filter: none; padding: 14px 18px 10px; } body[data-role="consumer"] .map-card { border: 1px solid var(--line); border-radius: 16px; margin: 0 16px 20px; } body[data-role="consumer"] .map-card .route-map { height: 320px; flex: none; } } /* ══ Consumer: map runs the full window height ════════════════════════════ */ /* The topbar and the scrolling panel are both constrained to the left column, so the map column can be fixed to the viewport and reach the very top. */ body[data-role="consumer"] { --panel: clamp(360px, 42vw, 620px); } body[data-role="consumer"] .main { position: relative; } body[data-role="consumer"] .topbar { width: var(--panel); } body[data-role="consumer"] .content { width: var(--panel); } body[data-role="consumer"] .find-split { display: block; height: auto; } body[data-role="consumer"] .find-left { padding: 16px 20px 40px; border-right: none; } body[data-role="consumer"] .find-right { position: fixed; top: 0; right: 0; bottom: 0; width: calc(100vw - var(--panel)); height: 100dvh; border-left: 1px solid var(--line); z-index: 2; } body[data-role="consumer"] .map-card { height: 100%; } body[data-role="consumer"] .map-head { top: 12px; left: 12px; right: 12px; padding: 8px 12px; border-radius: 10px; } body[data-role="consumer"] .map-head .hint { display: block; margin: 0; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Live-map button in the topbar */ .topbar-live { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; font-size: 12.5px; text-decoration: none; white-space: nowrap; } /* display:inline-flex above beats the UA [hidden] rule, the same trap .chat-fab hit: the admin-only Activity link is rendered with hidden set and would show for everyone until this restated it. */ .topbar-live[hidden] { display: none; } .tl-ic { width: 14px; height: 14px; } .tl-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; } body[data-role="employee"] .topbar-live { display: none; } @media (max-width: 1100px) { body[data-role="consumer"] { --panel: 100vw; } body[data-role="consumer"] .topbar, body[data-role="consumer"] .content { width: 100%; } body[data-role="consumer"] .find-right { position: static; width: auto; height: auto; border-left: none; } body[data-role="consumer"] .map-card { height: auto; } } @media (max-width: 560px) { .topbar-live span:not(.tl-ic) { display: none; } .topbar-live { padding: 8px 10px; } } /* Account control in the consumer top bar (there is no sidebar to hold it). That bar is only as wide as the left panel (~620px at most), so the last-refreshed text is dropped there and moved onto the Refresh button's tooltip — otherwise it pushes Sign out past the edge and under the map. */ body[data-role="consumer"] .updated { display: none; } body[data-role="consumer"] .topbar { overflow: hidden; } body[data-role="consumer"] .topbar-actions { min-width: 0; flex: 0 1 auto; } .top-user { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; } .tu-avatar { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(124, 140, 248, 0.16); border: 1px solid rgba(124, 140, 248, 0.34); color: var(--accent); font-weight: 700; font-size: 11.5px; text-transform: uppercase; } /* The one elastic thing in the bar: when the controls need room, the name gives it up and ellipsises rather than letting Sign out slide off the edge. */ .tu-name { font-size: 12.5px; font-weight: 600; max-width: 110px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tu-out { flex: none; padding: 7px 11px; font-size: 12px; cursor: pointer; } body[data-role="employee"] .top-user { display: none; } /* Below this the controls fill the bar and the name has nothing left to show but an initial or two; the avatar (and its e-mail tooltip) carries identity from there down. The flex shrink above still guards longer names above it. */ @container (max-width: 780px) { .tu-name { display: none; } } /* The bar also carries Live map, API keys, theme and Refresh, so tighten it before Sign out (which must never shrink or clip) runs out of room. */ @container (max-width: 740px) { .topbar-actions { gap: 8px; } .topbar-live span:not(.tl-ic) { display: none; } .topbar-live { padding: 8px 10px; } .topbar-refresh { padding: 8px 10px; } .top-brand .side-brand-txt small { display: none; } } @container (max-width: 600px) { .tu-avatar { display: none; } .top-brand .side-brand-txt { display: none; } } @media (max-width: 560px) { /* Brand strapline and avatar go so the brand, Live map, Refresh and Sign out all fit a phone-width bar without the last one sliding off the edge. */ .topbar-refresh { padding: 8px 10px; } .tu-avatar { display: none; } .top-brand .side-brand-txt small { display: none; } body[data-role="consumer"] .topbar { gap: 8px; padding: 12px 14px; } } /* ── Theme toggle ───────────────────────────────────────────── */ /* One button, three homes: floating over the map, inline in the dashboard topbar, and pinned to the corner of the auth panes. */ .theme-btn { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; padding: 0; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--muted); cursor: pointer; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .theme-btn:hover { color: var(--text); background: var(--fill-2); border-color: var(--fill-hi); } .theme-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } .theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Map page: the APIx switch used to own the top-right corner on its own, so the two now share a rail and the switch gives up its absolute position. */ .top-rail { position: absolute; top: 20px; right: 20px; z-index: 2; display: flex; align-items: stretch; gap: 10px; } .top-rail .nav-switch { position: static; top: auto; right: auto; } .top-rail .theme-btn { width: 42px; height: auto; } /* Auth pages: the panes have no chrome to hang it off, so it floats. */ .theme-btn.auth-theme { position: fixed; top: 18px; right: 18px; z-index: 5; } /* ══ API keys page ═════════════════════════════════════════════ */ /* Sidebar links on this page are plain anchors, not the dashboard's buttons. */ a.side-item { text-decoration: none; display: flex; align-items: center; gap: 10px; } .keys-page .content > .cat { max-width: 1100px; } .key-form { display: grid; grid-template-columns: 1fr 180px auto; gap: 12px; align-items: end; } .key-form .field { margin-bottom: 0; } .key-form select { width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--fill-1); color: var(--text); font: 400 14px "Inter", sans-serif; } .key-form select:focus { outline: none; border-color: var(--accent); } .key-go { flex: none; cursor: pointer; padding: 11px 18px; } .keys-page .auth-error { margin-bottom: 12px; } .key-reveal { border-color: rgba(74, 222, 128, 0.4); background: linear-gradient(0deg, rgba(74, 222, 128, 0.06), rgba(74, 222, 128, 0.06)), var(--surface-solid); } .key-secret { display: flex; gap: 10px; align-items: center; } .key-secret code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: var(--mono); font-size: 13px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--fill-1); } .key-secret .btn { flex: none; cursor: pointer; } .key-dismiss { margin-top: 12px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted); font: 500 12.5px "Inter", sans-serif; text-decoration: underline; } .key-dismiss:hover { color: var(--text); } .key-table-wrap { overflow-x: auto; } .key-table th.num, .key-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .key-table td { white-space: nowrap; } .key-table td small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; } .key-dead td:not(.key-actions) { opacity: 0.55; } .key-actions { text-align: right; } .key-actions .btn { flex: none; display: inline-block; padding: 6px 10px; font-size: 12px; margin-left: 6px; } .key-del:hover { color: var(--err); border-color: var(--err); } .key-code { margin: 0; padding: 12px 14px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--fill-1); } .key-note { margin: 12px 0 0 !important; } .mono { font-family: var(--mono); } @media (max-width: 700px) { .key-form { grid-template-columns: 1fr; } .key-secret { flex-direction: column; align-items: stretch; } } /* ── API docs page ──────────────────────────────────────────── */ .docs-page .content { scroll-behavior: smooth; } .docs-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 32px; max-width: 1180px; margin: 0 auto; align-items: start; } .docs-main { min-width: 0; } .docs-main .dcard { scroll-margin-top: 16px; } .docs-page code { font-family: var(--mono); font-size: 0.92em; } .docs-page .hint code, .ep-body p code, .doc-params td code, .doc-note code { padding: 1px 6px; border-radius: 5px; background: var(--fill-2); border: 1px solid var(--line); font-size: 0.86em; } .docs-page .hint a, .rsec-intro a { color: var(--accent); } /* Hero */ .doc-hero { position: relative; overflow: hidden; margin-bottom: 16px; padding: 30px 30px 28px; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(70% 120% at 100% 0%, rgba(124, 140, 248, 0.22), transparent 60%), radial-gradient(50% 90% at 0% 100%, rgba(168, 85, 247, 0.12), transparent 65%), var(--surface-solid); } .doc-hero-tag { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--accent); border: 1px solid rgba(124, 140, 248, 0.4); border-radius: 999px; padding: 4px 11px; background: rgba(124, 140, 248, 0.1); } .doc-hero h2 { margin: 14px 0 8px; font-size: 27px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; max-width: 22ch; } .doc-hero p { margin: 0; max-width: 60ch; color: var(--muted); font-size: 14px; line-height: 1.6; } .doc-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; } .doc-hero-actions .btn { flex: none; text-decoration: none; padding: 10px 18px; display: inline-block; cursor: pointer; } /* Code blocks */ .cb { position: relative; margin: 8px 0 0; } .cb pre { margin: 0; padding: 14px 16px; overflow-x: auto; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--fill-1); font-family: var(--mono); font-size: 12.5px; line-height: 1.65; tab-size: 2; } .cb-copy { position: absolute; top: 8px; right: 8px; z-index: 1; cursor: pointer; padding: 4px 10px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--surface-solid); color: var(--muted); font: 500 11px "Inter", sans-serif; opacity: 0; transition: opacity 0.15s ease, color 0.15s ease; } .cb:hover .cb-copy, .cb-copy:focus-visible { opacity: 1; } .cb-copy:hover { color: var(--text); } .cb-copy.ok { color: var(--ok); border-color: rgba(74, 222, 128, 0.5); opacity: 1; } @media (hover: none) { .cb-copy { opacity: 1; } } .hidden { display: none !important; } .qs-tabs { display: flex; gap: 4px; padding: 4px; width: fit-content; border: 1px solid var(--line); border-radius: 10px; background: var(--fill-1); } .qs-tab { padding: 6px 14px; border: 0; border-radius: 7px; cursor: pointer; text-transform: capitalize; background: transparent; color: var(--muted); font: 500 12.5px "Inter", sans-serif; } .qs-tab:hover { color: var(--text); } .qs-tab.on { background: var(--fill-3); color: var(--text); } /* Access legend + badges */ .doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 12px; } .doc-note { padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--fill-1); } .doc-note p { margin: 9px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); } .acc { display: inline-block; flex: none; white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid; } .acc-public { color: var(--muted); border-color: var(--line-strong); background: var(--fill-1); } .acc-session { color: var(--warn); border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.1); } .acc-key { color: var(--ok); border-color: rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.1); } .acc-employee { color: var(--accent); border-color: rgba(124, 140, 248, 0.45); background: rgba(124, 140, 248, 0.12); } /* Reference toolbar */ .ref-bar { position: sticky; top: -1px; z-index: 5; margin: 26px 0 14px; padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: rgba(var(--bg-rgb), 0.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); scroll-margin-top: 0; } .ref-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; } .ref-tools { display: flex; gap: 10px; align-items: center; flex: 1 1 260px; justify-content: flex-end; } .ref-search { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; max-width: 340px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--fill-1); color: var(--muted); } .ref-search:focus-within { border-color: var(--accent); } .ref-search input { flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 400 13px "Inter", sans-serif; } .ref-search input::placeholder { color: var(--placeholder); } .ref-exp { flex: none; padding: 8px 13px; font-size: 12.5px; cursor: pointer; } /* Sections and endpoints */ .rsec { margin-bottom: 30px; scroll-margin-top: 78px; } .rsec-head { display: flex; align-items: center; gap: 10px; } .rsec-head h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; } .rsec-n { font-family: var(--mono); font-size: 11px; color: var(--muted); padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; } .rsec-intro { margin: 6px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 70ch; } .ep-list { border: 1px solid var(--line); border-radius: 14px; background: var(--surface-solid); overflow: hidden; } .ep { border-top: 1px solid var(--line); } .ep:first-child { border-top: 0; } .ep[hidden] { display: none; } .ep > summary { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; list-style: none; transition: background 0.12s ease; } .ep > summary::-webkit-details-marker { display: none; } .ep > summary:hover { background: var(--fill-1); } .ep > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .ep[open] > summary { background: var(--fill-1); } .doc-m { flex: none; min-width: 58px; text-align: center; padding: 4px 0; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; border-radius: 7px; border: 1px solid; } .doc-m-get { color: var(--ok); border-color: rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.09); } .doc-m-post { color: var(--accent); border-color: rgba(124, 140, 248, 0.45); background: rgba(124, 140, 248, 0.11); } .doc-m-delete { color: var(--err); border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.09); } .doc-path { flex: none; font-family: var(--mono); font-size: 13px; font-weight: 500; } .ep-d { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12.5px; } .chev { flex: none; width: 8px; height: 8px; margin: 0 4px 0 2px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.18s ease; } .ep[open] .chev { transform: rotate(225deg) translate(-2px, -2px); } .ep-body { padding: 4px 18px 20px 86px; } .ep-body > p { margin: 8px 0 4px; font-size: 13px; line-height: 1.6; } .ep-body h4 { margin: 18px 0 0; font-family: var(--mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .tbl-wrap { overflow-x: auto; margin-top: 8px; } .doc-params { margin: 0; } .doc-params td:nth-child(2) { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; } .doc-params td:last-child { line-height: 1.5; } .doc-params tr:last-child td { border-bottom: 0; } /* Try it */ .doc-try-note { margin: 6px 0 0 !important; font-size: 12px !important; color: var(--muted); } .try { display: flex; align-items: stretch; margin-top: 8px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--fill-1); overflow: hidden; } .try:focus-within { border-color: var(--accent); } .try-path { display: flex; align-items: center; padding: 0 0 0 12px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; } .try-q { flex: 1; min-width: 0; padding: 10px 8px; border: 0; outline: 0; background: transparent; color: var(--text); font: 500 12.5px var(--mono); } .try-go { flex: none; border-radius: 0; border-width: 0 0 0 1px; padding: 0 18px; cursor: pointer; } .try-go:disabled { opacity: 0.6; cursor: default; } .try-out { margin-top: 8px; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; } .try-out[hidden] { display: none; } .try-meta { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--fill-1); font-family: var(--mono); font-size: 11.5px; color: var(--muted); } .st { font-weight: 700; } .st-ok { color: var(--ok); } .st-err { color: var(--err); } .try-out pre { margin: 0; padding: 12px 14px; max-height: 320px; overflow: auto; font-family: var(--mono); font-size: 12px; line-height: 1.6; } /* On this page */ .docs-toc { position: sticky; top: 0; padding-top: 6px; } .toc-h { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 10px; } .docs-toc nav { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); } .docs-toc a { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-left: -1px; padding: 6px 12px; border-left: 2px solid transparent; color: var(--muted); font-size: 12.5px; font-weight: 500; text-decoration: none; } .docs-toc a b { font-family: var(--mono); font-size: 10.5px; font-weight: 400; opacity: 0.7; } .docs-toc a:hover { color: var(--text); } .docs-toc a.on { color: var(--accent); border-left-color: var(--accent); } @media (max-width: 1100px) { .docs-wrap { grid-template-columns: minmax(0, 1fr); } .docs-toc { display: none; } } @media (max-width: 760px) { .ep > summary { flex-wrap: wrap; gap: 8px 10px; } .ep-d { order: 5; flex-basis: 100%; white-space: normal; } .ep-body { padding: 4px 14px 18px; } .doc-hero { padding: 22px 18px; } .doc-hero h2 { font-size: 22px; } .try { flex-wrap: wrap; } .try-path { padding: 8px 12px 0; width: 100%; } .try-go { padding: 9px 18px; border-width: 1px 0 0 0; width: 100%; } } .doc-params td.pair:first-child { width: 150px; white-space: nowrap; } .qs-tab { text-transform: none; } /* ══ Assistant · floating chat, consumer only ═════════════════════════════ */ .chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 52px; height: 52px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(124, 140, 248, 0.45); border-radius: 50%; background: var(--accent); color: #0a0a0b; cursor: pointer; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); transition: transform 0.15s ease, box-shadow 0.15s ease; } .chat-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.6); } /* display:grid above beats the UA [hidden] rule, so restate it — otherwise the button flashes for employees in the gap before boot() sets body[data-role]. */ .chat-fab[hidden] { display: none; } .chat-fab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; } .chat-fab[aria-expanded="true"] svg { opacity: 0.55; } .chat-panel { position: fixed; right: 22px; bottom: 86px; z-index: 60; width: min(380px, calc(100vw - 44px)); /* Caps the log's height so the composer stays put as the thread grows. */ max-height: min(560px, calc(100dvh - 130px)); display: flex; flex-direction: column; overflow: hidden; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.62); } .chat-panel[hidden] { display: none; } .chat-head { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--line); } .chat-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.16); } .chat-head-txt { min-width: 0; flex: 1; } .chat-head-txt b { display: block; font-size: 13.5px; font-weight: 600; } .chat-head-txt small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; } .chat-x { flex: none; width: 26px; height: 26px; padding: 0; font-size: 18px; line-height: 1; cursor: pointer; background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); } .chat-x:hover { color: var(--text); border-color: var(--line-strong); } .chat-log { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .chat-log::-webkit-scrollbar { width: 8px; } .chat-log::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; } .chat-msg { max-width: 86%; padding: 9px 12px; border-radius: 13px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } .chat-msg.me { align-self: flex-end; background: rgba(124, 140, 248, 0.17); border: 1px solid rgba(124, 140, 248, 0.3); border-bottom-right-radius: 5px; } .chat-msg.bot { align-self: flex-start; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-bottom-left-radius: 5px; } .chat-msg.err { align-self: flex-start; background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.32); color: var(--err); } .chat-msg.wait { color: var(--muted); font-style: italic; } .chat-tips { display: flex; flex-wrap: wrap; gap: 6px; } .chat-tip { padding: 6px 10px; font: inherit; font-size: 12px; cursor: pointer; background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); } .chat-tip:hover { color: var(--text); border-color: rgba(124, 140, 248, 0.45); } .chat-form { display: flex; gap: 8px; padding: 11px 12px; border-top: 1px solid var(--line); } .chat-form input { flex: 1; min-width: 0; padding: 10px 12px; font: inherit; font-size: 13px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 10px; color: var(--text); } .chat-form input:focus { outline: none; border-color: rgba(124, 140, 248, 0.5); } .chat-form button { flex: none; padding: 0 14px; cursor: pointer; } .chat-form button:disabled { opacity: 0.5; cursor: default; } @media (max-width: 560px) { .chat-fab { right: 14px; bottom: 14px; } .chat-panel { right: 12px; left: 12px; bottom: 76px; width: auto; } } /* ── Live-map fare panel ────────────────────────────────────── */ /* Lives inside the aircraft detail panel, which is ~380px wide, so the itinerary rows and calendar cells are tighter than their dashboard cousins while reusing the same .cal-* tinting. */ .dfare { padding: 12px 14px 4px; border-top: 1px solid var(--line); } .dfare[hidden] { display: none; } .dfare-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; } .dfare-pair { font-size: 14px; font-variant-numeric: tabular-nums; } .dfare-pair b { font-weight: 600; } .dfare-q { color: var(--muted); } .dfare-cap { font-size: 11.5px; color: var(--muted); } .dfare-note { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin: 6px 0 10px; } .dfare-sub { font-size: 12px; font-weight: 600; margin: 16px 0 2px; } .dfare-lead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; } .dfare-lead-p { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; } .dfare-lead-c { font-size: 11.5px; color: var(--muted); } .dfare-list { display: flex; flex-direction: column; gap: 5px; } .dfare-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; font: inherit; text-align: left; cursor: pointer; background: rgba(255, 255, 255, 0.03); color: var(--text); border: 1px solid var(--line); border-radius: 9px; transition: border-color 0.12s ease, background 0.12s ease; } .dfare-row:hover { border-color: var(--line-strong); } .dfare-row.on { border-color: var(--accent); background: rgba(124, 140, 248, 0.14); } .dfare-air { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dfare-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dfare-name small { font-family: var(--mono); font-size: 10px; color: var(--muted); } .dfare-meta { font-size: 10.5px; color: var(--muted); } .dfare-amt { display: flex; flex-direction: column; align-items: flex-end; flex: none; } .dfare-price { font-size: 13px; font-variant-numeric: tabular-nums; } .dfare-delta { font-size: 10px; color: var(--muted); } .dfare-book { display: block; margin: 10px 0 2px; padding: 9px 12px; text-align: center; font-size: 12.5px; font-weight: 500; text-decoration: none; background: var(--accent); color: #0a0a0b; border-radius: 9px; } .dfare-book:hover { filter: brightness(1.06); } .dfare-pick { display: flex; gap: 6px; } .dfare-pick select { flex: 1; min-width: 0; padding: 8px 9px; font: inherit; font-size: 12.5px; background: rgba(255, 255, 255, 0.04); color: var(--text); border: 1px solid var(--line); border-radius: 9px; } .dfare-go { flex: none; padding: 8px 12px; font: inherit; font-size: 12.5px; cursor: pointer; background: var(--accent); color: #0a0a0b; border: none; border-radius: 9px; } .dfare-go:hover { filter: brightness(1.06); } /* Seven columns inside a ~380px panel: tighten everything and drop the rupee symbol, which costs a character the cell cannot spare at this width. */ .dfare .pcal { gap: 16px; } .dfare .pcal-dow, .dfare .pcal-days { gap: 3px; } .dfare .pcal-cell { padding: 5px 2px; min-height: 38px; border-radius: 6px; } .dfare .pcal-n { font-size: 9.5px; } /* No ellipsis here: a half-shown fare is not a fare. If it ever cannot fit, it should shrink, not truncate. */ .dfare .pcal-p { font-size: 10px; letter-spacing: -0.2px; text-overflow: clip; } .dfare .pcal-mh { font-size: 11.5px; margin-bottom: 6px; } .dfare .pcal-key { font-size: 10px; gap: 10px; margin-top: 12px; } /* ── Activity / audit trail (admin only) ────────────────────── */ .au-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .au-stat { flex: 1 1 130px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; } .au-stat-n { display: block; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; } .au-stat-bad { color: var(--err); } .au-stat-k { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; } .au-stat-wide { flex: 1 1 100%; display: flex; align-items: center; } .au-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .au-filters input, .au-filters select { padding: 9px 11px; font: inherit; font-size: 13px; min-width: 0; background: rgba(255, 255, 255, 0.04); color: var(--text); border: 1px solid var(--line); border-radius: 10px; } .au-filters input { flex: 2 1 240px; } .au-filters select { flex: 1 1 170px; } .au-filters input:focus, .au-filters select:focus { outline: none; border-color: var(--accent); } .au-chips { display: flex; flex-wrap: wrap; gap: 6px; } .au-chip { padding: 5px 10px; font: inherit; font-size: 11.5px; cursor: pointer; background: none; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; } .au-chip:hover { color: var(--text); border-color: var(--accent); } .au-chip span { font-family: var(--mono); font-size: 10px; opacity: 0.7; margin-left: 3px; } /* The trail is wide by nature; it scrolls inside its card rather than pushing the page sideways. */ .au-wrap { overflow-x: auto; margin: 0 -4px; } .au-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .au-table th, .au-table td { padding: 9px 10px; text-align: left; vertical-align: top; } .au-table thead th { font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--line-strong); white-space: nowrap; } .au-table tbody tr { border-bottom: 1px solid var(--line); } .au-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); } .au-bad { background: rgba(248, 113, 113, 0.06); } .au-bad:hover { background: rgba(248, 113, 113, 0.1); } .au-when { white-space: nowrap; font-variant-numeric: tabular-nums; } .au-abs { display: block; font-family: var(--mono); font-size: 11.5px; } .au-rel { display: block; font-size: 10px; color: var(--muted); } .au-who b { font-weight: 500; } .au-anon { color: var(--muted); font-style: italic; } .au-role { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .au-act { display: inline-block; padding: 2px 7px; border-radius: 6px; font-family: var(--mono); font-size: 10.5px; white-space: nowrap; border: 1px solid var(--line); } .au-auth { color: var(--accent); background: rgba(124, 140, 248, 0.12); border-color: rgba(124, 140, 248, 0.3); } .au-key { color: var(--warn); background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.28); } .au-ops { color: var(--err); background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.26); } .au-user { color: var(--ok); background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.26); } .au-other { color: var(--muted); } .au-status { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-left: 6px; } .au-detail { color: var(--muted); font-size: 11.5px; max-width: 420px; overflow-wrap: anywhere; } .au-dash { opacity: 0.4; } .au-ip { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; } .au-empty { padding: 26px 10px; text-align: center; color: var(--muted); } .au-more { margin-top: 14px; } /* An admin may hold a consumer account, and the consumer rules hide the sidebar the whole page is built around. This page always keeps its shell. */ .audit-page .side { display: flex !important; } .audit-page .shell { grid-template-columns: var(--side-w, 232px) 1fr !important; } @media (max-width: 900px) { .audit-page .shell { grid-template-columns: 1fr !important; } .audit-page .side { display: none !important; } .audit-page.nav-open .side { display: flex !important; } } /* ── Session-replay placeholder ─────────────────────────────── */ /* Session replay serializes the DOM; it does not record WebGL pixels. A Mapbox canvas therefore replays empty, which on a dark theme reads as an unexplained black rectangle. This note sits behind the canvas — invisible while the map is painted, and the thing a viewer sees instead of that black box when it is not. Deliberately not `ph-no-capture`: blocking would replace the canvas with an opaque placeholder and hide this too. */ .replay-note { position: absolute; inset: 0; z-index: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; pointer-events: none; font-size: 12.5px; line-height: 1.5; color: var(--muted); } .replay-note::before { content: "◎"; font-size: 22px; opacity: 0.45; } /* On the live map the note spans the whole viewport, and the control/detail panel is pinned over its left edge — which is just as true in a replay, since that panel is real DOM. Clear the widest of those panels (440px + its 20px gutter) so the text lands in open space rather than half behind it. */ @media (min-width: 521px) { #map .replay-note { padding-left: 480px; } }