/*
 * The ground renderer's stylesheet (excavation #645, sub-dig 6).
 *
 * It travels with the modules in `public/js/ground/` the way `runner.css`
 * travels with the sprite renderer: the canvas is sized in CSS and drawn in
 * JavaScript, so shipping one without the other gives you a 300x150 default
 * canvas and a puzzling bug report.
 *
 * Every colour is a custom property from `layouts/world.blade.php`. Nothing in
 * here invents a green.
 *
 * Phone first. The world layout has one width breakpoint at 34rem and this
 * respects it: at 375px the map is square-ish, the profile is a fat rail a thumb
 * can land on, and nothing is sticky (a canvas you are dragging must not be
 * fighting the header for the viewport).
 */

.ground-frame {
    position: relative;
    border: 1px solid var(--rule);
    background: var(--paper);
    overflow: hidden;
}

.ground-canvas {
    display: block;
    width: 100%;
}

/*
 * touch-action is load-bearing on the two canvases a finger DRAGS: without it a
 * drag across the browse map or the crop editor scrolls the page and the canvas
 * never sees the second pointermove.
 *
 * ⚠️ And it must be scoped to exactly those, which it was not until dig #1345.
 * The rule sat on `.ground-canvas`, so it also caught the live map — which
 * binds no pointer handler at all (`live.js` has none; it moves itself on a
 * clock) and draws `cursor: default` to say so. On a phone that is a third of
 * the viewport that eats the scroll and gives nothing back for it. Tom, on his
 * own attempt: "you can't scroll the page on mobile if you touch the map area."
 * A canvas may only take the gesture if it does something with it.
 */
[data-ground-map] .ground-canvas,
[data-ground-crop] .ground-canvas {
    touch-action: none;
}

.ground-canvas--map {
    height: 15rem;
    cursor: grab;
}

.ground-canvas--map:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: -2px;
}

@media (min-width: 34rem) {
    .ground-canvas--map { height: 21rem; }
}

/* ── The crop editor ──────────────────────────────────────────────────────── */

.ground-crop .ground-profile {
    position: relative;
    margin-top: .5rem;
    border: 1px solid var(--rule);
    border-top: none;
    background: var(--paper);
    touch-action: none;
}

.ground-canvas--profile {
    height: 5.5rem;
}

@media (min-width: 34rem) {
    .ground-canvas--profile { height: 7rem; }
}

/*
 * The handle is a 44px touch target with an 11px grip drawn inside it — the
 * target is what a thumb needs and the grip is what the eye needs, and they are
 * not the same size. The button itself is transparent so the profile shows
 * through under the finger.
 */
.ground-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    margin-left: -22px;
    padding: 0;
    border: none;
    background: none;
    cursor: ew-resize;
    touch-action: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.ground-handle-grip {
    display: block;
    width: 11px;
    height: 11px;
    margin-top: -1px;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(155, 229, 100, .55);
}

.ground-handle--end .ground-handle-grip {
    background: var(--amber);
    box-shadow: 0 0 8px rgba(229, 167, 60, .55);
}

.ground-handle:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: -3px;
}

.ground-readout {
    margin-top: .6rem;
}

.ground-crop.is-empty .ground-profile,
.ground-crop.is-empty .ground-frame {
    opacity: .45;
}

/* ── The browse map ───────────────────────────────────────────────────────── */

.ground-controls {
    position: absolute;
    top: .4rem;
    right: .4rem;
    display: flex;
    gap: .3rem;
}

.ground-control {
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--rule);
    background: rgba(19, 21, 16, .85);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.ground-control:hover,
.ground-control:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    outline: none;
}

.ground-map-name {
    margin: .45rem 0 0;
    min-height: 1.4em;
    color: var(--accent);
    font-size: .82rem;
}

/* The bench's echo of what the editor emits — a payload, so it is allowed to
   look like one. It wraps rather than scrolls: a horizontal scrollbar inside a
   page you are already dragging a canvas on is a trap on a phone. */
.ground-echo {
    margin: 0;
    color: var(--muted);
    font: inherit;
    font-size: .78rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ground-note {
    color: var(--muted);
    font-size: .78rem;
    margin: .45rem 0 0;
}

/* ── The runner, out on a piece of ground (dig #940) ───────────────────────── */

/*
 * Shorter than the browse map on purpose: this sits inside a readout on `/game`
 * and `/game/ground`, under a countdown and above the feed, and it is answering
 * one question ("where are they") rather than being a map you explore. At 375px
 * that is about a third of the viewport, which is as much as a live position is
 * worth taking off the screen it is reported on.
 */
.ground-live {
    margin: .6rem 0 0;
}

.ground-live .ground-canvas--map {
    height: 11rem;
    cursor: default;
}

.ground-live .ground-canvas--profile {
    height: 4.5rem;
}

@media (min-width: 34rem) {
    .ground-live .ground-canvas--map { height: 15rem; }
    .ground-live .ground-canvas--profile { height: 5.5rem; }
}

/* The profile hangs off the map as one instrument, the way the crop editor's
   does — and it is `hidden` until the module has confirmed there are heights to
   draw from (a track of bare lat/lon pairs is a real thing). */
.ground-live__profile {
    border-top: none;
}

/* ── The record page's profile (dig #1840) ────────────────────────────────── */

/* The same instrument with nobody on it, and shorter, because this one has no
   marker coming down it.

   ⚠️ It does NOT tuck under the map the way `.ground-live__profile` does, and
   that is not an oversight: `map.js` writes its own `.ground-map-name` caption
   inside the map's host, so on this page there is a line of text between the
   two and a shared border would be drawn round a gap. It stands on its own and
   carries its own caption instead. */
.ground-profile-still {
    margin-top: .55rem;
}

.ground-profile-still .ground-canvas--profile {
    height: 4.5rem;
}

@media (min-width: 34rem) {
    .ground-profile-still .ground-canvas--profile { height: 6rem; }
}

.ground-live__note {
    margin: .45rem 0 0;
}