/* ==========================================================================
   Map Area Calculator (/map-area-calculator). Loaded on that page only, after
   css/style.css, whose tokens it uses. Same family as the Area Converter and the
   CBM calculator: white cards on the light background, tabular numbers and one
   orange action. Markup: content/maparea/app.html and js/maparea/app.js; the
   map itself is Leaflet (css/leaflet.css, loaded with the script).
   ========================================================================== */

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 1.15em; height: 1.15em; flex: none; }
.ma-with-icon { display: flex; align-items: flex-start; gap: .5rem; }
.ma-with-icon > .ico { margin-top: .15em; color: var(--teal-deep); }
html.ma-noscroll, html.ma-noscroll body { overflow: hidden; }

/* ---------- Hero ---------- */
/* Compact, so the search box and the map start high on the screen */
.ma-hero { padding-top: calc(var(--header-h) + clamp(1rem, 2.5vw, 1.75rem)); padding-bottom: clamp(1rem, 2.5vw, 1.5rem); }
.ma-hero h1 { margin-bottom: .5rem; font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.ma-hero .breadcrumbs ol { margin-bottom: .6rem; }
.ma-hero .eyebrow { margin-bottom: .3rem; }
.ma-hero .page-intro { max-width: 46rem; font-size: 1rem; }
.ma-points { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1.25rem 0 0; padding: 0; font: 500 .9375rem/1.4 var(--f-body); color: var(--ink-2); }
.ma-points li { display: inline-flex; align-items: center; gap: .45rem; }
.ma-points li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--sun); flex: none; }

/* ---------- Workspace ---------- */
.ma-shell { padding: clamp(1rem, 3vw, 2rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.ma-alert { padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--sun); }
/* Map on the left with the tools that are not results under it (shape of a known size, save or share), the results on the
   right; on a phone the results come straight after the map and the tools after them */
.ma-app {
  display: grid; grid-template-columns: minmax(0, 1fr) 21.5rem; grid-template-areas: "main panel" "work panel"; grid-template-rows: auto 1fr;
  gap: 1.25rem; align-items: start; scroll-margin-top: calc(var(--header-h) + 16px);
}
@media (min-width: 1180px) { .ma-app { grid-template-columns: minmax(0, 1fr) 24rem; } }
.ma-main { grid-area: main; min-width: 0; display: grid; gap: .6rem; }
.ma-work { grid-area: work; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); grid-template-rows: auto 1fr; gap: .85rem; align-items: start; }
.ma-work .ma-sized { grid-row: span 2; } /* the taller card; the listings line sits under the shorter "Save or share" beside it */
.ma-options { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
.ma-options .ma-lenunit, .ma-options .ma-checks { margin-top: 0; }
.ma-options-hint { margin-top: -.15rem; }

.ma-card { min-width: 0; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.ma-panel { grid-area: panel; display: grid; gap: .85rem; min-width: 0; }
.ma-h { margin: 0 0 .6rem; font-size: 1.05rem; line-height: 1.3; letter-spacing: -.01em; }
.ma-label { margin: 0; font: 700 .75rem/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ma-hint { margin: .35rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.ma-msg { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--ink-2); }
.ma-msg-error { color: var(--alarm); font-weight: 600; }
.ma-empty { color: var(--muted); font-size: .875rem; }
.ma-textbtn { display: inline; min-height: 24px; padding: .15rem 0; border: 0; background: none; color: var(--sun-ink); font: 600 .875rem/1.4 var(--f-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ma-textbtn:hover { color: var(--ink); }
.ma-card .field { margin: .85rem 0 0; }
.ma-card .field select, .ma-card .field input { min-height: 44px; }
.ma-chip { min-height: 32px; padding: 0 .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: 500 .8125rem/1 var(--f-body); cursor: pointer; }
.ma-chip[aria-pressed="true"] { border-color: var(--sun); background: #FFF1EA; color: var(--ink); font-weight: 600; }
.ma-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--ink-2); cursor: pointer; }
.ma-check input { width: 18px; height: 18px; accent-color: var(--sun-deep); }

/* ---------- Search ---------- */
.ma-search { display: flex; flex-wrap: wrap; gap: .5rem; }
.ma-search-box {
  flex: 1 1 22rem; display: flex; align-items: center; gap: .5rem; min-width: 0; padding: 4px 4px 4px .85rem;
  background: var(--surface); border: 1px solid var(--rail); border-radius: var(--r); box-shadow: var(--shadow-sm);
}
.ma-search-box:focus-within { border-color: var(--teal-deep); box-shadow: 0 0 0 3px rgba(31, 163, 184, .25); }
.ma-search-box > .ico { color: var(--muted); width: 20px; height: 20px; }
.ma-search-box input { flex: 1; min-width: 0; min-height: 40px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 1rem/1.3 var(--f-body); }
.ma-search-box input::placeholder { color: var(--muted); opacity: 1; }
.ma-search-box input::-webkit-search-cancel-button { cursor: pointer; }
.ma-locate { gap: .4rem; }
.ma-found { list-style: none; margin: 0; padding: .25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.ma-found button { display: block; width: 100%; min-height: 44px; padding: .55rem .75rem; border: 0; border-radius: var(--r); background: transparent; color: var(--ink); font: 400 .9375rem/1.4 var(--f-body); text-align: left; cursor: pointer; }
.ma-found button:hover, .ma-found button:focus-visible { background: #EEF7F9; }

/* ---------- Map ---------- */
.ma-map-wrap { position: relative; height: clamp(26rem, 74vh, 46rem); min-height: 26rem; border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden; background: #DCE6EA; box-shadow: var(--shadow-sm); isolation: isolate; }
.ma-map { position: absolute; inset: 0; z-index: 0; background: #DCE6EA; outline-offset: -3px; touch-action: none; }
.ma-map.leaflet-container { font: 400 .75rem/1.4 var(--f-body); touch-action: none; }
.ma-map.ma-drawing { cursor: crosshair; }
.ma-map.ma-drawing .leaflet-interactive { cursor: pointer; }
.ma-placeholder { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: .35rem; padding: 2rem; text-align: center; color: var(--ink-2);
  background: repeating-linear-gradient(0deg, transparent 0 47px, rgba(12, 27, 38, .06) 47px 48px), repeating-linear-gradient(90deg, transparent 0 47px, rgba(12, 27, 38, .06) 47px 48px), #E4ECEF; }
.ma-placeholder p { margin: 0; max-width: 30rem; font-size: .9375rem; }
.ma-placeholder-title { display: inline-flex; align-items: center; gap: .5rem; font: 700 1.1rem/1.3 var(--f-display); color: var(--ink); }
.ma-tiles { transition: opacity .3s; }

.ma-crosshair { position: absolute; left: 50%; top: 50%; z-index: 500; width: 28px; height: 28px; margin: -14px 0 0 -14px; pointer-events: none; display: none; }
.ma-crosshair::before, .ma-crosshair::after { content: ""; position: absolute; background: #fff; box-shadow: 0 0 0 1px rgba(12, 27, 38, .65); }
.ma-crosshair::before { left: 13px; top: 0; width: 2px; height: 28px; }
.ma-crosshair::after { top: 13px; left: 0; height: 2px; width: 28px; }
.is-drawing .ma-crosshair { display: block; }
@media (pointer: fine) { .is-drawing .ma-crosshair { display: none; } .is-drawing .ma-map:focus-visible ~ .ma-crosshair { display: block; } }

/* Result chip on the map: the figure stays in view on a phone and in full screen */
.ma-hud { position: absolute; z-index: 600; left: 10px; top: 10px; display: grid; gap: 0; max-width: calc(100% - 180px); padding: .45rem .75rem; background: rgba(255, 255, 255, .96); border: 1px solid var(--line-strong); border-left: 4px solid var(--sun); border-radius: var(--r); box-shadow: var(--shadow-sm); pointer-events: none; }
.ma-hud-label { font: 700 .6875rem/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ma-hud strong { font: 800 1.25rem/1.2 var(--f-display); letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ma-hud-sub { font-size: .75rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.ma-top-right { position: absolute; z-index: 600; right: 10px; top: 10px; display: flex; gap: .4rem; align-items: stretch; }
.ma-seg { display: inline-flex; background: rgba(255, 255, 255, .96); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; }
.ma-seg-btn { min-height: 40px; padding: 0 .85rem; border: 0; background: transparent; color: var(--ink-2); font: 600 .8125rem/1 var(--f-body); cursor: pointer; }
.ma-seg-btn + .ma-seg-btn { border-left: 1px solid var(--line); }
.ma-seg-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.ma-iconbtn { display: inline-grid; place-items: center; width: 40px; min-height: 40px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r); background: rgba(255, 255, 255, .96); color: var(--ink); box-shadow: var(--shadow-sm); cursor: pointer; }
.ma-iconbtn:hover { background: #fff; border-color: var(--rail); }
.ma-iconbtn .ico { width: 20px; height: 20px; }

.ma-banner { position: absolute; z-index: 700; left: 50%; top: 62px; transform: translateX(-50%); display: flex; align-items: center; gap: .75rem; max-width: calc(100% - 20px); padding: .55rem .8rem; background: #FFF7E5; border: 1px solid #F1D08C; border-radius: var(--r); box-shadow: var(--shadow-sm); font-size: .8125rem; line-height: 1.4; color: var(--ink); }

/* The drawing tools, floating along the foot of the map: while drawing, the choice of free shape, rectangle or square sits above them */
.ma-tools { position: absolute; z-index: 650; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .4rem; width: max-content; max-width: calc(100% - 20px); pointer-events: none; }
.ma-tools > * { pointer-events: auto; }
.ma-shapes { display: none; background: rgba(255, 255, 255, .97); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; }
.is-drawing .ma-shapes { display: inline-flex; }
.ma-shapes .ma-seg-btn:disabled { color: #9AA6AE; cursor: not-allowed; }
.ma-dock { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; max-width: 100%; padding: .35rem; background: rgba(255, 255, 255, .97); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow); }
.ma-tool { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 44px; min-height: 44px; padding: 0 .75rem; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--ink); font: 600 .8125rem/1 var(--f-body); white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s; }
.ma-tool:hover:not(:disabled) { background: var(--well); border-color: var(--line-strong); }
.ma-tool:disabled { color: #9AA6AE; cursor: not-allowed; }
.ma-tool .ico { width: 20px; height: 20px; }
.ma-tool-primary { background: var(--sun); color: var(--ink); }
.ma-tool-primary:hover:not(:disabled) { background: var(--sun-hot); border-color: transparent; }
.ma-tool-primary:disabled { background: #F2D5C6; color: #7E6F66; }
.ma-status { margin: 0; min-height: 1.5em; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.ma-status strong { color: var(--ink); }

/* Leaflet controls and the handles we draw */
.leaflet-bottom.leaflet-right { margin-bottom: 4px; }
.leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; font-size: 20px; color: var(--ink); }
.leaflet-control-scale-line { font: 600 .6875rem/1.4 var(--f-body); }
.leaflet-control-attribution { max-width: 70vw; font: 400 .6875rem/1.4 var(--f-body); }
.leaflet-control-attribution a { color: var(--sun-ink); }
.ma-vtx { background: none; border: 0; display: grid; place-items: center; cursor: grab; }
.ma-vtx span { display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--sun); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 1px 4px rgba(12, 27, 38, .5); transition: transform .12s; }
.ma-vtx:hover span { transform: scale(1.2); }
.ma-vtx-first span { background: var(--sun); box-shadow: 0 0 0 3px rgba(255, 255, 255, .95), 0 1px 4px rgba(12, 27, 38, .5); }
.ma-drawing .ma-vtx-first span { width: 20px; height: 20px; }
.ma-vtx-last span { background: var(--ink); border-color: #fff; }
.ma-vtx-sel span { width: 22px; height: 22px; background: var(--ink); border: 4px solid #fff; box-shadow: 0 0 0 3px var(--sun), 0 1px 6px rgba(12, 27, 38, .6); }
.ma-mid { background: none; border: 0; display: grid; place-items: center; cursor: copy; }
.ma-mid span { display: block; width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .92); border: 2px solid var(--sun); opacity: .85; transition: transform .12s, opacity .12s; }
.ma-mid:hover span { transform: scale(1.5); opacity: 1; }
@media (pointer: coarse) {
  .ma-vtx span { width: 22px; height: 22px; }
  .ma-vtx-sel span { width: 26px; height: 26px; }
  .ma-mid span { width: 16px; height: 16px; }
}
.ma-side, .ma-area-label { background: none; border: 0; }
.ma-side span, .ma-area-label span { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.ma-side span { margin-top: -17px; padding: 1px 6px; border-radius: 3px; background: rgba(12, 27, 38, .82); color: #fff; font: 600 .6875rem/1.4 var(--f-body); }
.ma-side span i { margin-left: .45em; padding-left: .45em; border-left: 1px solid rgba(255, 255, 255, .45); font-style: normal; font-weight: 500; color: #FFE3A8; }
.ma-ang { background: none; border: 0; }
.ma-ang span { position: absolute; left: 0; top: 0; margin: -9px 0 0 -18px; width: 36px; text-align: center; pointer-events: none; font: 700 .75rem/18px var(--f-body); color: #0C1B26; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; font-variant-numeric: tabular-nums; }
.ma-area-label span { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .93); border: 1px solid var(--sun); color: var(--ink); font: 700 .8125rem/1.3 var(--f-display); box-shadow: 0 1px 4px rgba(12, 27, 38, .35); }
/* Snapping: the note beside the pointer, and the handles that move and turn a rectangle or square */
.ma-tag { background: none; border: 0; }
.ma-tag span { position: absolute; left: 14px; top: -34px; padding: 2px 7px; border-radius: 3px; background: #0E6F7F; color: #fff; font: 600 .6875rem/1.5 var(--f-body); white-space: nowrap; pointer-events: none; box-shadow: 0 1px 4px rgba(12, 27, 38, .4); font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .ma-tag span { left: 0; top: -54px; transform: translateX(-50%); } }
.ma-handle { background: none; border: 0; display: grid; place-items: center; cursor: grab; }
.ma-handle span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid #0E6F7F; color: #0E6F7F; box-shadow: 0 1px 5px rgba(12, 27, 38, .45); transition: transform .12s; }
.ma-handle:hover span { transform: scale(1.12); }
@media (pointer: coarse) { .ma-handle span { width: 38px; height: 38px; } }
.ma-moving .ma-side, .ma-moving .ma-ang, .ma-moving .ma-area-label, .ma-moving .ma-vtx, .ma-moving .ma-mid { visibility: hidden; }
.ma-pin { background: none; border: 0; }
.ma-pin span { display: block; width: 26px; height: 26px; margin: 0 auto; border-radius: 50% 50% 50% 0; background: var(--sun-deep); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(12, 27, 38, .5); transform: rotate(-45deg); }

/* Full screen (the map fills the window; the panel is hidden, the chip shows the figures) */
.ma-map-wrap.is-full { position: fixed; z-index: 2000; inset: 0; height: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; }
.ma-map-wrap.is-full .ma-tools { bottom: max(34px, env(safe-area-inset-bottom)); }

/* ---------- Results panel ---------- */
.ma-total { border-top: 4px solid var(--sun); }
.ma-big { margin: .4rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15em .4em; font-family: var(--f-display); color: var(--ink); line-height: 1.1; overflow-wrap: anywhere; }
.ma-big-num { font-size: clamp(2.1rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ma-big-unit { font-size: 1.25rem; font-weight: 700; color: var(--ink-2); }
.ma-big.is-unsure { opacity: .5; text-decoration: line-through; text-decoration-thickness: 2px; }
.ma-big.is-long .ma-big-num { font-size: clamp(1.65rem, 2.6vw, 2.05rem); }
.ma-warn { margin: .7rem 0 0; padding: .6rem .8rem; border: 1px solid rgba(180, 35, 24, .3); border-radius: var(--r); background: #FFF6F5; color: var(--alarm); font-size: .875rem; font-weight: 600; line-height: 1.45; }
.ma-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: .5rem 1rem; margin: 1rem 0 0; padding-top: .85rem; border-top: 1px solid var(--line); }
.ma-stats > div { min-width: 0; }
.ma-stats dt { font: 600 .6875rem/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ma-stats dd { margin: .15rem 0 0; font: 700 .9375rem/1.3 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ma-stats > div:first-child { grid-column: 1 / -1; }
.ma-stats > div:first-child dd { font-size: 1.05rem; }
.ma-lenunit { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin-top: .85rem; }
.ma-lenunit .ma-hint { margin: 0; }
.ma-checks { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin-top: .6rem; }

.ma-sized .ma-seg { margin: .6rem 0 .1rem; box-shadow: none; }
.ma-sized .ma-seg-btn { min-height: 38px; }
.ma-sz-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
.ma-sz-row > [hidden] { display: none; }
.ma-sz-field { display: grid; gap: .2rem; min-width: 0; margin-top: .55rem; font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.ma-sz-field input { width: 100%; min-width: 0; min-height: 44px; padding: 0 .75rem; border: 1px solid var(--rail); border-radius: var(--r); background: var(--surface); color: var(--ink); font: 400 .9375rem/1.3 var(--f-body); }
.ma-sized .btn { margin-top: .65rem; gap: .4rem; }
.ma-sized .ma-msg { margin-top: .5rem; }

.ma-units { list-style: none; margin: 0; padding: 0; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.ma-unit { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.ma-unit:first-child { border-top: 0; }
.ma-unit.is-main { background: linear-gradient(90deg, #FFF1EA, transparent); margin-inline: -.35rem; padding-inline: .35rem; border-radius: var(--r); }
.ma-unit-name { color: var(--ink-2); }
.ma-unit-val { text-align: right; font-size: .9375rem; color: var(--ink-2); overflow-wrap: anywhere; }
.ma-unit-val strong { color: var(--ink); font: 700 1rem/1.3 var(--f-display); }
.ma-unit-head { margin-top: .6rem; padding: .5rem 0 .25rem; border-top: 2px solid var(--line); font: 700 .6875rem/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ma-unit-note { padding: .5rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.ma-badge { display: inline-block; margin-left: .4rem; padding: 0 .45rem; border-radius: 999px; font: 600 .6875rem/1.6 var(--f-body); vertical-align: 1px; cursor: help; }
.ma-badge-standard { background: #EDF7EE; color: var(--ok); }
.ma-badge-common { background: #EEF7F9; color: var(--sun-ink); }
.ma-badge-varies, .ma-badge-custom { background: #FEF3DC; color: var(--brown); }
.ma-region { margin-top: 1rem; padding-top: .25rem; border-top: 1px solid var(--line); }
.ma-custom { margin-top: .85rem; font-size: .875rem; }
.ma-custom summary { min-height: 36px; padding: .35rem 0; font-weight: 600; color: var(--sun-ink); cursor: pointer; }
.ma-custom-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .5rem; }
.ma-custom-row input { min-height: 44px; padding: 0 .75rem; border: 1px solid var(--rail); border-radius: var(--r); background: var(--surface); color: var(--ink); font: 400 .9375rem/1.3 var(--f-body); }
.ma-custom .ma-msg { margin-top: .4rem; }

.ma-parcel-list { list-style: none; display: grid; gap: .4rem; margin: 0 0 .75rem; padding: 0; }
.ma-parcel-list li { display: flex; gap: .35rem; }
.ma-parcel-pick { flex: 1; display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink-2); font: 500 .875rem/1.3 var(--f-body); text-align: left; cursor: pointer; }
.ma-parcel-pick strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.is-active .ma-parcel-pick { border-color: var(--sun); background: #FFF6F0; }
.ma-parcel-del { width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink-2); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.ma-parcel-del:hover { border-color: var(--alarm); color: var(--alarm); }
.ma-angles { margin-top: .5rem; display: grid; gap: .25rem; }
.ma-angle-main, .ma-angle-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem .6rem; margin: 0; font-size: .875rem; color: var(--ink-2); }
.ma-angle-main strong { font: 800 1.35rem/1.2 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.ma-angle-row { padding-top: .25rem; border-top: 1px solid var(--line); }
.ma-angle-row strong { font: 700 .9375rem/1.3 var(--f-display); color: var(--ink); }
.ma-angle-row .ma-hint-inline { flex-basis: 100%; text-align: right; font-size: .75rem; color: var(--muted); }
.ma-point-ll { margin: 0; font: 600 .9375rem/1.4 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }

.ma-action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.ma-action-grid .btn, .ma-share-row .btn { gap: .4rem; padding-inline: .8rem; }
.ma-share-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin-top: .5rem; }
.ma-actions { container-type: inline-size; }
@container (max-width: 21rem) { .ma-share-row { grid-template-columns: 1fr; } } /* a narrow card (tablets): one button a row */
.ma-wa { background: #1FA855; border-color: #1FA855; color: #fff; }
.ma-wa:hover { background: #178A45; border-color: #178A45; color: #fff; }
.ma-wa[aria-disabled="true"] { background: var(--well); border-color: var(--line); color: var(--muted); cursor: not-allowed; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled::after { display: none; }
.ma-cta { margin: 0; padding: .75rem 1rem; border-radius: var(--r); background: var(--bg-alt); font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
.ma-cta a { color: var(--sun-ink); font-weight: 600; text-underline-offset: 3px; }
.ma-disclaimer { margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--muted); }

/* ---------- Below the calculator ---------- */
.ma-guide { border-top: 1px solid var(--line); }
.prose .ma-unit-table td { font-variant-numeric: tabular-nums; }
.prose .ma-steps { counter-reset: step; list-style: none; margin-left: 0; }
.prose .ma-steps li { counter-increment: step; position: relative; padding-left: 2.6rem; }
.prose .ma-steps li::before { content: counter(step); position: absolute; left: 0; top: .05rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--ink); color: #fff; font: 700 .875rem/1 var(--f-display); }

/* ---------- Smaller screens ---------- */
@media (max-width: 960px) {
  .ma-app { grid-template-columns: 1fr; grid-template-areas: "main" "panel" "work"; grid-template-rows: none; }
  .ma-map-wrap { height: clamp(26rem, 68vh, 40rem); }
}
@media (max-width: 900px) { .ma-points { display: none; } }
@media (max-width: 640px) {
  .ma-shell { padding-top: .75rem; }
  .ma-hero .page-intro { font-size: .9375rem; }
  .ma-hero .post-meta { display: none; }
  .ma-map-wrap { height: min(72vh, 36rem); min-height: 24rem; margin-inline: -4px; border-radius: var(--r); }
  .ma-search-box { flex-basis: 100%; }
  .ma-locate { flex: 1; }
  .ma-hud { max-width: calc(100% - 76px); top: 58px; }
  /* The dock: the main buttons keep their words, the rest are icons (their names stay for screen readers). Zoom moves to the
     top right so the dock never covers it, and the attribution (which must stay readable) has its own strip under the dock. */
  .ma-tools { left: 6px; right: 6px; bottom: 46px; transform: none; width: auto; max-width: none; align-items: stretch; }
  .ma-shapes { align-self: center; }
  .ma-shapes .ma-seg-btn { min-height: 36px; padding: 0 .7rem; font-size: .75rem; }
  .ma-dock { flex-wrap: nowrap; justify-content: space-between; gap: .2rem; padding: .3rem; }
  .ma-tool { flex-direction: column; gap: .15rem; flex: 0 0 auto; min-width: 44px; padding: 0 .35rem; font-size: .6875rem; }
  .ma-tool-primary { flex: 1 1 auto; }
  .ma-tool:not(.ma-tool-primary):not(#ma-addcentre) span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ma-map-wrap .leaflet-bottom.leaflet-right { top: 58px; bottom: auto; }
  .ma-map-wrap .leaflet-control-scale { display: none; }
  .ma-map-wrap .leaflet-control-attribution { max-width: calc(100vw - 30px); font-size: .5625rem; line-height: 1.3; }
  .ma-banner { top: 108px; }
  .ma-big-num { font-size: 2.25rem; }
  .ma-custom-row { grid-template-columns: 1fr; }
  .ma-map-wrap.is-full .ma-hud { top: 58px; }
}

/* ---------- Print: only the measurement sheet ---------- */
.ma-print { display: none; }
@media print {
  .site-header, .site-footer, .skip-link, .page-hero, .ma-app, .more-tools, .ma-guide, .breadcrumbs, .ma-alert, .tools-box { display: none !important; }
  .ma-shell, .ma-shell .container { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .ma-print { display: block !important; color: #000; font: 400 11pt/1.5 var(--f-body); }
  .ma-print h2 { margin: 0 0 .2rem; font-size: 20pt; }
  .ma-print-meta, .ma-print-note { color: #333; font-size: 9pt; }
  .ma-print-total { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; margin: .75rem 0; padding: .6rem .8rem; border-left: 4px solid #F26B2A; background: #F6F8F9; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ma-print-total strong { font-size: 16pt; margin-right: 1.5rem; }
  .ma-print-total span { font-size: 8pt; text-transform: uppercase; letter-spacing: .08em; color: #444; }
  .ma-print-sketch { display: block; width: 100%; height: auto; max-height: 13.8cm; margin: .4rem 0 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ma-print-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
  .ma-print-cols table { width: 100%; border-collapse: collapse; font-size: 10pt; }
  .ma-print-cols td { padding: .2rem 0; border-bottom: 1px solid #ddd; }
  .ma-print-cols td:last-child { text-align: right; font-weight: 700; }
  .ma-print-h { margin: .8rem 0 .25rem; font-weight: 700; break-after: avoid; }
  .ma-print-details { break-before: page; }
  .ma-print-corners { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .ma-print-corners th, .ma-print-corners td { padding: .15rem .4rem; border-bottom: 1px solid #ddd; text-align: left; }
  .ma-print-corners tr { break-inside: avoid; }
}