/* gpx2kml / kml2gpx public site. Design: "GPX2KML Redesign" (Claude Design) */

/* colors follow the visitor's system setting: light by default, dark with prefers-color-scheme */
:root {
    color-scheme: light dark;

    /* page (around the cards) */
    --page: #E7EFF3;
    --on-page: #12303D;
    --on-page-muted: #4A6270;
    --on-page-number: #0B6F8C;
    --page-line: #C3D3DA;
    --ad-line: #9FB6C2;
    --panel: #D5E6EC;
    --panel-text: #12303D;
    --panel-accent: #0B6F8C;

    /* the card: white at the top left, a pale teal towards the bottom right */
    --card: #FFFFFF;
    --card-bg: linear-gradient(135deg, #FFFFFF 0%, #F1F8FB 45%, #DDEFF5 100%);
    --card-shadow: 0 1px 2px rgba(18, 48, 61, .06), 0 10px 28px rgba(18, 48, 61, .10);
    /* boxes inside the card stay light on the tinted background */
    --inset: rgba(255, 255, 255, .72);
    --inset-line: rgba(159, 182, 194, .45);
    --ink: #12303D;
    --muted: #4A6270;
    --muted-light: #9FB6C2;
    --border: #9FB6C2;
    --line: #D3E0E6;
    --soft: #F2F7F9;
    --control: #FFFFFF;
    --row-hover: #E6F3F8;
    --link: #0B6F8C;
    --focus: #0B6F8C;
    --chart-box: #FFFFFF;

    --accent: #0B6F8C;
    --ok-bg: #DDF5E6;
    --ok-ink: #0B5B2E;
    --err-bg: #FDE7E4;
    --err-ink: #8E1F12;

    --font: 'Manrope', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --page: #0E1E27;
        --on-page: #FFFFFF;
        --on-page-muted: #9FB6C2;
        --on-page-number: #7FD0E6;
        --page-line: #2F4B5A;
        --ad-line: #3C5666;
        --panel: #15303D;
        --panel-text: #D5E4EB;
        --panel-accent: #7FD0E6;

        --card: #163240;
        --card-bg: linear-gradient(135deg, #1B3846 0%, #163240 45%, #0F3A4A 100%);
        --card-shadow: none;
        --inset: rgba(255, 255, 255, .04);
        --inset-line: rgba(159, 182, 194, .22);
        --ink: #E8F1F5;
        --muted: #A9C1CC;
        --muted-light: #6E8C9A;
        --border: #4F6D7B;
        --line: #2B4856;
        --soft: #1C3B49;
        --control: #10252F;
        --row-hover: #1F4253;
        --link: #7FD0E6;
        --focus: #7FD0E6;
        /* the chart's own colors are switched to dark ones in site.js (themeChart) */
        --chart-box: #10252F;

        /* brighter than the card, so success/error stand out (text contrast ~6:1 and ~9:1) */
        --ok-bg: #1E7048;
        --ok-ink: #EAFFF2;
        --err-bg: #7A2A22;
        --err-ink: #FFE3DE;
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--on-page); font: 400 16px/1.5 var(--font); }
a:hover { filter: brightness(1.08); }
svg { flex: 0 0 auto; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 28px 24px 56px; display: flex; flex-direction: column; gap: 22px; }

/* header */
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: 8px 0 4px; }
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo-mark { width: 48px; height: 48px; border-radius: 12px; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.logo-text { display: flex; flex-direction: column; }
.logo-name { font: 800 34px/1 var(--font); color: var(--on-page); letter-spacing: -.01em; }
.logo-name span { color: var(--on-page-number); }
.logo-tag { font-size: 14px; color: var(--on-page-muted); padding-top: 5px; }
.totals { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-end; margin: 0; }
.totals div { display: flex; flex-direction: column; gap: 2px; }
.totals dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-page-muted); }
.totals dd { margin: 0; font: 500 15px var(--mono); color: var(--on-page); padding-top: 7px; }
.totals .total-main { padding-right: 20px; margin-right: 4px; border-right: 1px solid var(--page-line); }
.totals .total-main dd { font-size: 24px; color: var(--on-page-number); padding-top: 0; }

/* below 1024px the totals go under the logo: center both */
@media (max-width: 1023px) {
    .site-header { flex-direction: column; justify-content: center; }
    .totals { justify-content: center; align-items: flex-start; }
    .totals div { align-items: center; text-align: center; }
}

/* ads: desktop units from 1024px, the top one down to tablets, only the small unit on phones */
/* an ad box is as wide as its column (top) or its unit (side), the unit is centered in it */
.ad { display: flex; align-items: center; justify-content: center; overflow: hidden; width: 100%; min-height: var(--ad-height); }
.ad-side { flex: 0 0 var(--ad-width); width: var(--ad-width); align-self: flex-start; }
.ad-mobile { display: none; }
@media (max-width: 1023px) {
    .ad-side { display: none; }
}
/* the 728px unit needs a 728px column (776px viewport with the page padding) */
@media (max-width: 799px) {
    .ad-top { display: none; }
    .ad-mobile { display: flex; }
}

/* layout */
.columns { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* the white card */
.card { background: var(--card); background-image: var(--card-bg); box-shadow: var(--card-shadow); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 26px; color: var(--ink); }
.card h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.card h2 { margin: 0; font: 700 17px var(--font); }
.card p { margin: 0; }
.card a { color: var(--link); }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 14px; }
.steps li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 700; font-size: 15px; }
.steps .step-line { flex: 1 1 24px; height: 2px; background: var(--line); min-width: 16px; }
.step-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--control); border: 1.5px solid var(--muted-light); color: var(--muted); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.steps .is-current { color: var(--ink); }
.is-current .step-dot { background: var(--accent); border-color: var(--accent); color: #FFFFFF; font-weight: 800; }
.is-done .step-dot { background: var(--ok-bg); border-color: var(--ok-bg); color: var(--ok-ink); }

/* forms */
.form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.field-label { font-weight: 700; font-size: 15px; flex: 0 0 150px; }
.select { height: 48px; min-width: 240px; max-width: 100%; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--control); font: 600 15px var(--font); color: var(--ink); }
.dropzone { flex: 1 1 300px; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 16px; border: 2px dashed var(--border); border-radius: 12px; background: var(--soft); color: var(--muted); }
.dropzone input { flex: 1; min-width: 0; font: 500 14px var(--font); color: var(--muted); }
.checks { display: flex; flex-wrap: wrap; gap: 0 24px; }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 15px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.check[hidden] { display: none; }
.text-input { height: 48px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--control); font: 500 16px var(--font); color: var(--ink); width: 100%; min-width: 0; }
.text-input:focus, .select:focus, textarea:focus, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
textarea.text-input { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.form-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-top: 4px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 20px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--control); color: var(--ink); font: 700 15px var(--font); text-decoration: none; cursor: pointer; }
.card a.btn { color: var(--ink); }
.btn-primary, .card a.btn-primary { border-color: var(--accent); background: var(--accent); color: #FFFFFF; font-size: 16px; padding: 0 24px; }
.btn-small { height: 40px; padding: 0 14px; border-radius: 8px; font-size: 14px; }
.btn-wide { min-width: 180px; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; }
/* track page: five buttons on one row in the desktop column */
.buttons-compact { gap: 10px; }
.buttons-compact .btn { padding: 0 14px; gap: 8px; }
.buttons-compact .btn-primary { font-size: 15px; }
.short-label { display: none; }
/* "View on the map" becomes "Map" below 800px */
@media (max-width: 799px) {
    .long-label { display: none; }
    .short-label { display: inline; }
}

.share { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.share-label { font-size: 14px; color: var(--muted); font-weight: 600; }
.share a { height: 44px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--border); color: var(--ink); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; text-decoration: none; }

/* notes and messages */
.note { display: flex; gap: 14px; align-items: flex-start; background: var(--soft); border-radius: 12px; padding: 16px 18px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.note-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; background: var(--soft); border-radius: 12px; padding: 18px 20px; }
.note-row[hidden] { display: none; }
.note-row p { flex: 1 1 320px; font-size: 15px; line-height: 1.55; }
.small-print { font-size: 13px; font-style: italic; color: var(--muted); line-height: 1.55; }
.message { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 16px 18px; font-weight: 700; font-size: 17px; }
.message-success { background: var(--ok-bg); color: var(--ok-ink); }
.message-error { background: var(--err-bg); color: var(--err-ink); font-size: 15px; }
.message-info { background: var(--soft); color: var(--ink); font-size: 15px; }
.message a { color: inherit; }

/* conversion stats: the chart (flotr2) and the cards built by site.js from the stats file */
#show_stats { display: flex; flex-direction: column; gap: 12px; }
#show_stats[hidden] { display: none; }
.stats-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.stats-head span { font-size: 13px; color: var(--muted); font-weight: 600; }
/* flotr sizes its canvas from the element's outer size, so the "padding" is drawn around it:
   a 16px ring of the box color and a 1px border line, with margins to make room */
.flotrDiv { width: calc(100% - 34px); height: 280px; margin: 17px 17px 29px; border-radius: 4px; background: var(--soft);
    box-shadow: 0 0 0 16px var(--soft), 0 0 0 17px var(--line); }
.stat-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.stat-card { background: var(--soft); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.stat-card dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.stat-card dd { margin: 0; font: 500 24px var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.stat-card dd + dd { font: 400 13px var(--font); color: var(--muted); }

/* keep form */
.keep-form { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; background: var(--soft); border-radius: 12px; padding: 20px; }
.keep-form[hidden] { display: none; }
.keep-form .field-stack { flex: 1 1 300px; }
.field-stack { display: flex; flex-direction: column; gap: 8px; }
.field-stack label { font-weight: 700; font-size: 15px; }
.input-icon { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 10px; border: 2px solid var(--accent); background: var(--control); color: var(--muted); }
.input-icon input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 16px var(--font); color: var(--ink); }

/* track list */
.track-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.track-list li { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 4px 16px; border-bottom: 1px solid var(--line); }
.track-list li:last-child { border-bottom: 0; }
.track-list li { transition: background-color .15s; }
.track-list li:hover, .track-list li:focus-within { background: var(--row-hover); }
.track-date { flex: 0 0 116px; font: 500 14px var(--mono); color: var(--muted); }
.track-list a { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 700; font-size: 15px; }
.copy-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.copy-row .text-input { flex: 1 1 320px; width: auto; background: var(--soft); font: 500 15px var(--mono); }

/* comments */
.comments { display: flex; flex-direction: column; gap: 12px; }
.comment { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.comment-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.comment-name { font-weight: 700; }
.comment-date { font: 500 13px var(--mono); color: var(--muted); display: flex; align-items: center; gap: 8px; }
.comment p { line-height: 1.55; overflow-wrap: anywhere; }
.comment-hidden { color: var(--muted); font-style: italic; }
.flag { background: none; border: 0; padding: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; }
.report-form { display: flex; flex-direction: column; gap: 10px; background: var(--soft); border-radius: 10px; padding: 14px; }
.report-form[hidden] { display: none; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.comment-form { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--line); padding-top: 20px; }
.comment-form[hidden] { display: none; }
.comment-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* panel below the card */
.promo { display: flex; gap: 16px; align-items: center; background: var(--panel); border-radius: 14px; padding: 18px 22px; color: var(--panel-text); font-size: 15px; line-height: 1.5; }
.promo p { margin: 0; }
.promo svg { color: var(--panel-accent); }
.promo a { color: var(--panel-accent); font-weight: 700; }
.follow { color: var(--on-page-number); font-weight: 700; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; text-decoration: none; height: 44px; }

/* boxes inside the card: light, with a thin line, so they read on the tinted background */
.card .note, .card .note-row, .card .stat-card, .card .keep-form, .card .dropzone, .card .report-form {
    background: var(--inset); box-shadow: inset 0 0 0 1px var(--inset-line);
}
.card .dropzone { box-shadow: none; }
.card .flotrDiv { background: var(--chart-box); box-shadow: 0 0 0 16px var(--chart-box), 0 0 0 17px var(--line); }

/* phones */
@media (max-width: 767px) {
    .wrap { padding: 16px 16px 40px; gap: 16px; }
    .site-header { gap: 16px; }
    .logo-name { font-size: 28px; }
    /* the totals get their own panel, so they don't read as part of the logo */
    .totals { align-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; background: var(--panel); border-radius: 14px; padding: 14px 12px 16px; }
    .totals .total-main { grid-column: 1 / -1; border-right: 0; padding: 0 0 12px; margin: 0; border-bottom: 1px solid var(--page-line); }
    .totals dt { font-size: 10px; letter-spacing: .06em; }
    .totals dd { font-size: 15px; padding-top: 2px; overflow-wrap: anywhere; }
    .card { padding: 20px; gap: 20px; border-radius: 14px; }
    .card h1 { font-size: 24px; }
    .field-label { flex-basis: 100%; }
    .select { width: 100%; min-width: 0; }
    .steps { gap: 8px; }
    .steps li { font-size: 13px; gap: 6px; }
    .buttons .btn, .form-actions .btn, .keep-form .btn, .copy-row .btn { flex: 1 1 100%; }
    .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-card dd { font-size: 20px; }
    .track-list li { flex-wrap: wrap; gap: 4px 12px; padding: 10px 14px; }
    .track-date { flex-basis: 100%; }
    .comment-fields { grid-template-columns: 1fr; }
    /* track page buttons: short labels, side by side */
    .buttons-compact { gap: 8px; }
    .buttons.buttons-compact .btn { flex: 1 1 auto; padding: 0 12px; gap: 6px; font-size: 14px; }
    .file-suffix { display: none; }
    .share { justify-content: flex-start; }
}
/* small phones: only the current step keeps its name */
@media (max-width: 419px) {
    .steps li:not(.is-current):not(.step-line) { font-size: 0; gap: 0; }
    .steps .step-dot { font-size: 14px; }
}

/* ad placeholder (local, or a unit without a slot id yet) */
.ad-placeholder { width: 100%; height: var(--ad-height); border: 1px dashed var(--ad-line); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--on-page-muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.flotrDiv[style*="height: 0"] { margin: 0; box-shadow: none; }
#show_stats .small-print { order: 1; }
.dropzone input::file-selector-button { height: 40px; margin-right: 12px; padding: 0 14px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--control); color: var(--ink); font: 700 14px var(--font); cursor: pointer; }