:root {
    color-scheme: light dark;
    --line: rgba(128, 128, 128, 0.35);
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.5;
}

header {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--line);
}

header h1 {
    margin: 0;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
}

nav {
    display: flex;
    gap: 1rem;
}

nav a {
    color: inherit;
    text-decoration: none;
    opacity: 0.75;
}

nav a:hover {
    opacity: 1;
    text-decoration: underline;
}

main {
    padding: 1.25rem 1.5rem 3rem;
}

/* ---- track controls ---- */

.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: end;
    margin-bottom: 0.75rem;
}

.controls label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    opacity: 0.85;
}

.controls select,
.controls input {
    font: inherit;
    font-size: 0.9rem;
    padding: 0.3rem 0.4rem;
    max-width: 22rem;
}

.controls input[type="number"] {
    width: 6rem;
}

/* Checkboxes read as a row, not a stacked label-over-control like the dropdowns. */
.controls label.check {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    opacity: 1;
    padding-bottom: 0.35rem;
    cursor: pointer;
}

.controls label.check input {
    width: auto;
    margin: 0;
}

.controls button {
    font: inherit;
    font-size: 0.9rem;
    padding: 0.35rem 1.1rem;
    cursor: pointer;
}

.status {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    opacity: 0.8;
}

.warning {
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--line);
    border-left-width: 4px;
    font-size: 0.9rem;
}

/* ---- map ---- */

.map {
    width: 100%;
    max-width: 1100px;
    height: 520px;
    border: 1px solid var(--line);
}

/* ---- segment popup (inside a Google InfoWindow) ----
   The InfoWindow renders on Google's own white background in both themes, so these
   deliberately use fixed dark text rather than currentColor. */

.seg-popup {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #202124;
    min-width: 15rem;
}

.seg-popup strong {
    display: block;
    margin-bottom: 0.35rem;
}

.seg-popup dl {
    margin: 0 0 0.35rem;
}

.seg-popup dt {
    font-weight: 600;
    opacity: 0.65;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.seg-popup dd {
    margin: 0 0 0 0.5rem;
    font-variant-numeric: tabular-nums;
}

.seg-foot {
    padding-top: 0.3rem;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    font-variant-numeric: tabular-nums;
}

/* ---- charts ---- */

.charts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1.25rem;
    max-width: 1100px;
}

.charts figure {
    margin: 0;
    flex: 1 1 460px;
    min-width: 0;
}

.charts figcaption {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-bottom: 0.25rem;
}

.chart {
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
}

/* Grid and axes are drawn in currentColor so they stay legible in both light and dark
   themes. Opacities chosen so the axes clearly read as the frame and the grid sits
   behind the data without disappearing. */
.chart-grid {
    stroke: currentColor;
    stroke-opacity: 0.35;
    stroke-width: 1;
}

/* Day boundaries. Deliberately between the light grid and the axis frame in weight -
   clearly readable as "a new day starts here" without competing with the plot border. */
.chart-day {
    stroke: currentColor;
    stroke-opacity: 0.75;
    stroke-width: 1.5;
}

.chart-axis {
    stroke: currentColor;
    stroke-opacity: 0.9;
    stroke-width: 2;
}

.chart-label {
    fill: currentColor;
    fill-opacity: 0.95;
    /* In SVG user units against the 900-wide viewBox, so this scales with the chart. */
    font-size: 15px;
    font-family: system-ui, sans-serif;
}

/* ---- collapsible data panel ---- */

.data-panel {
    margin-top: 1.5rem;
    max-width: 1100px;
    border-top: 1px solid var(--line);
}

.data-panel > summary {
    cursor: pointer;
    padding: 0.6rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    user-select: none;
}

.data-panel > summary:hover {
    text-decoration: underline;
}

/* A long trip can return thousands of rows, so the table scrolls inside the panel
   rather than pushing the map and graphs off the top of the window. */
.data-panel[open] {
    padding-bottom: 0.5rem;
}

.data-panel .points {
    display: block;
    max-height: 26rem;
    overflow: auto;
}

/* ---- login ---- */

.login {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-width: 20rem;
    margin-top: 1rem;
}

.login h2 {
    margin: 0;
    font-size: 1.05rem;
}

.login label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    opacity: 0.85;
}

.login input {
    font: inherit;
    padding: 0.4rem 0.5rem;
}

.login button {
    font: inherit;
    padding: 0.45rem;
    cursor: pointer;
}

.error {
    margin: 0;
    padding: 0.5rem 0.7rem;
    border-left: 4px solid #b00020;
    background: rgba(176, 0, 32, 0.08);
    font-size: 0.9rem;
}

.signout {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.muted {
    opacity: 0.6;
}

.small {
    font-size: 0.8rem;
}

.mono {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.8rem;
}

h2.section {
    margin: 1.75rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--line);
}

h2.section:first-of-type {
    margin-top: 1rem;
}

/* ---- inline row actions ---- */

button.link {
    font: inherit;
    font-size: 0.8rem;
    background: none;
    border: none;
    padding: 0 0.4rem 0 0;
    color: inherit;
    opacity: 0.75;
    text-decoration: underline;
    cursor: pointer;
}

button.link:hover {
    opacity: 1;
}

button.link.delete:hover {
    color: #b00020;
}

.trips .cell-actions {
    white-space: nowrap;
}

.trips input[type="text"] {
    width: 14rem;
}

.trips input[type="number"] {
    width: 4.5rem;
}

.trips input {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.15rem 0.3rem;
}

/* ---- point table ---- */

.points {
    margin-top: 1.25rem;
    border-collapse: collapse;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    width: 100%;
    max-width: 1100px;
}

.points th,
.points td {
    text-align: left;
    padding: 0.25rem 0.6rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.points th {
    position: sticky;
    top: 0;
    background: Canvas;
}

/* ---- narrow screens ---- */

/* The trip list is seven nowrap columns, which is wider than a phone. Left alone it
   widens the whole page, so the browser zooms out to fit and the map - which sizes to
   the viewport, not to the page's scroll width - ends up a fraction of the screen.
   Scrolling the table inside its own box keeps the page at viewport width, so the map
   gets the full screen. Scoped to narrow screens: on desktop the table fits, and the
   wrapper stays a plain block so the sticky header keeps working against the page. */
@media (max-width: 768px) {
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Side padding costs ~12% of a phone's width; the map is the point of the page. */
    main {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    header {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}