/* GPS test (views/partials/components/GPSTest.ejs). The component is a size container:
   text scales with the tile's width, and less important details drop out of short tiles. */
.gps-test-component {
    --gps-accent: #2f80c9;
    --gps-text: #1a202c;
    --gps-muted: #4a5568;
    container: gps / size;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background: var(--container-bg, #f8f9fa);
    border: 1px solid var(--container-border, #dee2e6);
    border-radius: 8px;
    overflow: hidden;
}

.gps-body {
    height: 100%;
    box-sizing: border-box;
    padding: clamp(8px, 3cqw, 18px);
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 2cqh, 14px);
    font-size: clamp(12px, 4cqw, 16px);
    line-height: 1.35;
    color: var(--gps-text);
}

/* One state at a time: an element lists the states it shows in. */
.gps-test-component[data-state="idle"] [data-show]:not([data-show~="idle"]),
.gps-test-component[data-state="live"] [data-show]:not([data-show~="live"]) {
    display: none;
}

.gps-title {
    margin: 0;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.2;
    color: #2c3e50;
    text-align: center;
    padding: 0 26px; /* room for the help badge on the home page */
}

.gps-intro {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.gps-intro p {
    margin: 0 0 0.6em;
}

.gps-note {
    color: var(--gps-muted);
    font-size: 0.88em;
}

.gps-live {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

/* Compass and heading readout side by side. */
.gps-compass-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9em;
}

.gps-compass {
    position: relative;
    flex: 0 0 auto;
    width: clamp(64px, min(30cqw, 26cqh), 200px);
    aspect-ratio: 1;
}

.gps-rose {
    width: 100%;
    height: 100%;
    transition: transform 0.25s ease-out;
}

.gps-rose-ring {
    fill: #ffffff;
    stroke: #c3ccd6;
    stroke-width: 1.5;
}

.gps-rose-ticks line {
    stroke: #8a97a6;
    stroke-width: 1.2;
}

.gps-rose-n,
.gps-rose-letter {
    font: 700 10px Arial, sans-serif;
    text-anchor: middle;
    fill: var(--gps-muted);
}

.gps-rose-n {
    fill: #d64545;
    font-size: 12px;
}

.gps-needle-north { fill: #d64545; }
.gps-needle-south { fill: #8a97a6; }
.gps-rose-hub { fill: var(--gps-text); }

/* Fixed marker at the top: the direction the device is facing. */
.gps-pointer {
    position: absolute;
    top: -4px;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top: 9px solid var(--gps-accent);
    border-bottom: 0;
}

/* Waiting for the first reading: a slow spin. No compass: dimmed and still. */
.gps-compass-searching .gps-rose {
    animation: gps-spin 3s linear infinite;
}

.gps-compass-none .gps-rose {
    opacity: 0.45;
}

@keyframes gps-spin {
    to { transform: rotate(360deg); }
}

.gps-heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gps-heading strong {
    font-size: clamp(22px, 9cqw, 44px);
    font-weight: 800;
    line-height: 1.05;
    color: var(--gps-accent);
    font-variant-numeric: tabular-nums;
}

.gps-heading span {
    color: var(--gps-muted);
    font-size: 0.85em;
}

.gps-coords {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;
}

.gps-coord {
    display: flex;
    flex-direction: column;
    padding: 0.45em 0.6em;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    min-width: 0;
}

.gps-coord span {
    color: var(--gps-muted);
    font-size: 0.82em;
}

.gps-coord strong {
    font-size: 1.15em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.gps-coord small {
    color: var(--gps-muted);
    font-size: 0.78em;
}

.gps-details {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35em 0.8em;
}

.gps-details div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gps-details dt {
    color: var(--gps-muted);
    font-size: 0.8em;
}

.gps-details dd {
    margin: 0;
    font-weight: 700;
    font-size: 0.92em;
    overflow-wrap: anywhere;
}

.gps-message {
    margin: 0;
    padding: 0.5em 0.7em;
    border-radius: 6px;
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.9em;
    text-align: center;
}

.gps-actions {
    display: flex;
    flex-wrap: wrap; /* one row down to the smallest tiles; wraps only if text is enlarged */
    justify-content: center;
    gap: 0.5em;
}

.gps-btn {
    min-height: 36px;
    padding: 0.4em 0.9em;
    border: 1px solid #c3ccd6;
    border-radius: 6px;
    background: #ffffff;
    color: var(--gps-text);
    font: inherit;
    font-size: 0.9em;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.gps-btn[hidden] {
    display: none;
}

.gps-btn-primary {
    background: var(--gps-accent);
    border-color: var(--gps-accent);
    color: #ffffff;
}

.gps-test-component[data-state="idle"] .gps-btn-primary {
    min-width: 60%;
    justify-content: center;
    font-size: 1em;
}

/* When the live view doesn't fit, the script hides the least important items one level
   at a time (data-fit) instead of letting the tile scroll. Accuracy and source always stay. */
.gps-test-component[data-fit="1"] .gps-coord small,
.gps-test-component[data-fit="2"] .gps-coord small,
.gps-test-component[data-fit="3"] .gps-coord small,
.gps-test-component[data-fit="2"] .gps-details div:nth-child(n + 5),
.gps-test-component[data-fit="3"] .gps-details div:nth-child(n + 3) {
    display: none;
}

@container gps (max-height: 320px) {
    .gps-note {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gps-rose { transition: none; }
    .gps-compass-searching .gps-rose { animation: none; }
}