@import '_content/Plotstead.Ui/Plotstead.Ui.45ifis2wz7.bundle.scp.css';

/* /Pages/Map.razor.rz.scp.css */
.map-page[b-40ji4y9pij] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.map-bar[b-40ji4y9pij] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* Positioning context for the card and the move banner, which float over the
   canvas rather than pushing it around. */
.map-body[b-40ji4y9pij] {
    position: relative;
    flex: 1;
    display: flex;
    min-height: 0;
}

.map-canvas[b-40ji4y9pij] {
    flex: 1;
    min-height: 60vh;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--border-card);
}

.map-note[b-40ji4y9pij] {
    color: var(--text-dim);
    font-size: 13px;
    margin: 10px 0 0;
}

/* ── Asset card ─────────────────────────────────────────────────────── */

.map-card[b-40ji4y9pij] {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--bg-sheet);
    border: 1px solid var(--border-chip);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* Wide screens: a panel in the corner rather than a bar across the whole map,
   which would hide most of what you just tapped. */
@media (min-width: 640px) {
    .map-card[b-40ji4y9pij] {
        right: auto;
        width: 320px;
    }
}

.map-card-head[b-40ji4y9pij] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.map-card-swatch[b-40ji4y9pij] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.map-card-title[b-40ji4y9pij] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.map-card-title strong[b-40ji4y9pij] {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-card-sub[b-40ji4y9pij] {
    color: var(--text-dim);
    font-size: 12px;
}

.map-card-close[b-40ji4y9pij] {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 2px;
    font-size: 18px;
    display: flex;
    flex-shrink: 0;
}

.map-card-close:hover[b-40ji4y9pij] {
    color: var(--text);
}

.map-card-description[b-40ji4y9pij] {
    color: #c3c9d4;
    font-size: 13px;
    margin: 0;
}

.map-card-fact[b-40ji4y9pij] {
    display: flex;
    gap: 6px;
    font-size: 12px;
}

.map-card-fact-label[b-40ji4y9pij] {
    color: var(--text-dim);
}

.map-card-reminder[b-40ji4y9pij] {
    font-size: 12px;
    color: var(--text-dim);
}

.map-card-reminder.is-overdue[b-40ji4y9pij] { color: var(--red); }
.map-card-reminder.is-soon[b-40ji4y9pij] { color: var(--amber); }

.map-card-actions[b-40ji4y9pij] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

/* Grows to share the row, but wraps rather than crushing: "Draw from here" is a
   long label next to two short ones, and squeezed into a third of a narrow
   phone it lost the words that make it mean anything. */
.map-card-actions .btn[b-40ji4y9pij] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
}

/* The whole width, under the three map verbs above it. Details is what most
   taps on a card actually want; the row above holds the things that only make
   sense here, on the map, with the asset in front of you. */
.map-card-details[b-40ji4y9pij] {
    width: 100%;
    margin-top: 8px;
}

/* ── Editing a run ──────────────────────────────────────────────────── */

/* What can be done to the vertex in hand. Floats just above the action bar
   rather than joining it: those two buttons end the session, and a Delete
   sitting beside Done is a Delete that gets pressed by mistake. */
.map-vertex-bar[b-40ji4y9pij] {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
    max-width: calc(100% - 20px);
    background: var(--bg-sheet);
    border: 1px solid var(--border);
    border-radius: var(--radius-chip);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

/* The running length, on the banner while drawing. Tabular figures so it stops
   twitching as it counts up — the number changes on every pan, and digits of
   different widths make the whole banner shuffle. */
.map-banner-measure[b-40ji4y9pij] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--amber);
    white-space: nowrap;
}

/* ── Move banner ────────────────────────────────────────────────────── */

.map-banner[b-40ji4y9pij] {
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--bg-sheet);
    border: 1px solid var(--amber);
    border-radius: var(--radius-chip);
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.map-banner i[b-40ji4y9pij] {
    color: var(--amber);
    font-size: 17px;
}

/* Fixed at the centre of the map, drawn rather than glyphed so it stays crisp
   and never picks up the page's font scaling. Input passes through it: it marks
   the spot, it is not something to hit. */
.map-crosshair[b-40ji4y9pij] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 3;
}

.map-crosshair[b-40ji4y9pij]::before,
.map-crosshair[b-40ji4y9pij]::after {
    content: "";
    position: absolute;
    background: #ff3b30;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.map-crosshair[b-40ji4y9pij]::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
}

.map-crosshair[b-40ji4y9pij]::after {
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
}

/* Wraps, like every other row of buttons, so the labels never run off a narrow
   window at a large font size. */
.map-actions[b-40ji4y9pij] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px calc(10px + var(--inset-b));
}

/* Which aerial survey is on screen, and how old it is. Quiet by default —
   amber once it has missed a survey cycle, because at that point the age is the
   point rather than a footnote. */
.map-imagery[b-40ji4y9pij] {
    display: block;
    margin: -2px 0 8px;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.4;
}

.map-imagery.is-stale[b-40ji4y9pij] {
    color: var(--amber);
}

/* Basemap chips, matching the ledger's view switch so the same idea looks the
   same in both places. Wraps, like every other row of controls here. */
.map-basemaps[b-40ji4y9pij] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.map-basemap[b-40ji4y9pij] {
    padding: 6px 14px;
    background: var(--bg-chip);
    border: 1px solid var(--border-chip);
    border-radius: var(--radius-chip);
    color: var(--text-dim);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.map-basemap.is-on[b-40ji4y9pij] {
    background: rgba(74, 144, 217, 0.14);
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Floating controls ──────────────────────────────────────────────── */

/* The same stack the app map has, in the same place, so someone moving between
   the two is not relearning the screen. */
.map-controls[b-40ji4y9pij] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.map-control[b-40ji4y9pij] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: rgba(20, 25, 35, 0.9);
    border: 1px solid var(--border-chip);
    color: #fff;
    font-size: 19px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.map-control:hover[b-40ji4y9pij] {
    background: rgba(31, 37, 56, 0.95);
}

.map-control.is-on[b-40ji4y9pij] {
    color: var(--accent);
    border-color: var(--accent);
}

/* ── Layers panel ───────────────────────────────────────────────────── */

.map-layers[b-40ji4y9pij] {
    position: absolute;
    top: 12px;
    right: 62px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: min(240px, calc(100% - 76px));
    max-height: calc(100% - 24px);
    overflow-y: auto;
    padding: 12px;
    background: rgba(20, 25, 35, 0.96);
    border: 1px solid var(--border-chip);
    border-radius: var(--radius-card);
}

.map-layers-head[b-40ji4y9pij] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    margin-top: 4px;
}

.map-layers-empty[b-40ji4y9pij] {
    color: var(--text-faint);
    font-size: 12px;
}

/* The swatch is the switch, as on the app map: filled when the layer is on,
   hollow and dimmed when it is off. */
.map-layer[b-40ji4y9pij] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 2px;
    background: none;
    border: none;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.map-layer-dot[b-40ji4y9pij] {
    width: 13px;
    height: 13px;
    border-radius: 7px;
    border: 2px solid #3a4152;
    flex-shrink: 0;
}

.map-layer.is-off[b-40ji4y9pij] {
    color: var(--text-faint);
}

/* Parts fitted to the selected asset that have no pin of their own. Quiet: it
   answers "what else is here" without competing with the asset's own details. */
.map-card-parts[b-40ji4y9pij] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding-top: 2px;
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.4;
}

.map-card-parts i[b-40ji4y9pij] {
    color: var(--text-faint);
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Each part is a chip rather than a run of text: it has to read as something you
   can open, and a comma-separated list does not. Wraps, because a bore with four
   fittings should not push the card wider than the map. */
.map-card-parts[b-40ji4y9pij] {
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.map-card-part[b-40ji4y9pij] {
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-chip);
    background: var(--bg-chip);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: left;
}

.map-card-part:hover[b-40ji4y9pij] {
    border-color: var(--accent);
    color: var(--accent);
}

/* Which way the relationship runs. Without the word, "Parts" and "Part of" are
   the same row of chips and the card is telling you two names without saying
   which one is fitted to which. */
.map-card-parts-label[b-40ji4y9pij] {
    flex-shrink: 0;
    color: var(--text-faint);
}

/* ── No boundary yet ────────────────────────────────────────────────── */

/* The prompt that stops a boundary-less map from just looking broken. Top of
   the map rather than the bottom: the bottom is where the action bars live, and
   this is a statement about what you are looking at rather than something to do
   with what is under the crosshair. */
.map-no-boundary[b-40ji4y9pij] {
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: calc(100% - 24px);
    max-width: 420px;
    padding: 14px 16px;
    background: var(--bg-sheet);
    border: 1px solid var(--amber);
    border-radius: var(--radius-card);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.map-no-boundary strong[b-40ji4y9pij] {
    color: var(--amber);
    font-size: 15px;
}

.map-no-boundary span[b-40ji4y9pij] {
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.45;
}

.map-no-boundary-actions[b-40ji4y9pij] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.map-no-boundary-actions .btn[b-40ji4y9pij] {
    flex: 1 1 auto;
}