:root {
  --ink: #171914;
  --paper: #f2eee5;
  --paper-deep: #e4ded1;
  --moss: #2f3a2d;
  --clay: #ad6b4d;
  --gold: #dab66d;
  --line: rgba(23,25,20,.15);
  --glass: rgba(18,21,17,.68);
  --shadow: 0 24px 70px rgba(7,9,7,.28);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); }
body, button, input, textarea, select { font-family: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }

.app { position: relative; width: 100vw; height: 100svh; overflow: hidden; background: var(--ink); }
.view { position: absolute; inset: 0; z-index: 0; overflow: hidden; opacity: 0; pointer-events: none; transform: translateX(4%); transition: opacity .36s ease, transform .52s cubic-bezier(.7,0,.18,1); }
.view.active { z-index: 2; opacity: 1; pointer-events: auto; transform: translateX(0); }

.home-control { position: absolute; z-index: 80; top: max(18px, env(safe-area-inset-top)); left: 50%; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; color: #fff; background: rgba(18,21,17,.52); box-shadow: 0 8px 26px rgba(0,0,0,.16); backdrop-filter: blur(16px); cursor: pointer; transform: translateX(-50%); }
.home-control svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.home-control.dark { color: var(--ink); border-color: var(--line); background: rgba(255,255,255,.58); }
.home-control.current { cursor: default; }

.back-control { position: absolute; z-index: 85; left: max(24px, env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom)); height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 1px solid rgba(255,255,255,.32); border-radius: 99px; color: #fff; background: rgba(18,21,17,.58); backdrop-filter: blur(15px); cursor: pointer; }
.back-control i { font-style: normal; font-size: 18px; }
.back-control span { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.back-control.dark { color: var(--ink); border-color: var(--line); background: rgba(255,255,255,.65); }

.plain-title { position: absolute; z-index: 70; top: max(25px, calc(env(safe-area-inset-top) + 7px)); left: max(28px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 9px; color: #fff; }
.plain-title > span { font: 400 clamp(25px,2.6vw,38px)/1 Georgia, serif; }
.plain-title > button { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: inherit; background: rgba(18,21,17,.35); cursor: pointer; font: italic 15px/1 Georgia, serif; }
.plain-title.dark { color: var(--ink); }
.plain-title.dark > button { border-color: var(--line); background: rgba(255,255,255,.55); }

/* Home */
.home-view { isolation: isolate; background: #252a23; }
.home-map-tiles, .home-map-cut, .home-map-fade { position: absolute; inset: 0; overflow: hidden; }
.home-map-tiles { z-index: -4; background: #b8b8af; }
.home-map-street { clip-path: polygon(0 0,100% 0,0 100%); }
.home-map-satellite { clip-path: polygon(100% 0,100% 100%,0 100%); }
.home-map-tile { position: absolute; width: 256px; height: 256px; max-width: none; }
.home-map-tile.street { filter: grayscale(.78) sepia(.1) brightness(.78) contrast(.9); }
.home-map-tile.satellite { filter: saturate(.72) sepia(.07) brightness(.64) contrast(.94); }
.home-map-cut { z-index: -1; pointer-events: none; background: linear-gradient(to bottom right,transparent calc(50% - 1px),rgba(242,238,229,.72) 50%,transparent calc(50% + 1px)); }
.home-map-fade { z-index: -2; background: radial-gradient(circle at 50% 43%, rgba(26,31,25,.06), rgba(15,18,14,.61) 78%), linear-gradient(0deg, rgba(12,15,12,.7), rgba(16,20,15,.2)); backdrop-filter: blur(1px); }

.plot-pair { position: absolute; left: 50%; top: 48%; width: min(980px, 78vw); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2vw,28px); transform: translate(-50%,-50%); }
.plot-choice { position: relative; isolation: isolate; height: min(48vh, 465px); overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 24px; color: #fff; background: #22271f; box-shadow: var(--shadow); cursor: pointer; }
.plot-choice img, .plot-choice > span { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.plot-choice > span { z-index: -1; background: linear-gradient(0deg, rgba(10,13,10,.82), transparent 65%); }
.plot-choice:hover img, .plot-choice:focus-visible img { transform: scale(1.035); }
.plot-choice b { position: absolute; left: 28px; bottom: 25px; font: 400 clamp(28px,3vw,44px)/1 Georgia, serif; }

.home-bottom { position: absolute; left: 50%; bottom: max(31px, calc(env(safe-area-inset-bottom) + 16px)); width: min(790px, 72vw); display: grid; grid-template-columns: 1fr minmax(70px,120px) 1fr minmax(70px,120px) 1fr; align-items: center; transform: translateX(-50%); }
.home-bottom button { min-height: 56px; padding: 0 18px; border: 0; color: #fff; background: transparent; text-shadow: 0 2px 12px rgba(0,0,0,.42); cursor: pointer; font: 400 clamp(19px,2vw,28px)/1 Baskerville, "Palatino Linotype", Georgia, serif; letter-spacing: .055em; }
.home-bottom > span { height: 1px; margin: 0 15px; background: rgba(255,255,255,.65); box-shadow: 0 1px 8px rgba(0,0,0,.28); }
.home-bottom button:hover, .home-bottom button:focus-visible { color: var(--gold); }
.home-credit { position: absolute; right: 7px; bottom: 5px; z-index: 6; padding: 2px 5px; color: rgba(255,255,255,.68); background: rgba(0,0,0,.35); font-size: 7px; }
.home-credit a { color: inherit; text-decoration: none; }

/* Plot image boards */
.plot-view { background: #11140f; }
.plot-gallery { position: absolute; inset: 0; overflow: hidden; }
.gallery-board { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 88px max(18px,4vw) 112px; scrollbar-width: thin; }
.metro-grid { columns: 3 280px; column-gap: clamp(12px,1.7vw,22px); }
.gallery-card { position: relative; display: inline-block; width: 100%; margin: 0 0 clamp(12px,1.7vw,22px); overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: #171b15; box-shadow: var(--shadow); break-inside: avoid; }
.gallery-open { position: relative; width: 100%; display: block; padding: 0; border: 0; color: #fff; background: #171b15; cursor: zoom-in; text-align: left; }
.gallery-media-shell { position: relative; overflow: hidden; background: #10130f; }
.gallery-media { width: 100%; height: auto; min-height: 180px; display: block; object-fit: cover; user-select: none; -webkit-user-drag: none; transition: transform .35s ease, filter .35s ease; }
.gallery-card-1.gallery-media-shell .gallery-media { aspect-ratio: 16/10; }
.gallery-card-2.gallery-media-shell .gallery-media { aspect-ratio: 4/5; }
.gallery-card-3.gallery-media-shell .gallery-media { aspect-ratio: 3/2; }
.gallery-card-4.gallery-media-shell .gallery-media { aspect-ratio: 1/1; }
.gallery-card-5.gallery-media-shell .gallery-media { aspect-ratio: 16/11; }
.gallery-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 42px 15px 13px; overflow: hidden; background: linear-gradient(transparent,rgba(8,10,8,.78)); font: 400 15px/1.15 Baskerville, "Palatino Linotype", Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.gallery-play-badge { position: absolute; left: 14px; top: 14px; min-width: 42px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 11px 0 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; color: #fff; background: rgba(12,15,12,.62); backdrop-filter: blur(12px); font-size: 14px; line-height: 1; box-shadow: 0 8px 22px rgba(0,0,0,.25); }
@media (hover:hover) and (pointer:fine) {
  .gallery-open:hover .gallery-media { transform: scale(1.025); filter: brightness(.92); }
}
.image-delete { position: absolute; z-index: 12; top: 10px; right: 10px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; color: #fff; background: rgba(12,15,12,.62); backdrop-filter: blur(12px); cursor: pointer; font-size: 21px; }
.plot-add-control { position: absolute; z-index: 40; left: 50%; bottom: max(20px,calc(env(safe-area-inset-bottom) + 12px)); min-height: 52px; display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 8px; border: 1px solid rgba(255,255,255,.3); border-radius: 99px; color: #171914; background: rgba(242,238,229,.96); box-shadow: 0 15px 45px rgba(0,0,0,.3); backdrop-filter: blur(14px); cursor: pointer; transform: translateX(-50%); font: 600 9px/1 Arial,sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.plot-add-control b { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--moss); font: 300 27px/1 Arial,sans-serif; }
.gallery-empty { min-height: 45vh; display: grid; place-content: center; gap: 8px; color: rgba(255,255,255,.75); text-align: center; }
.gallery-empty strong { color: #fff; font: 400 28px/1 Georgia,serif; }
.gallery-empty span { font-size: 10px; }
.gallery-bottom-space { height: 16px; }

/* Simple map */
.map-view { background: #252a23; }
.simple-map, .simple-map-tiles, .simple-map-svg { position: absolute; inset: 0; }
.simple-map { touch-action: none; cursor: crosshair; }
.simple-map.select { cursor: default; }
.simple-map-tiles { overflow: hidden; background: #c5c6bf; }
.simple-map-tile { position: absolute; width: 256px; height: 256px; max-width: none; user-select: none; -webkit-user-drag: none; }
.simple-map-svg { width: 100%; height: 100%; overflow: visible; touch-action: none; }
.map-plan { stroke: #f4d7cd; stroke-width: 3; stroke-dasharray: 12 9; pointer-events: all; }
.map-plan.selected { stroke: var(--gold); filter: drop-shadow(0 0 5px rgba(218,182,109,.8)); }
.map-note-line { fill: none; stroke: var(--gold); stroke-width: 3; marker-end: url(#map-arrow); pointer-events: stroke; }
.map-note-anchor { fill: var(--gold); stroke: #fff; stroke-width: 3; pointer-events: all; }
.map-note-box { fill: rgba(18,22,17,.9); stroke: rgba(255,255,255,.8); stroke-width: 1.5; pointer-events: all; }
.map-note-title { fill: #fff; font: 500 14px Baskerville, "Palatino Linotype", Georgia, serif; pointer-events: none; }
.map-note-info { fill: #f2eee5; stroke: rgba(255,255,255,.75); stroke-width: 1; pointer-events: all; }
.map-note-info-text { fill: #171914; font: italic 13px Georgia,serif; pointer-events: none; }
.map-hit { fill: none; stroke: transparent; stroke-width: 24; pointer-events: stroke; }
.map-hint { position: absolute; left: 50%; bottom: 20px; padding: 8px 12px; border-radius: 99px; color: #fff; background: rgba(18,21,17,.65); transform: translateX(-50%); font-size: 8px; letter-spacing: .09em; }
.map-credit { position: absolute; right: 6px; bottom: 5px; max-width: 54vw; padding: 3px 5px; color: #fff; background: rgba(0,0,0,.55); font-size: 7px; }
.simple-map-tools, .simple-layer-switch, .map-plot-switch { position: absolute; z-index: 55; display: flex; padding: 4px; border: 1px solid rgba(255,255,255,.3); border-radius: 99px; color: #fff; background: rgba(18,21,17,.68); backdrop-filter: blur(16px); }
.simple-map-tools { right: 24px; bottom: 24px; }
.simple-layer-switch { right: 24px; top: 24px; }
.map-plot-switch { left: 24px; top: 90px; }
.simple-map-tools button, .simple-layer-switch button, .map-plot-switch button { height: 38px; padding: 0 14px; border: 0; border-radius: 99px; color: rgba(255,255,255,.62); background: transparent; cursor: pointer; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.simple-map-tools button { min-width: 74px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px; }
.simple-map-tools button b { font: 400 16px/1 Georgia,serif; }
.simple-map-tools button.active, .simple-layer-switch button.active, .map-plot-switch button.active { color: var(--ink); background: var(--paper); }
.map-save-status { position: absolute; z-index: 50; right: 30px; bottom: 77px; color: rgba(255,255,255,.7); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }

/* Planning */
.planning-view { color: var(--ink); background: linear-gradient(rgba(242,238,229,.91),rgba(242,238,229,.96)),url(../images/two-plot-hero.webp) center/cover no-repeat; }
.info-view { color: var(--ink); background: var(--paper); }
.planning-title { gap: 9px; }
.planning-place-switch { display: flex; align-items: center; gap: 13px; margin-left: 18px; }
.planning-place-switch button { padding: 4px 0; border: 0; color: rgba(23,25,20,.48); background: transparent; cursor: pointer; font: 400 clamp(16px,1.6vw,22px)/1 Baskerville, "Palatino Linotype", Georgia, serif; letter-spacing: .035em; }
.planning-place-switch button.active { color: var(--ink); }
.planning-place-switch i { width: clamp(54px,7vw,105px); height: 1px; margin: 0 7px; background: rgba(23,25,20,.36); }
.planning-board { position: absolute; top: 102px; left: 5vw; right: 5vw; bottom: 78px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.planning-board > section { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.42); }
.planning-board h2 { height: 68px; display: flex; align-items: center; margin: 0; padding: 0 20px; border-bottom: 1px solid var(--line); font: 400 29px/1 Georgia,serif; }
.planning-board section > div { height: calc(100% - 68px); overflow-y: auto; overscroll-behavior: contain; }
.planning-item { width: 100%; min-height: 76px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 13px 18px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; cursor: pointer; text-align: left; }
.planning-item:hover { background: rgba(47,58,45,.06); }
.planning-item span { min-width: 0; display: grid; gap: 5px; }
.planning-item strong { font-size: 11px; }
.planning-item small { overflow: hidden; color: #777970; font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.planning-item i { color: #919389; font-style: normal; }
.salt-planning-board { position: absolute; top: 102px; left: 5vw; right: 5vw; bottom: 78px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.47); backdrop-filter: blur(9px); }
.salt-planning-head { height: 68px; display: flex; align-items: baseline; gap: 16px; padding: 0 21px; border-bottom: 1px solid var(--line); }
.salt-planning-head h2 { margin: 0; font: 400 29px/1 Baskerville, "Palatino Linotype", Georgia, serif; }
.salt-planning-head span { color: #777970; font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.salt-planning-list { height: calc(100% - 68px); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-content: start; overflow-y: auto; }
.salt-planning-item { position: relative; min-width: 0; min-height: 142px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 7px; padding: 18px 37px 17px 18px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; cursor: pointer; text-align: left; }
.salt-planning-item:hover { background: rgba(47,58,45,.06); }
.salt-planning-item .salt-application-type { color: var(--clay); font-size: 7px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.salt-planning-item strong { font-size: 11px; }
.salt-planning-item small { color: #64675f; font-size: 9px; line-height: 1.4; }
.salt-planning-item em { color: #878980; font-size: 8px; font-style: normal; }
.salt-planning-item > i { position: absolute; top: 50%; right: 16px; color: #919389; font-style: normal; transform: translateY(-50%); }
.planning-empty { padding: 20px; color: #777970; }

/* Information */
.info-grid { position: absolute; top: 105px; left: 6vw; right: 6vw; bottom: 78px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows: minmax(145px,1fr); gap: 13px; overflow-y: auto; padding-bottom: 2px; }
.info-card { min-width: 0; display: grid; grid-template-rows: 1fr auto auto; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.48); }
.info-title-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.info-title-line h2 { margin: 0; font: 400 clamp(19px,1.8vw,26px)/1.05 Georgia,serif; }
.info-title-line button { width: 28px; height: 28px; flex: 0 0 auto; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: transparent; cursor: pointer; font: italic 15px/1 Georgia,serif; }
.info-ready { margin: 13px 0 0; color: #8a8c83; font-size: 7px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.attachment-links { display: flex; flex-wrap: wrap; gap: 6px; align-content: end; margin-top: 14px; }
.attachment-link { max-width: 100%; display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 99px; color: #62645c; background: rgba(255,255,255,.5); cursor: pointer; font-size: 8px; text-decoration: none; }
.attachment-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-link b { color: var(--clay); font-size: 10px; }

/* All pop-outs stay compact and top-right */
.corner-box { position: fixed; z-index: 500; top: max(22px, env(safe-area-inset-top)); right: max(22px, env(safe-area-inset-right)); width: min(370px, calc(100vw - 44px)); max-height: calc(100svh - 44px); overflow-y: auto; padding: 25px; border: 1px solid rgba(23,25,20,.16); border-radius: 17px; color: var(--ink); background: rgba(242,238,229,.97); box-shadow: 0 24px 75px rgba(0,0,0,.32); backdrop-filter: blur(18px); }
.corner-close { position: absolute; top: 11px; right: 11px; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.55); cursor: pointer; font-size: 19px; }
.corner-box .corner-kicker { margin: 0 36px 7px 0; color: var(--clay); font-size: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.corner-box h2 { margin: 0 36px 15px 0; font: 400 29px/1 Georgia,serif; letter-spacing: -.03em; }
.corner-box p { margin: 0 0 14px; color: #686a62; font-size: 10px; line-height: 1.5; }
.corner-box label { display: grid; gap: 6px; margin: 12px 0; }
.corner-box label span { color: #73756d; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.corner-box input, .corner-box textarea, .corner-box select { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: rgba(255,255,255,.7); font-size: 11px; resize: vertical; }
.corner-box input[type="range"] { padding: 0; accent-color: var(--clay); }
.corner-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.corner-actions button, .corner-actions a { min-height: 37px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); background: rgba(255,255,255,.55); cursor: pointer; font-size: 8px; font-weight: 700; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }
.corner-actions .primary { color: #fff; border-color: var(--moss); background: var(--moss); }
.corner-actions .danger { color: #9a4c3f; border-color: rgba(154,76,63,.26); }
.corner-status { display: block; margin-top: 10px; color: #777970; font-size: 8px; }
.corner-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; margin: 15px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--line); }
.corner-meta div { min-height: 54px; padding: 10px; background: var(--paper); }
.corner-meta small { display: block; margin-bottom: 5px; color: #777970; font-size: 7px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.corner-meta strong { font-size: 9px; line-height: 1.35; }
.council-facts { display: grid; gap: 9px; margin: 0 0 11px; padding: 0; list-style: none; }
.council-facts li { position: relative; padding-left: 15px; color: #5f6259; font-size: 10px; line-height: 1.5; }
.council-facts li::before { position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--clay); content: ""; }
.source-checked { display: block; padding-bottom: 11px; border-bottom: 1px solid var(--line); color: #8a8c83; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.colour-label { grid-template-columns: 1fr auto !important; align-items: center; }
.corner-box .colour-label input[type="color"] { width: 54px; height: 38px; padding: 3px; border-radius: 99px; cursor: pointer; }
.colour-presets { display: flex; gap: 9px; margin: -3px 0 14px; }
.colour-presets button { width: 26px; height: 26px; padding: 0; border: 3px solid rgba(255,255,255,.85); border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.corner-attachment-list { display: grid; gap: 6px; margin-top: 12px; }
.corner-attachment { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.46); }
.corner-attachment span { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.corner-attachment button { width: 25px; height: 25px; padding: 0; border: 0; border-radius: 50%; color: var(--ink); background: rgba(23,25,20,.07); cursor: pointer; }
.corner-preview { width: 100%; min-height: 260px; max-height: 62svh; display: block; object-fit: contain; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
iframe.corner-preview { height: 58svh; }

.image-preview { position: fixed; z-index: 900; inset: 0; display: grid; grid-template-columns: 72px minmax(0,1fr) 72px; align-items: center; padding: max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); color: #fff; background: rgba(8,10,8,.97); backdrop-filter: blur(18px); touch-action: pan-y; }
.image-preview[hidden] { display: none !important; }
.preview-figure { min-width: 0; height: calc(100vh - 36px); height: calc(100svh - 36px); display: grid; grid-template-rows: minmax(0,1fr) auto; align-items: center; justify-items: center; gap: 10px; margin: 0; }
.image-preview img, .preview-video { width: 100%; height: 100%; min-height: 0; display: block; object-fit: contain; border-radius: 10px; user-select: none; -webkit-user-drag: none; }
.image-preview figcaption { max-width: min(720px,80vw); overflow: hidden; color: rgba(255,255,255,.72); font-size: 10px; letter-spacing: .04em; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.preview-close, .preview-nav { display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); cursor: pointer; backdrop-filter: blur(10px); }
.preview-close { position: absolute; z-index: 3; top: max(18px,env(safe-area-inset-top)); right: max(18px,env(safe-area-inset-right)); width: 44px; height: 44px; font-size: 25px; }
.preview-nav { width: 48px; height: 48px; justify-self: center; font: 300 38px/1 Arial,sans-serif; }
.preview-prev { grid-column: 1; }
.preview-figure { grid-column: 2; }
.preview-video { background: rgba(0,0,0,.45); }
.preview-next { grid-column: 3; }
body.preview-open { overflow: hidden; }
.toast { position: fixed; z-index: 800; left: 50%; bottom: 25px; max-width: min(440px,85vw); padding: 11px 16px; border-radius: 99px; color: #fff; background: rgba(17,20,16,.9); box-shadow: 0 15px 45px rgba(0,0,0,.25); font-size: 9px; opacity: 0; pointer-events: none; transform: translate(-50%,12px); transition: .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 1024px) and (orientation: landscape) {
  .plot-pair { width: 82vw; }
  .info-grid { left: 4vw; right: 4vw; grid-template-columns: repeat(4,minmax(0,1fr)); }
  .planning-board { left: 3vw; right: 3vw; }
  .salt-planning-board { left: 3vw; right: 3vw; }
  .planning-place-switch { margin-left: 10px; gap: 9px; }
  .planning-place-switch i { width: 54px; }
}

@media (orientation: portrait), (max-width: 720px) {
  .plot-pair { top: 46%; width: calc(100% - 38px); grid-template-columns: 1fr 1fr; gap: 10px; }
  .plot-choice { height: 45vh; border-radius: 17px; }
  .plot-choice b { left: 15px; bottom: 16px; font-size: 25px; }
  .home-bottom { width: calc(100% - 38px); grid-template-columns: 1fr 44px 1.25fr 44px 1fr; }
  .home-bottom button { min-height: 54px; padding: 0 5px; font-size: 17px; }
  .home-bottom > span { margin: 0 7px; }
  .plain-title { top: 23px; left: 17px; }
  .plain-title > span { font-size: 23px; }
  .planning-title { align-items: center; flex-wrap: wrap; right: 14px; }
  .planning-place-switch { flex-basis: 100%; margin: 3px 0 0; }
  .planning-place-switch i { width: 56px; }
  .planning-board { top: 92px; left: 14px; right: 14px; bottom: 76px; grid-template-columns: 1fr; overflow-y: auto; }
  .planning-board > section { min-height: 390px; }
  .salt-planning-board { top: 118px; left: 14px; right: 14px; bottom: 76px; }
  .salt-planning-list { grid-template-columns: 1fr 1fr; }
  .info-grid { top: 92px; left: 14px; right: 14px; grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .simple-map-tools { right: 12px; bottom: 12px; }
  .simple-map-tools button { min-width: 58px; padding: 0 9px; }
  .simple-map-tools button span { display: none; }
  .simple-layer-switch { right: 12px; top: 82px; }
  .map-plot-switch { left: 12px; top: 82px; }
  .back-control { left: 12px; bottom: 12px; }
  .gallery-board { padding: 78px 12px 102px; }
  .metro-grid { columns: 2 145px; column-gap: 10px; }
  .gallery-card { margin-bottom: 10px; border-radius: 13px; }
  .gallery-media { min-height: 130px; }
  .gallery-title { padding: 34px 10px 9px; font-size: 12px; }
  .image-delete { top: 7px; right: 7px; width: 32px; height: 32px; }
  .plot-add-control { left: auto; right: 14px; padding-right: 8px; transform: none; }
  .plot-add-control span { display: none; }
  .image-preview { grid-template-columns: 1fr; padding: 12px; }
  .preview-figure { grid-column: 1; height: calc(100vh - 24px); height: calc(100svh - 24px); }
  .preview-nav { position: absolute; z-index: 3; bottom: max(22px,env(safe-area-inset-bottom)); width: 46px; height: 46px; background: rgba(0,0,0,.48); }
  .preview-prev { left: max(16px,env(safe-area-inset-left)); }
  .preview-next { right: max(16px,env(safe-area-inset-right)); }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}