/* Archive system */
:root {
    --paper: #fffffb;
    --ink: rgba(0,0,0,.86);
    --line: rgba(0,0,0,.82);
    --panel-w: clamp(300px, 17vw, 344px);
    --form-w: clamp(680px, 43vw, 840px);
    --form-h: clamp(590px, 74vh, 780px);
}

* { box-sizing: border-box; }
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 300;
}
button, input, textarea { font: inherit; color: inherit; }
button, a, label { cursor: crosshair; }
input, textarea { border-radius: 0; }

/* Map */
#archive-map {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--paper);
}
.leaflet-container { background: var(--paper); }
.leaflet-control-container { display: none; }
/* Trim only the outermost 0.075% of every Leaflet image overlay.
   This removes source-canvas edge lines without resizing or shifting the map. */
.leaflet-image-layer {
    backface-visibility: hidden;
    -webkit-clip-path: inset(0.075%);
    clip-path: inset(0.075%);
}
.leaflet-zoom-anim .leaflet-image-layer { will-change: transform; }

/* Locator */
#archive-crosshair {
    --cross-x: 50vw;
    --cross-y: 50vh;
    position: fixed;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease;
}
#archive-crosshair.active { opacity: 1; visibility: visible; }
.crosshair-h,
.crosshair-v,
.crosshair-core {
    position: absolute;
    transition: left .07s linear, top .07s linear;
}
.crosshair-h {
    left: 0;
    right: 0;
    top: var(--cross-y);
    border-top: 1px dashed rgba(0,0,0,.82);
}
.crosshair-v {
    top: 0;
    bottom: 0;
    left: var(--cross-x);
    border-left: 1px dashed rgba(0,0,0,.82);
}
.crosshair-core {
    left: var(--cross-x);
    top: var(--cross-y);
    width: 12px;
    height: 12px;
    border: 1px solid #111;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    background: var(--paper);
}
.crosshair-core::before,
.crosshair-core::after {
    content: "";
    position: absolute;
    background: #111;
}
.crosshair-core::before { width: 18px; height: 1px; left: -4px; top: 5px; }
.crosshair-core::after { width: 1px; height: 18px; left: 5px; top: -4px; }

/* Cut-panel outlines */
.panel-outline {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.panel-outline path {
    fill: none;
    stroke: #111;
    stroke-width: 1.35;
    vector-effect: non-scaling-stroke;
}

/* Left panel */
.search-panel {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 20;
    width: var(--panel-w);
    height: 100vh;
    padding: clamp(38px, 4.6vh, 50px) clamp(28px, 2.4vw, 40px);
    background: var(--paper);
    clip-path: polygon(0 0, 100% 0, 100% 76%, 66% 100%, 0 100%);
}
.search-panel > *:not(.panel-outline) { position: relative; z-index: 1; }
.search-panel .back-link {
    position: absolute;
    left: 16px;
    top: 12px;
    color: #111;
    font-size: 42px;
    line-height: .78;
    text-decoration: none;
    opacity: .42;
    transform: translateY(-1px);
}
.search-panel .back-link:hover { opacity: 1; }
.search-panel h1 {
    margin: 0;
    max-width: calc(100% - 4px);
    font-size: clamp(20px, 1.35vw, 24px);
    line-height: 1.18;
    font-weight: 300;
    letter-spacing: .6px;
    white-space: normal;
    overflow-wrap: normal;
}

.language-switcher {
    position: absolute !important;
    right: clamp(20px, 1.8vw, 30px);
    top: clamp(15px, 2vh, 20px);
    display: flex;
    align-items: center;
    gap: 5px;
    font: 300 11px/1 "IBM Plex Mono", monospace;
    letter-spacing: .35px;
    opacity: .62;
}
.language-switcher button {
    border: 0;
    padding: 1px 0;
    background: none;
    font: inherit;
    opacity: .55;
}
.language-switcher button:hover,
.language-switcher button.active {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.location-tools { margin-top: clamp(54px, 8vh, 74px); }
.tool-line {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto;
    gap: 18px;
    align-items: start;
}
.coord-inputs {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-right: 11px;
}
.coord-inputs::before {
    content: "";
    position: absolute;
    right: 0;
    top: 8px;
    bottom: 8px;
    width: 8px;
    border-right: 1px solid #111;
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;
}
.coord-inputs input {
    display: block;
    width: 100%;
    height: 23px;
    padding: 1px 6px;
    border: 1.5px solid #111;
    outline: none;
    background: #fffefb;
    font: 300 11px/1 "IBM Plex Mono", monospace;
}
.coord-inputs input:focus { background: #fff; }
.tool-line > button {
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 5px;
    font-size: 14px;
    white-space: nowrap;
}

/* DMS coordinates */
.dms-panel {
    width: calc(100% - 4px);
    margin-top: 18px;
    padding: 10px 0 0 6px;
    border-top: 1px solid rgba(0,0,0,.28);
}
.dms-heading {
    margin-bottom: 8px;
    font: 300 9px/1.2 "IBM Plex Mono", monospace;
    letter-spacing: .7px;
    opacity: .5;
}
.dms-row {
    display: grid;
    grid-template-columns: 24px 42px 38px 52px 34px;
    gap: 4px;
    align-items: center;
    margin-bottom: 5px;
}
.dms-axis {
    font: 300 9px/1 "IBM Plex Mono", monospace;
    opacity: .58;
}
.dms-cell {
    position: relative;
    display: block;
    height: 23px;
}
.dms-cell input {
    width: 100%;
    height: 23px;
    padding: 1px 14px 1px 5px;
    border: 1px solid rgba(0,0,0,.72);
    border-radius: 0;
    outline: none;
    background: rgba(255,255,251,.72);
    font: 300 10px/1 "IBM Plex Mono", monospace;
}
.dms-cell input:focus { background: #fff; border-color: #111; }
.dms-cell span {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-52%);
    font: 300 9px/1 "IBM Plex Mono", monospace;
    opacity: .52;
    pointer-events: none;
}
.dms-dir {
    width: 34px;
    height: 23px;
    padding: 0 2px;
    border: 1px solid rgba(0,0,0,.72);
    border-radius: 0;
    outline: none;
    background: rgba(255,255,251,.72);
    font: 300 10px/1 "IBM Plex Mono", monospace;
}
.dms-convert {
    margin: 3px 0 0 28px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 11px;
    text-decoration: underline;
    text-underline-offset: 4px;
    opacity: .78;
}
.dms-convert:hover { opacity: 1; }
.micro-status {
    min-height: 18px;
    margin: 13px 0 0 6px;
    width: 90%;
    font: 300 9px/1.45 "IBM Plex Mono", monospace;
    opacity: .52;
}

/* Drag pin */
.pin-tool {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 18px 0 0 6px;
}
.pin-tool-box {
    width: 48px;
    height: 54px;
    border: 1.25px solid #111;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.24);
}
.drag-location-pin {
    width: 38px;
    height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: grab;
    touch-action: none;
}
.drag-location-pin:active,
body.pin-dragging .drag-location-pin { cursor: grabbing; }
.drag-location-pin svg {
    width: 32px;
    height: 46px;
    overflow: visible;
    pointer-events: none;
}
.drag-location-pin .pin-sphere-shadow {
    fill: rgba(0,0,0,.14);
    stroke: none;
}
.drag-location-pin .pin-sphere {
    fill: #d8d8d3;
    stroke: #111;
    stroke-width: 1.25;
    filter: drop-shadow(1.5px 2.5px 2px rgba(0,0,0,.18));
}
.drag-location-pin .pin-sphere-highlight {
    fill: rgba(255,255,255,.92);
    stroke: none;
}
.drag-location-pin .pin-stem {
    fill: none;
    stroke: #111;
    stroke-width: 1.35;
}
.drag-location-pin .pin-point {
    fill: #111;
    stroke: #111;
    stroke-width: .6;
}

.pin-tool-label {
    font-size: 12px;
    opacity: .72;
    white-space: nowrap;
}
.pin-drag-ghost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100000;
    width: 38px;
    height: 48px;
    margin: -38px 0 0 -19px;
    pointer-events: none;
    opacity: .9;
}
.pin-drag-ghost svg {
    width: 32px;
    height: 46px;
    overflow: visible;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.12));
}
.pin-drag-ghost .pin-sphere-shadow { fill: rgba(0,0,0,.14); stroke: none; }
.pin-drag-ghost .pin-sphere { fill: #d8d8d3; stroke: #111; stroke-width: 1.25; }
.pin-drag-ghost .pin-sphere-highlight { fill: rgba(255,255,255,.92); stroke: none; }
.pin-drag-ghost .pin-stem { fill: none; stroke: #111; stroke-width: 1.35; }
.pin-drag-ghost .pin-point { fill: #111; stroke: #111; stroke-width: .6; }
body.pin-dragging { cursor: grabbing !important; }
.panel-rule {
    height: 1.25px;
    background: #111;
    margin: clamp(46px, 7vh, 68px) 0 clamp(52px, 9vh, 88px);
}
.layer-panel { padding-left: clamp(20px, 2.2vw, 36px); }
.layer-heading { margin-bottom: 8px; font-size: 13px; }
.layer-row {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: clamp(46px, 4vw, 82px);
    align-items: center;
    min-height: 40px;
    font-size: 12px;
    line-height: 1.25;
    white-space: normal;
}
.layer-row input { position: absolute; opacity: 0; pointer-events: none; }
.checkmark {
    width: 16px;
    height: 16px;
    border: 1.5px solid #111;
    position: relative;
    display: block;
}
.layer-row input:checked + .checkmark::before,
.layer-row input:checked + .checkmark::after {
    content: "";
    position: absolute;
    left: 6px;
    top: -1px;
    width: 1.25px;
    height: 15px;
    background: #111;
}
.layer-row input:checked + .checkmark::before { transform: rotate(45deg); }
.layer-row input:checked + .checkmark::after { transform: rotate(-45deg); }

/* Markers */
.archive-marker { background: transparent; border: 0; }
.archive-marker .record-dot,
.archive-marker .garden-dot,
.archive-marker .visitor-dot,
.archive-marker .draft-dot {
    display: block;
    background: #111;
    box-shadow: 0 0 3px rgba(0,0,0,.35);
}
.archive-marker .record-dot { width: 4px; height: 4px; border-radius: 50%; }
.archive-marker .garden-dot { width: 6px; height: 6px; border-radius: 50%; }
.archive-marker .visitor-dot {
    width: 7px;
    height: 7px;
    background: transparent;
    border: 1px solid #111;
    transform: rotate(45deg);
    box-shadow: none;
}
.archive-marker .draft-dot {
    width: 9px;
    height: 9px;
    background: var(--paper);
    border: 1.5px solid #111;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255,255,251,.45);
}
.archive-tooltip {
    background: rgba(255,255,251,.94);
    border: 1px solid rgba(0,0,0,.35);
    border-radius: 0;
    box-shadow: none;
    color: #111;
    font-size: 10px;
}

/* Locator popup */
.locator-popup .leaflet-popup-content-wrapper {
    position: relative;
    background: rgba(255,255,251,.97);
    border: 1px solid #111;
    border-radius: 0;
    box-shadow: none;
}
.locator-popup .leaflet-popup-tip-container { display: none; }
.locator-popup .leaflet-popup-content-wrapper::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 10px;
    height: 10px;
    background: rgba(255,255,251,.97);
    border-right: 1px solid #111;
    border-bottom: 1px solid #111;
    transform: translateX(-50%) rotate(45deg);
    z-index: 2;
}
.locator-popup .leaflet-popup-content { margin: 8px 11px; min-width: 116px; }
.locator-popup-content { display: flex; flex-direction: column; gap: 5px; }
.locator-popup-coord {
    font: 300 8px/1.35 "IBM Plex Mono", monospace;
    opacity: .5;
    white-space: nowrap;
}
.add-location-button {
    border: 0;
    padding: 0;
    background: none;
    text-align: left;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Form drawer */
.archive-form-shell {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 21;
    width: var(--form-w);
    height: var(--form-h);
    background: rgba(255,255,251,.985);
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%, 0 28%);
    padding: clamp(46px, 5vh, 60px) clamp(28px, 2.15vw, 40px) 22px clamp(112px, 7.2vw, 138px);
    overflow: hidden;
    transform: translateX(100%);
    transition: transform .48s cubic-bezier(.19,1,.22,1);
    pointer-events: none;
}
.archive-form-shell.open {
    transform: translateX(0);
    pointer-events: auto;
}
.archive-form-shell > *:not(.panel-outline) { position: relative; z-index: 1; }
.form-handle {
    position: fixed;
    right: 0;
    top: 58%;
    z-index: 24;
    width: 28px;
    height: 58px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 21px;
    line-height: 1;
    transition: right .48s cubic-bezier(.19,1,.22,1);
}
.form-handle-outline {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.form-handle-outline path {
    fill: rgba(255,255,251,.97);
    stroke: #111;
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
}
.form-handle-glyph {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px;
}
body.form-open .form-handle { right: var(--form-w); }
.form-handle:hover .form-handle-outline path { fill: #fff; }
.new-record {
    position: fixed;
    right: calc(var(--form-w) + 14px);
    bottom: calc(var(--form-h) - 36px);
    z-index: 24;
    width: 34px;
    height: 34px;
    border: 1.25px solid #111;
    background: var(--paper);
    font-size: 23px;
    line-height: 29px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease .22s;
}
body.form-open .new-record {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.archive-form-title {
    position: absolute !important;
    left: clamp(112px, 7.2vw, 138px);
    top: clamp(18px, 2.25vh, 25px);
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 2.4px;
    white-space: nowrap;
}
#archive-form {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}
.form-section {
    position: relative;
    border: 1.1px solid rgba(0,0,0,.72);
    background: linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.34));
    padding: 12px 14px 14px;
}
.form-section::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(0,0,0,.06);
    pointer-events: none;
}
.section-meta { flex: 0 0 auto; padding-bottom: 10px; }
.section-record { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 184px; }
.section-submit { flex: 0 0 auto; padding: 9px 12px 10px; }
.section-heading {
    margin-bottom: 10px;
    font: 400 10px/1.2 "IBM Plex Mono", monospace;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    opacity: .82;
}
.meta-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) 160px;
    grid-template-areas:
        "archivist archivist archivist"
        "coordinate placeRef date"
        "visitMode visitMode visitMode";
    gap: 10px 12px;
    align-items: start;
}
.field-archivist { grid-area: archivist; }
.field-coordinate { grid-area: coordinate; }
.field-place-reference { grid-area: placeRef; }
.field-date { grid-area: date; }
.field-visit-mode { grid-area: visitMode; }
.field-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.field-label {
    font: 300 10px/1.15 "IBM Plex Mono", monospace;
    letter-spacing: 1.2px;
    opacity: .7;
}
.field-block input,
.field-block textarea,
.admin-box input {
    width: 100%;
    min-width: 0;
    border: 1.25px solid #111;
    outline: none;
    background: rgba(255,255,255,.62);
    padding: 8px 11px;
    font-size: 12px;
    transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.field-block input:focus,
.field-block textarea:focus,
.admin-box input:focus {
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
#archive-date {
    height: 38px;
    padding: 5px 7px;
}
.section-hint {
    margin: 8px 0 0;
    font: 300 10px/1.55 "IBM Plex Mono", monospace;
    letter-spacing: .2px;
    opacity: .62;
}
.record-body {
    display: grid;
    grid-template-columns: 94px minmax(0,1fr);
    gap: 14px;
    align-items: start;
    min-height: 0;
}
.attachment-box {
    width: 88px;
    height: 92px;
    border: 1.1px solid rgba(0,0,0,.42);
    clip-path: polygon(18px 0,100% 0,100% 100%,0 100%,0 18px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 13px;
    position: relative;
    background: rgba(255,255,255,.45);
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
}
.attachment-box:hover {
    background: rgba(255,255,255,.7);
    transform: translateY(-1px);
}
.attachment-box::before {
    content: "";
    position: absolute;
    left: -3px;
    top: 8px;
    width: 25px;
    height: 1px;
    background: rgba(0,0,0,.42);
    transform: rotate(-45deg);
}
.attachment-box input { display: none; }
.attachment-box small { margin-top: 2px; font: 300 11px/1 "IBM Plex Mono", monospace; opacity: .55; }
.record-fields {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    min-height: 0;
}
.field-title { flex: 0 0 auto; }
.field-description { flex: 1 1 auto; display: flex; flex-direction: column; }
 .field-title input { height: 40px; }
.field-description { min-height: 0; }
.field-description textarea {
    min-height: 40px;
    height: 40px;
    flex: 0 0 auto;
    resize: vertical;
    line-height: 1.58;
    border-top: 0;
}
.file-list {
    min-height: 12px;
    max-height: 28px;
    overflow: auto;
    padding-left: 8px;
    padding-top: 0px;
    font: 300 9px/1.45 "IBM Plex Mono", monospace;
    opacity: .58;
}
.submission-row {
    margin-top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
}
.admin-box {
    border: 1.25px solid #111;
    padding: 7px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    background: rgba(255,255,255,.38);
}
.admin-box input { width: 100%; height: 40px; }
.admin-box button,
.visitor-submit {
    border: 0;
    background: none;
    font-size: 15px;
    padding: 7px 0;
    white-space: nowrap;
}
.admin-box button {
    text-decoration: underline;
    text-underline-offset: 5px;
}
.visitor-submit {
    min-width: 146px;
    padding: 10px 16px;
    border: 1.25px solid #111;
    background: rgba(255,255,255,.76);
    text-align: center;
    letter-spacing: 1px;
    transition: background .18s ease, transform .18s ease;
}
.visitor-submit:hover {
    background: #fff;
    transform: translateY(-1px);
}
#turnstile-slot { margin-top: 8px; }
.submit-status {
    min-height: 17px;
    margin-top: 10px;
    font: 300 9px/1.5 "IBM Plex Mono", monospace;
}
.submit-status.error { color: #7f1818; }
.submit-status.success { color: #111; }
/* Confirm dialog */
.system-dialog[hidden] { display: none; }
.system-dialog {
    position: fixed;
    inset: 0;
    z-index: 100500;
    display: flex;
    align-items: center;
    justify-content: center;
}
.system-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255,255,251,.48);
}
.system-dialog-panel {
    position: relative;
    width: min(390px, calc(100vw - 40px));
    padding: 24px 28px 20px;
    background: rgba(255,255,251,.985);
    border: 1.25px solid #111;
}
.system-dialog-title {
    margin-bottom: 18px;
    font-size: 15px;
    letter-spacing: 2px;
}
.system-dialog-panel p {
    margin: 0 0 24px;
    font-size: 12px;
    line-height: 1.7;
}
.system-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 22px;
}
.system-dialog-actions button {
    border: 0;
    padding: 0;
    background: none;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Language fit */
html[lang="en"] .search-panel h1 {
    font-size: clamp(17px, 1.12vw, 20px);
    letter-spacing: .25px;
    max-width: 100%;
}
html[lang="ja"] .search-panel h1 {
    font-size: clamp(18px, 1.18vw, 21px);
    letter-spacing: .2px;
    max-width: 100%;
}
html[lang="en"] .layer-row,
html[lang="ja"] .layer-row {
    gap: clamp(34px, 3vw, 56px);
    font-size: 12.5px;
}
html[lang="en"] .tool-line,
html[lang="ja"] .tool-line {
    gap: 12px;
}
html[lang="en"] .tool-line > button,
html[lang="ja"] .tool-line > button {
    font-size: 13px;
}
html[lang="en"] .pin-tool,
html[lang="ja"] .pin-tool {
    gap: 16px;
}
html[lang="en"] .pin-tool-label,
html[lang="ja"] .pin-tool-label {
    white-space: normal;
    line-height: 1.25;
}
html[lang="en"] .dms-convert,
html[lang="ja"] .dms-convert {
    font-size: 10px;
}

html[lang="en"] .archive-form-title {
    font-size: 16px;
    letter-spacing: 1.6px;
}
html[lang="ja"] .archive-form-title {
    font-size: 16px;
    letter-spacing: 1.4px;
}
html[lang="en"] .field-label,
html[lang="ja"] .field-label,
html[lang="en"] .section-heading,
html[lang="ja"] .section-heading,
html[lang="en"] .section-hint,
html[lang="ja"] .section-hint {
    letter-spacing: .6px;
}

/* Short desktop */
@media (max-height: 820px) and (min-width: 761px) {
    :root { --form-h: 560px; }
    .search-panel { padding-top: 34px; }
    .location-tools { margin-top: 46px; }
    .panel-rule { margin-top: 40px; margin-bottom: 48px; }
    .layer-row { min-height: 35px; }
    .archive-form-shell { padding-top: 48px; padding-bottom: 18px; }
    #archive-form { gap: 10px; }
    .field-description textarea { min-height: 60px; }
}

/* Narrow desktop */
@media (max-width: 1250px) and (min-width: 761px) {
    :root { --panel-w: 300px; --form-w: min(64vw, 760px); }
    .search-panel { padding-left: 28px; padding-right: 28px; }
    .archive-form-shell { padding-left: 100px; padding-right: 22px; }
    .archive-form-title { left: 100px; }
    .meta-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 136px; gap: 10px; }
    .record-body { grid-template-columns: 84px minmax(0,1fr); gap: 12px; }
    .attachment-box { width: 78px; height: 94px; }
    .file-list { padding-left: 6px; }
    .admin-box input { width: 100%; }
    html[lang="en"] .search-panel h1 { font-size: 17px; }
    html[lang="ja"] .search-panel h1 { font-size: 18px; }
    html[lang="en"] .layer-row,
    html[lang="ja"] .layer-row { gap: 30px; font-size: 12px; }
}

/* Mobile */
@media (max-width: 760px) {
    :root { --panel-w: 100%; --form-w: 100%; --form-h: auto; }
    html, body { overflow: auto; }
    #archive-map { height: 55vh; bottom: auto; }
    #archive-crosshair { height: 55vh; bottom: auto; }
    .search-panel {
        position: relative;
        top: 55vh;
        width: 100%;
        height: auto;
        min-height: 500px;
        padding: 31px 24px 72px;
        clip-path: none;
        border-top: 1px solid #111;
    }
    .search-panel .panel-outline { display: none; }
    .location-tools { margin-top: 38px; }
    .tool-line { grid-template-columns: minmax(0,1fr) 100px; }
    .dms-panel { width: min(100%, 300px); }
    .dms-row { grid-template-columns: 24px 42px 38px 52px 34px; }
    .layer-panel { padding-left: 0; }
    .layer-row { gap: 25px; grid-template-columns: 18px 1fr; }
    .form-handle { display: none; }
    .archive-form-shell {
        position: relative;
        top: 55vh;
        width: 100%;
        height: auto;
        min-height: 560px;
        clip-path: none;
        border-top: 1px solid #111;
        padding: 58px 24px 30px;
        transform: none;
        pointer-events: auto;
    }
    .archive-form-shell .panel-outline { display: none; }
    .archive-form-title { position: relative !important; left: auto; top: auto; margin-bottom: 18px; }
    .new-record { display: none; }
    .form-section { padding: 14px 14px 15px; }
    .meta-grid { grid-template-columns: 1fr; grid-template-areas: "archivist" "coordinate" "placeRef" "date" "visitMode"; gap: 11px; }
    .record-body { grid-template-columns: 76px 1fr; gap: 12px; }
    .attachment-box { width: 72px; height: 86px; }
    .file-list { padding-left: 0; }
    .submission-row { grid-template-columns: 1fr; align-items: stretch; }
    .admin-box { justify-content: space-between; }
    .admin-box input { width: min(70%,230px); }
    .visitor-submit { width: 100%; }
}


/* Site popups */
.archive-site-popup .leaflet-popup-content-wrapper {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}
.archive-site-popup .leaflet-popup-content { margin: 0; }
.archive-site-popup .leaflet-popup-tip-container { display: none; }
.site-info-popup-content {
    min-width: 126px;
    padding: 8px 10px;
    background: rgba(255,255,251,.96);
    border-left: 1px solid rgba(0,0,0,.58);
    color: rgba(0,0,0,.82);
    pointer-events: none;
}
.site-info-name {
    margin-bottom: 4px;
    font-size: 12px;
    letter-spacing: .8px;
    white-space: nowrap;
}
.site-info-coords,
.site-info-meta {
    font: 300 8px/1.45 "IBM Plex Mono", monospace;
    letter-spacing: .25px;
    opacity: .58;
    white-space: nowrap;
}
.site-info-recorder {
    margin-top: 3px;
    opacity: .78;
}

/* Marker layer ripple */
.marker-ripple-overlay {
    position: fixed;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    pointer-events: none;
}
.marker-ripple-node {
    position: absolute;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.marker-ripple-node::before,
.marker-ripple-node::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 1px solid rgba(0,0,0,.58);
    border-radius: 50%;
    opacity: 0;
    transform: scale(.28);
    animation: archiveMarkerRipple 1.4s cubic-bezier(.16,.75,.3,1) forwards;
}
.marker-ripple-node::after {
    border-color: rgba(0,0,0,.32);
    animation-delay: .18s;
}
@keyframes archiveMarkerRipple {
    0% { transform: scale(.28); opacity: .78; }
    35% { opacity: .48; }
    100% { transform: scale(7.5); opacity: 0; }
}
.layer-row:hover .checkmark { border-color: rgba(0,0,0,.95); }

/* Compact submission controls */
.section-submit .section-heading { margin-bottom: 7px; }
.section-submit .submission-row { gap: 10px; }
.section-submit .admin-box { padding: 5px 7px; gap: 7px; }
.section-submit .admin-box input { height: 32px; padding: 5px 8px; font-size: 11px; }
.section-submit .admin-box button,
.section-submit .visitor-submit { font-size: 13px; line-height: 1.1; }
.section-submit .admin-box button { padding: 4px 0; }
.section-submit .visitor-submit { min-width: 126px; padding: 8px 12px; }
.section-submit #turnstile-slot { margin-top: 5px; }
.section-submit .submit-status { min-height: 13px; margin-top: 6px; }
@media (max-height: 820px) and (min-width: 761px) {
    .field-description textarea { min-height: 50px; height: 50px; }
    .section-record { min-height: 166px; }
    .section-submit { padding-top: 8px; padding-bottom: 8px; }
}

/* Security controls */
.form-trap {
    position: fixed !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
#turnstile-slot {
    min-height: 0;
    margin-top: 6px;
}
#turnstile-slot:empty { display: none; }
#admin-submit[disabled],
#visitor-submit[disabled] {
    opacity: .42;
    pointer-events: none;
}


/* Mobile/rotation refinement · 2026-08-16
   Desktop panel geometry above is intentionally preserved. */
.mobile-map-pick { display: none; }
.dms-panel > summary {
    list-style: none;
    cursor: crosshair;
}
.dms-panel > summary::-webkit-details-marker { display: none; }
.dms-panel > summary::after {
    content: "＋";
    float: right;
    font: 300 10px/1 "IBM Plex Mono", monospace;
    opacity: .45;
}
.dms-panel[open] > summary::after { content: "−"; }

@media (max-width: 760px) and (orientation: portrait) {
    html, body {
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }
    #archive-map {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        height: 50dvh;
        min-height: 330px;
    }
    #archive-crosshair {
        height: 50dvh;
        bottom: auto;
    }

    .search-panel {
        position: relative;
        top: auto;
        margin-top: max(50dvh, 330px);
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 30px 20px 34px;
        clip-path: none;
        border-top: 1px solid #111;
    }
    .search-panel .panel-outline { display: none; }
    .search-panel .back-link {
        left: 13px;
        top: 9px;
        font-size: 34px;
    }
    .search-panel h1 {
        max-width: calc(100% - 86px);
        font-size: 19px;
        line-height: 1.2;
    }
    .language-switcher {
        right: 18px !important;
        top: 14px !important;
        font-size: 10px !important;
    }

    .location-tools { margin-top: 32px; }
    .tool-line {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }
    .tool-line > button {
        margin-top: 10px;
        font-size: 13px;
    }
    .coord-inputs input { height: 28px; font-size: 12px; }

    .dms-panel {
        width: 100%;
        margin-top: 14px;
        padding: 9px 0 0;
    }
    .dms-heading {
        padding: 3px 2px 8px;
        margin: 0;
        font-size: 10px;
    }
    .dms-row {
        grid-template-columns: 22px minmax(40px, 1fr) minmax(40px, 1fr) minmax(52px, 1.25fr) 38px;
        width: 100%;
        gap: 5px;
    }
    .dms-cell,
    .dms-cell input,
    .dms-dir { height: 28px; }
    .dms-convert {
        margin: 5px 0 2px 27px;
        font-size: 11px;
    }
    .micro-status {
        min-height: 12px;
        margin: 8px 0 0;
        width: 100%;
    }

    /* Dragging from a lower panel back into the map is awkward on touch.
       Use a compact 'pick on map' action instead; desktop drag-pin remains intact. */
    .pin-tool { display: none !important; }
    .mobile-map-pick {
        display: inline-block;
        margin: 12px 0 0;
        padding: 7px 10px;
        border: 1px solid rgba(0,0,0,.65);
        background: rgba(255,255,251,.72);
        font-size: 12px;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .panel-rule { margin: 30px 0 26px; }
    .layer-panel {
        padding-left: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 12px;
    }
    .layer-heading {
        grid-column: 1 / -1;
        margin-bottom: 4px;
        font-size: 12px;
    }
    .layer-row {
        min-height: 34px;
        grid-template-columns: 17px minmax(0,1fr);
        gap: 10px;
        font-size: 11px;
        line-height: 1.25;
    }
    .checkmark { width: 15px; height: 15px; }

    /* Form follows the tools in document flow: no second 50vh gap. */
    .archive-form-shell {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        clip-path: none;
        border-top: 1px solid #111;
        padding: 28px 16px 34px;
        transform: none;
        pointer-events: auto;
        overflow: visible;
    }
    .archive-form-shell .panel-outline { display: none; }
    .archive-form-title {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        margin: 0 0 18px;
        font-size: 17px;
        letter-spacing: 1.8px;
    }
    .form-handle,
    .new-record { display: none !important; }
    #archive-form {
        height: auto;
        overflow: visible;
        padding-right: 0;
        gap: 12px;
    }
    .form-section { padding: 13px 12px 14px; }
    .meta-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "archivist" "coordinate" "placeRef" "date" "visitMode";
        gap: 10px;
    }
    .record-body {
        grid-template-columns: 72px minmax(0,1fr);
        gap: 12px;
    }
    .attachment-box { width: 68px; height: 82px; font-size: 11px; }
    .field-description textarea {
        min-height: 92px !important;
        height: 92px !important;
    }
    .submission-row {
        grid-template-columns: 1fr;
        gap: 9px;
    }
    .visitor-submit {
        order: -1;
        width: 100%;
        min-height: 42px;
    }
    .admin-box { opacity: .72; }
    .admin-box input { width: 100% !important; }
    #turnstile-slot { max-width: 100%; overflow: hidden; }
}

/* Rotated phones: preserve the map-led desktop composition but compress tools/forms. */
@media (max-width: 950px) and (max-height: 520px) and (orientation: landscape) {
    :root {
        --panel-w: 278px;
        --form-w: min(66vw, 620px);
        --form-h: calc(100dvh - 8px);
    }
    .search-panel {
        height: 100dvh;
        padding: 18px 18px 16px;
    }
    .search-panel .back-link { left: 10px; top: 6px; font-size: 30px; }
    .search-panel h1 { font-size: 16px !important; max-width: 190px; }
    .language-switcher { top: 8px !important; right: 14px !important; font-size: 9px !important; }
    .location-tools { margin-top: 24px; }
    .tool-line { grid-template-columns: minmax(0,1fr) 82px; gap: 8px; }
    .coord-inputs input { height: 21px; }
    .tool-line > button { margin-top: 10px; font-size: 11px !important; }
    .dms-panel,
    .pin-tool,
    .micro-status { display: none !important; }
    .mobile-map-pick { display: none !important; }
    .panel-rule { margin: 16px 0 14px; }
    .layer-panel { padding-left: 8px; }
    .layer-heading { font-size: 11px; margin-bottom: 2px; }
    .layer-row {
        min-height: 27px;
        grid-template-columns: 15px 1fr;
        gap: 18px;
        font-size: 10px !important;
    }
    .checkmark { width: 13px; height: 13px; }
    .layer-row input:checked + .checkmark::before,
    .layer-row input:checked + .checkmark::after { left: 5px; height: 12px; }

    .archive-form-shell {
        padding: 34px 16px 12px 78px;
        overflow: hidden;
    }
    .archive-form-title {
        left: 78px !important;
        top: 10px !important;
        font-size: 14px !important;
    }
    #archive-form { gap: 6px; }
    .form-section { padding: 8px 9px 9px; }
    .section-heading { margin-bottom: 5px; font-size: 8px; }
    .meta-grid {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) 118px;
        gap: 5px 7px;
    }
    .field-block { gap: 3px; }
    .field-label { font-size: 8px; }
    .field-block input,
    .field-block textarea,
    .admin-box input { padding: 5px 7px; font-size: 10px; }
    #archive-date { height: 31px; }
    .section-hint { display: none; }
    .section-record { min-height: 120px; }
    .record-body { grid-template-columns: 64px minmax(0,1fr); gap: 8px; }
    .attachment-box { width: 60px; height: 65px; font-size: 9px; }
    .field-title input { height: 31px; }
    .field-description textarea { min-height: 45px !important; height: 45px !important; }
    .file-list { max-height: 18px; font-size: 7px; }
    .section-submit { padding: 6px 8px; }
    .submission-row { gap: 7px; }
    .section-submit .admin-box input { height: 28px; }
    .section-submit .visitor-submit { min-width: 105px; padding: 6px 8px; font-size: 11px; }
    #turnstile-slot { transform: scale(.78); transform-origin: left top; }
}


/* v13 · Two-column archive marker filters */
.layer-panel{display:block}.layer-columns{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(112px,.82fr);column-gap:clamp(18px,2.2vw,34px);align-items:start}.layer-column{min-width:0}.layer-origin-column{min-height:100%;padding-left:clamp(14px,1.6vw,24px);border-left:1px solid rgba(0,0,0,.18);opacity:1;transition:opacity .2s ease}.layer-origin-column .layer-row{gap:clamp(16px,1.7vw,28px)}.layer-origin-column.is-disabled{opacity:.28}.layer-origin-column.is-disabled .layer-row{cursor:not-allowed!important}.layer-origin-column.is-disabled .checkmark{border-color:rgba(0,0,0,.48)}.layer-origin-row input:disabled~span{pointer-events:none}
@media(max-width:768px){.layer-panel{display:block!important;padding-left:0!important}.layer-columns{grid-template-columns:minmax(0,1.15fr) minmax(100px,.85fr);column-gap:10px}.layer-origin-column{padding-left:10px}.layer-primary-column .layer-row,.layer-origin-column .layer-row{min-height:34px;grid-template-columns:17px minmax(0,1fr);gap:9px;font-size:11px}}
@media(max-width:480px){.layer-columns{column-gap:7px}.layer-origin-column{padding-left:7px}.layer-primary-column .layer-row,.layer-origin-column .layer-row{min-height:27px;grid-template-columns:15px minmax(0,1fr);gap:7px;font-size:10px!important}}

/* v15 · Hierarchical marker layers + quieter staggered ripple */
.layer-panel {
    display: block !important;
    padding-left: clamp(20px, 2.2vw, 36px) !important;
}
.layer-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}
.layer-list > .layer-row,
.layer-group > .layer-parent-row {
    width: 100%;
}
.layer-row {
    display: grid !important;
    grid-template-columns: 16px minmax(0, 1fr) !important;
    align-items: center;
    gap: 14px !important;
    min-height: 34px !important;
    width: 100%;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap !important;
}
.layer-label-text {
    display: block;
    min-width: 0;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
}
.layer-group {
    position: relative;
    width: 100%;
}
.layer-parent-row {
    font-weight: 400;
}
.layer-children {
    position: relative;
    margin: -1px 0 3px 7px;
    padding-left: 28px;
    opacity: 1;
    transition: opacity .18s ease;
}
.layer-children::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 15px;
    width: 1px;
    background: rgba(0,0,0,.24);
}
.layer-child-row {
    position: relative;
    min-height: 27px !important;
    grid-template-columns: 14px minmax(0, 1fr) !important;
    gap: 11px !important;
    font-size: 10.5px !important;
    font-family: "IBM Plex Mono", monospace;
    opacity: .72;
}
.layer-child-row::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 50%;
    width: 13px;
    height: 1px;
    background: rgba(0,0,0,.24);
}
.layer-child-row .checkmark {
    width: 13px;
    height: 13px;
    border-width: 1px;
}
.layer-child-row input:checked + .checkmark::before,
.layer-child-row input:checked + .checkmark::after {
    left: 5px;
    top: 0;
    width: 1px;
    height: 12px;
}
.layer-group.is-disabled .layer-children {
    opacity: .24;
    pointer-events: none;
}
.layer-group.is-disabled .layer-child-row {
    cursor: not-allowed !important;
}
.layer-group.is-disabled .layer-child-row .checkmark {
    border-color: rgba(0,0,0,.46);
}

/* One thin sonar ring per site. Starts are shuffled/staggered in JS. */
.marker-ripple-node {
    position: absolute;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.marker-ripple-node::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,.34);
    border-radius: 50%;
    opacity: 0;
    transform: scale(.35);
    animation: archiveMarkerRippleV15 var(--ripple-duration, 1950ms) cubic-bezier(.14,.68,.22,1) forwards;
}
.marker-ripple-node::after { content: none !important; animation: none !important; }
@keyframes archiveMarkerRippleV15 {
    0%   { transform: scale(.35); opacity: .34; }
    18%  { opacity: .26; }
    58%  { opacity: .12; }
    100% { transform: scale(var(--ripple-scale, 13)); opacity: 0; }
}

/* Remove v13 two-column assumptions completely. */
.layer-columns,
.layer-column,
.layer-origin-column { display: contents; }

@media (max-width: 760px) {
    .layer-panel {
        display: block !important;
        padding-left: 0 !important;
    }
    .layer-row {
        min-height: 31px !important;
        grid-template-columns: 15px minmax(0,1fr) !important;
        gap: 11px !important;
        font-size: 11px !important;
    }
    .layer-children {
        margin-left: 6px;
        padding-left: 24px;
    }
    .layer-child-row {
        min-height: 25px !important;
        grid-template-columns: 13px minmax(0,1fr) !important;
        gap: 9px !important;
        font-size: 10px !important;
    }
    .layer-child-row::before { left: -17px; width: 11px; }
}

@media (max-width: 950px) and (max-height: 520px) and (orientation: landscape) {
    .layer-panel { padding-left: 8px !important; }
    .layer-row {
        min-height: 25px !important;
        grid-template-columns: 13px minmax(0,1fr) !important;
        gap: 9px !important;
        font-size: 10px !important;
    }
    .layer-children {
        margin-left: 5px;
        padding-left: 20px;
    }
    .layer-child-row {
        min-height: 21px !important;
        grid-template-columns: 11px minmax(0,1fr) !important;
        gap: 8px !important;
        font-size: 9px !important;
    }
    .layer-child-row .checkmark { width: 11px; height: 11px; }
    .layer-child-row input:checked + .checkmark::before,
    .layer-child-row input:checked + .checkmark::after { left: 4px; height: 10px; }
}


/* v21 · Shared visit-mode filter for both archive libraries */
.layer-record-group {
    position: relative;
}
.layer-record-group > .layer-parent-row + .layer-parent-row {
    margin-top: 0;
}
.layer-shared-children {
    margin-top: 1px;
    margin-bottom: 4px;
}
.layer-record-group.is-disabled .layer-shared-children {
    opacity: .24;
    pointer-events: none;
}
.layer-record-group.is-disabled .layer-shared-children .layer-child-row {
    cursor: not-allowed !important;
}
.layer-record-group:not(.is-disabled) .layer-shared-children {
    opacity: 1;
    pointer-events: auto;
}


/* v22 · Compact layer stack + diamond selection state */
/* Pull the layer controls upward without compressing the labels. */
.panel-rule {
    margin-top: clamp(32px, 4.4vh, 44px) !important;
    margin-bottom: 22px !important;
}
.layer-panel {
    padding-left: clamp(18px, 2vw, 32px) !important;
}
.layer-heading {
    margin-bottom: 5px !important;
}
.layer-row {
    min-height: 31px !important;
}
.layer-shared-children {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}
.layer-child-row {
    min-height: 24px !important;
}

/* Checked = a solid 45-degree square, not an X. */
.layer-row input:checked + .checkmark::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 8px !important;
    height: 8px !important;
    background: #111 !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
    transform-origin: center !important;
}
.layer-row input:checked + .checkmark::after {
    content: none !important;
    display: none !important;
}
.layer-child-row input:checked + .checkmark::before {
    width: 6px !important;
    height: 6px !important;
}

@media (max-width: 760px) {
    .panel-rule { margin-top: 24px !important; margin-bottom: 15px !important; }
    .layer-row { min-height: 28px !important; }
    .layer-child-row { min-height: 22px !important; }
}
@media (max-width: 950px) and (max-height: 520px) and (orientation: landscape) {
    .panel-rule { margin-top: 16px !important; margin-bottom: 10px !important; }
    .layer-row { min-height: 23px !important; }
    .layer-child-row { min-height: 19px !important; }
}


/* v26 · encounter type */
.visit-mode-options {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 28px;
    padding-top: 1px;
}
.visit-mode-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 300 11px/1.2 "IBM Plex Mono", monospace;
    letter-spacing: .35px;
    cursor: crosshair;
    white-space: nowrap;
}
.visit-mode-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.visit-mode-mark {
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border: 1.2px solid #111;
    position: relative;
    flex: 0 0 14px;
    background: rgba(255,255,255,.6);
}
.visit-mode-option input:checked + .visit-mode-mark::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    left: 50%;
    top: 50%;
    background: #111;
    transform: translate(-50%,-50%) rotate(45deg);
}
.visit-mode-option:hover .visit-mode-mark {
    background: #fff;
}
@media (max-width: 760px) {
    .visit-mode-options { gap: 14px; flex-wrap: wrap; }
}


/* ==========================================================================\n   v44 · Real-world locator (OpenStreetMap)\n   Separate EPSG:3857 map used as a measuring / geolocation instrument only.\n   ========================================================================== */
.coord-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    margin-top: 10px;
}
.coord-actions button {
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font: 300 13px/1.25 "IBM Plex Sans JP", sans-serif;
    text-decoration: underline;
    text-underline-offset: 5px;
    white-space: nowrap;
}
.coord-actions .real-map-open {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    opacity: .66;
}
.coord-actions .real-map-open:hover { opacity: 1; }
.real-map-open-glyph { font: 300 15px/1 "IBM Plex Mono", monospace; text-decoration: none; }

body.real-map-opened { overflow: hidden; }
.real-map-locator {
    position: fixed;
    inset: 0;
    z-index: 150000;
    font-family: "IBM Plex Sans JP", sans-serif;
    color: #151515;
}
.real-map-locator[hidden] { display: none !important; }
.real-map-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(247,247,242,.50);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.real-map-shell {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(980px, 76vw);
    height: min(720px, 78vh);
    min-height: 480px;
    display: grid;
    grid-template-rows: auto auto minmax(0,1fr) auto;
    background: rgba(255,255,251,.94);
    border: 1px solid rgba(15,15,15,.72);
    box-shadow: 0 18px 55px rgba(0,0,0,.10);
    overflow: hidden;
}
.real-map-topbar {
    min-height: 50px;
    padding: 15px 18px 10px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0,0,0,.25);
}
.real-map-heading {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: .45px;
}
.real-map-source {
    font: 300 9px/1 "IBM Plex Mono", monospace;
    letter-spacing: 1.2px;
    opacity: .42;
}
.real-map-close {
    border: 0;
    background: none;
    padding: 0 2px;
    font: 300 22px/1 "IBM Plex Mono", monospace;
    opacity: .46;
}
.real-map-close:hover { opacity: 1; }
.real-map-search-row {
    position: relative;
    z-index: 9;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(0,0,0,.18);
    background: rgba(255,255,251,.92);
}
.real-map-search-row input {
    min-width: 0;
    height: 31px;
    padding: 3px 9px;
    border: 1px solid rgba(0,0,0,.62);
    border-radius: 0;
    outline: none;
    background: rgba(255,255,255,.7);
    font: 300 11px/1 "IBM Plex Mono", monospace;
}
.real-map-search-row input:focus { border-color: #111; background: #fff; }
.real-map-search-row button {
    min-width: 62px;
    border: 1px solid #111;
    border-radius: 0;
    background: rgba(255,255,251,.82);
    padding: 0 12px;
    font: 300 11px/1 "IBM Plex Sans JP", sans-serif;
}
.real-map-search-row button:hover { background: #111; color: #fff; }
.real-map-search-row button:disabled { opacity: .34; pointer-events: none; }
.real-map-search-results {
    position: absolute;
    z-index: 20;
    top: 96px;
    left: 18px;
    right: 18px;
    max-height: min(250px, 36vh);
    overflow: auto;
    background: rgba(255,255,251,.98);
    border: 1px solid rgba(0,0,0,.62);
    box-shadow: 0 14px 28px rgba(0,0,0,.09);
}
.real-map-search-results[hidden] { display: none; }
.real-map-result {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 16px;
    align-items: baseline;
    padding: 9px 11px;
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,.15);
    border-radius: 0;
    background: transparent;
    text-align: left;
}
.real-map-result:last-child { border-bottom: 0; }
.real-map-result:hover { background: rgba(0,0,0,.055); }
.real-map-result-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 300;
}
.real-map-result-type {
    font: 300 8px/1 "IBM Plex Mono", monospace;
    opacity: .38;
    white-space: nowrap;
}
.real-map-canvas-wrap { position: relative; min-height: 0; overflow: hidden; background: #e8e8e2; }
#real-map { position: absolute; inset: 0; background: #e8e8e2; }
#real-map .leaflet-tile { filter: saturate(.70) contrast(.93) brightness(1.04); }
#real-map .leaflet-control-attribution {
    margin: 0 5px 4px 0 !important;
    padding: 2px 4px !important;
    background: rgba(255,255,251,.78) !important;
    font: 300 8px/1.15 "IBM Plex Mono", monospace !important;
    color: rgba(0,0,0,.62) !important;
}
#real-map .leaflet-control-attribution a { color: inherit; text-decoration: underline; }
.real-map-reticle {
    position: absolute;
    z-index: 600;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 28px;
    transform: translate(-50%,-50%);
    pointer-events: none;
    opacity: .30;
}
.real-map-reticle::before,
.real-map-reticle::after {
    content: "";
    position: absolute;
    background: #111;
}
.real-map-reticle::before { left: 0; right: 0; top: 13.5px; height: 1px; }
.real-map-reticle::after { top: 0; bottom: 0; left: 13.5px; width: 1px; }
.real-map-reticle span {
    position: absolute;
    left: 10px; top: 10px;
    width: 8px; height: 8px;
    border: 1px solid #111;
    border-radius: 50%;
}
.real-map-tools {
    position: absolute;
    z-index: 700;
    left: 14px;
    top: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.real-map-tools button {
    height: 31px;
    min-width: 31px;
    border: 1px solid rgba(0,0,0,.72);
    border-radius: 0;
    background: rgba(255,255,251,.88);
    padding: 0 8px;
    font: 300 15px/1 "IBM Plex Mono", monospace;
}
.real-map-tools button:hover { background: #fff; }
.real-map-tools .real-map-geolocate {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 300 9px/1 "IBM Plex Sans JP", sans-serif;
}
.real-map-geolocate-glyph { font: 300 14px/1 "IBM Plex Mono", monospace; }
.real-map-footer {
    min-height: 70px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 11px 18px 12px 20px;
    border-top: 1px solid rgba(0,0,0,.30);
    background: rgba(255,255,251,.96);
}
.real-map-coordinate-line {
    display: flex;
    align-items: baseline;
    gap: 15px;
    font: 300 9px/1.2 "IBM Plex Mono", monospace;
    opacity: .72;
}
.real-map-coordinate-line output { font-size: 11px; color: #111; }
.real-map-status {
    min-height: 14px;
    margin-top: 6px;
    max-width: 620px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 300 9px/1.2 "IBM Plex Sans JP", sans-serif;
    opacity: .48;
}
.real-map-use {
    height: 34px;
    padding: 0 15px;
    border: 1px solid #111;
    border-radius: 0;
    background: transparent;
    font: 300 11px/1 "IBM Plex Sans JP", sans-serif;
    white-space: nowrap;
}
.real-map-use:hover:not(:disabled) { background: #111; color: #fff; }
.real-map-use:disabled { opacity: .25; }
.real-locator-marker { background: transparent !important; border: 0 !important; }
.real-locator-marker-sphere {
    position: absolute;
    left: 4px; top: 1px;
    width: 16px; height: 16px;
    border: 1.2px solid #111;
    border-radius: 50%;
    background: rgba(255,255,251,.94);
    box-shadow: 1px 2px 3px rgba(0,0,0,.18);
}
.real-locator-marker-sphere::after {
    content: "";
    position: absolute;
    left: 4px; top: 3px;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
}
.real-locator-marker-stem {
    position: absolute;
    left: 11.5px; top: 17px;
    width: 1px; height: 15px;
    background: #111;
}
.real-locator-marker-point {
    position: absolute;
    left: 8px; top: 28px;
    width: 7px; height: 7px;
    border-left: 1px solid #111;
    border-bottom: 1px solid #111;
    transform: rotate(-45deg);
    background: #111;
}

@media (max-width: 760px) {
    .coord-actions { gap: 8px; margin-top: 7px; }
    .coord-actions button { font-size: 10px; }
    .real-map-shell {
        left: 0;
        top: 0;
        transform: none;
        width: 100vw;
        height: 100dvh;
        min-height: 0;
        border: 0;
    }
    .real-map-topbar { min-height: 44px; padding: 12px 12px 8px 14px; }
    .real-map-heading { font-size: 14px; }
    .real-map-search-row { padding: 9px 10px; gap: 7px; }
    .real-map-search-results { top: 86px; left: 10px; right: 10px; max-height: 32vh; }
    .real-map-footer { min-height: 82px; padding: 9px 10px 12px 12px; gap: 10px; }
    .real-map-coordinate-line { gap: 8px; }
    .real-map-coordinate-line output { font-size: 9px; }
    .real-map-status { max-width: 55vw; font-size: 8px; }
    .real-map-use { padding: 0 10px; font-size: 9px; }
    .real-map-tools { left: 9px; top: 9px; }
    .real-map-tools .real-map-geolocate span:last-child { display: none; }
}


/* ==========================================================================\n   v45 · Locator-first coordinate layout\n   The real-world locator is promoted above manual coordinate entry.\n   ========================================================================== */
.real-map-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0 0 19px;
    padding: 10px 11px 11px;
    border: 1px solid rgba(17,17,17,.78);
    background: rgba(255,255,251,.55);
}
.real-map-entry-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.real-map-entry-title {
    font: 300 14px/1.2 "IBM Plex Sans JP", sans-serif;
    letter-spacing: .35px;
    color: #111;
}
.real-map-entry-hint {
    display: block;
    max-width: 205px;
    font: 300 8.5px/1.45 "IBM Plex Sans JP", sans-serif;
    letter-spacing: .2px;
    opacity: .56;
}
.real-map-entry .real-map-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 62px;
    min-height: 29px;
    padding: 4px 8px;
    border: 1px solid #111;
    background: rgba(255,255,255,.45);
    font: 300 10px/1 "IBM Plex Sans JP", sans-serif;
    text-decoration: none;
    white-space: nowrap;
}
.real-map-entry .real-map-open:hover {
    background: #111;
    color: #fff;
}
.real-map-entry .real-map-open:hover .real-map-open-glyph { color: inherit; }
.coord-actions {
    justify-content: flex-start;
    margin-top: 10px;
}
.coord-actions .real-map-open { display: none; }

@media (max-width: 760px) {
    .real-map-entry {
        margin-bottom: 16px;
        padding: 11px 12px;
        gap: 10px;
    }
    .real-map-entry-title { font-size: 13px; }
    .real-map-entry-hint { max-width: none; font-size: 9px; }
    .real-map-entry .real-map-open { min-width: 66px; min-height: 31px; }
}

@media (max-width: 950px) and (max-height: 520px) and (orientation: landscape) {
    .real-map-entry {
        margin-bottom: 9px;
        padding: 7px 8px;
        gap: 8px;
    }
    .real-map-entry-title { font-size: 11px; }
    .real-map-entry-hint { display: none; }
    .real-map-entry .real-map-open { min-width: 52px; min-height: 24px; font-size: 9px; }
}


/* ==========================================================================
   v46 · Clearer left-side tool layout
   Reflow coordinate tools to avoid bottom compression and keep all controls
   readable inside the clipped left rail.
   ========================================================================== */
.search-panel {
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.24) transparent;
}
.search-panel::-webkit-scrollbar { width: 8px; }
.search-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); }
.search-panel::-webkit-scrollbar-track { background: transparent; }

.location-tools {
    margin-top: clamp(42px, 6.2vh, 56px);
    padding-bottom: clamp(84px, 12vh, 120px);
}
.tool-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tool-card {
    width: calc(100% - 4px);
    padding: 11px 10px 12px;
    border: 1px solid rgba(17,17,17,.34);
    background: rgba(255,255,251,.38);
}
.real-map-entry {
    margin: 0;
}
.tool-card-coord {
    padding: 12px 10px;
}
.tool-line.coord-line {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
.coord-inputs {
    gap: 6px;
    padding-right: 0;
}
.coord-inputs::before { display: none; }
.coord-inputs input {
    height: 28px;
    padding: 2px 8px;
}
.coord-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0;
}
.coord-actions button {
    margin-top: 0;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid #111;
    background: rgba(255,255,255,.52);
    text-decoration: none;
    font-size: 12px;
}
.coord-actions button:hover {
    background: #111;
    color: #fff;
}
.dms-panel.tool-card {
    margin-top: 0;
    padding: 10px 10px 12px;
    border-top: 0;
}
.dms-panel.tool-card > summary {
    margin-bottom: 10px;
}
.dms-heading {
    margin-bottom: 0;
}
.dms-row {
    grid-template-columns: 22px 42px 42px 58px 36px;
    gap: 5px;
    margin-bottom: 6px;
}
.dms-convert {
    margin: 8px 0 0 26px;
}
.micro-status {
    width: 100%;
    min-height: 14px;
    margin: 10px 0 0 2px;
}
.tool-card-pin {
    padding: 10px;
}
.pin-tool {
    gap: 14px;
    margin: 0;
}
.pin-tool-label {
    white-space: normal;
    line-height: 1.45;
}
.panel-rule {
    margin: 22px 0 18px;
}
.layer-panel {
    padding-left: 0;
}
.layer-heading {
    margin-bottom: 10px;
}
.layer-row {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 12px;
    min-height: 32px;
}

@media (max-height: 840px) {
    .location-tools {
        margin-top: 38px;
        padding-bottom: 92px;
    }
    .tool-stack { gap: 10px; }
    .tool-card,
    .dms-panel.tool-card {
        padding-top: 9px;
        padding-bottom: 10px;
    }
    .panel-rule { margin: 18px 0 14px; }
    .layer-row { min-height: 28px; }
}

@media (max-width: 760px) {
    .location-tools {
        padding-bottom: 40px;
    }
    .tool-stack { gap: 10px; }
    .tool-card,
    .dms-panel.tool-card {
        width: min(100%, 300px);
    }
    .coord-actions { justify-content: flex-start; }
    .coord-actions button { font-size: 11px; }
    .dms-row {
        grid-template-columns: 22px 44px 40px 54px 36px;
    }
    .pin-tool { gap: 10px; }
}


/* ==========================================================================\n   v47 · Single coordinate-mode layout\n   Only one coordinate system is visible at a time; the drag marker is reduced\n   to a compact instrument control. The left rail no longer needs scrolling.\n   ========================================================================== */
.search-panel {
    overflow: hidden !important;
    scrollbar-width: none;
}
.search-panel::-webkit-scrollbar { display: none; }
.location-tools {
    margin-top: clamp(34px, 4.6vh, 44px) !important;
    padding-bottom: 0 !important;
}
.tool-stack { gap: 8px !important; }
.real-map-entry {
    min-height: 58px;
    padding: 8px 9px !important;
    margin: 0 !important;
}
.real-map-entry-title { font-size: 13px; }
.real-map-entry-hint {
    max-width: 175px;
    font-size: 8px;
    line-height: 1.3;
}
.real-map-entry .real-map-open {
    min-width: 54px;
    min-height: 26px;
    padding: 3px 7px;
}
.coordinate-mode-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 25px;
    padding: 1px 2px 2px;
    border-bottom: 1px solid rgba(0,0,0,.22);
}
.coordinate-mode-label {
    font: 300 9px/1 "IBM Plex Mono", monospace;
    letter-spacing: .45px;
    opacity: .48;
}
.coordinate-mode-options {
    display: flex;
    align-items: center;
    gap: 5px;
}
.coordinate-mode-button {
    border: 0;
    padding: 2px 1px 3px;
    background: none;
    font: 300 10px/1 "IBM Plex Sans JP", sans-serif;
    opacity: .44;
}
.coordinate-mode-button.active {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.coordinate-mode-separator {
    font: 300 9px/1 "IBM Plex Mono", monospace;
    opacity: .24;
}
.coordinate-mode-panel {
    width: 100%;
    padding: 8px 8px 9px;
    border: 1px solid rgba(17,17,17,.34);
    background: rgba(255,255,251,.30);
}
.coordinate-mode-panel[hidden] { display: none !important; }
.coord-compact-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    align-items: end;
}
.coord-compact-row .coord-inputs {
    gap: 4px;
    padding: 0;
}
.coord-compact-row .coord-inputs::before { display: none; }
.coord-compact-row .coord-inputs input {
    height: 24px;
    padding: 1px 6px;
    font-size: 10px;
}
.compact-mark-button {
    min-height: 24px;
    padding: 3px 7px;
    border: 1px solid #111;
    background: transparent;
    font: 300 10px/1 "IBM Plex Sans JP", sans-serif;
    white-space: nowrap;
}
.compact-mark-button:hover { background: #111; color: #fff; }
.dms-compact-grid { width: 100%; }
.coordinate-mode-panel .dms-row {
    grid-template-columns: 18px 37px 37px 53px 33px;
    gap: 4px;
    margin-bottom: 4px;
}
.coordinate-mode-panel .dms-row:last-child { margin-bottom: 0; }
.coordinate-mode-panel .dms-cell,
.coordinate-mode-panel .dms-cell input,
.coordinate-mode-panel .dms-dir {
    height: 22px;
}
.coordinate-mode-panel .dms-cell input {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 9px;
}
.coordinate-mode-panel .dms-dir { font-size: 9px; }
.dms-mark-button {
    display: block;
    margin: 7px 0 0 auto;
}
.compact-status {
    min-height: 12px !important;
    margin: 1px 2px 0 !important;
    font-size: 8px !important;
    line-height: 1.25 !important;
}
.pin-tool-compact {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    padding: 2px 3px;
}
.drag-location-pin.compact-pin {
    width: 26px;
    height: 27px;
    min-width: 26px;
    padding: 0;
    border: 1px solid rgba(0,0,0,.56);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,251,.3);
}
.drag-location-pin.compact-pin svg {
    width: 13px;
    height: 19px;
}
.pin-tool-compact .pin-tool-label {
    font-size: 10px;
    opacity: .58;
    line-height: 1;
}
.panel-rule {
    margin: 10px 0 10px !important;
}
.layer-panel { padding-left: 2px !important; }
.layer-heading { margin-bottom: 5px !important; font-size: 11px !important; }
.layer-row {
    min-height: 25px !important;
    grid-template-columns: 16px minmax(0,1fr) !important;
    gap: 9px !important;
    font-size: 10px !important;
}
.checkmark { width: 14px; height: 14px; }
.layer-row input:checked + .checkmark::before,
.layer-row input:checked + .checkmark::after {
    left: 5px;
    height: 13px;
}
.layer-children { margin-top: 1px !important; }

@media (max-height: 780px) and (min-width: 761px) {
    .location-tools { margin-top: 29px !important; }
    .real-map-entry { min-height: 51px; padding: 6px 8px !important; }
    .real-map-entry-hint { display: none; }
    .tool-stack { gap: 6px !important; }
    .coordinate-mode-panel { padding-top: 6px; padding-bottom: 7px; }
    .panel-rule { margin: 7px 0 !important; }
    .layer-row { min-height: 22px !important; }
}

@media (max-width: 760px) {
    .search-panel { overflow-y: auto !important; }
    .coordinate-mode-panel { width: min(100%, 300px); }
    .coord-compact-row { grid-template-columns: minmax(0,1fr); }
    .compact-mark-button { justify-self: start; }
}

/* Keep the drag ghost visually consistent with the reduced compact pin. */
.pin-drag-ghost {
    width: 20px !important;
    height: 27px !important;
    margin: -20px 0 0 -10px !important;
}
.pin-drag-ghost svg {
    width: 13px !important;
    height: 19px !important;
}


/* v60 · Quiet contributor wall. Generated from guest recorder metadata. */
.contributors-wall {
    position: absolute !important;
    left: clamp(28px, 2.4vw, 40px);
    bottom: clamp(20px, 3.2vh, 34px);
    width: min(58%, 250px);
    z-index: 2;
    color: #111;
    opacity: .46;
    transition: opacity .18s ease;
}
.contributors-wall:hover,
.contributors-wall:focus-within { opacity: .9; }
.contributors-wall::before {
    content: "";
    display: block;
    width: 34px;
    border-top: 1px solid rgba(0,0,0,.4);
    margin-bottom: 6px;
}
.contributors-wall-label {
    margin-bottom: 5px;
    font: 300 7px/1.2 "IBM Plex Mono", monospace;
    letter-spacing: 1.05px;
    text-transform: uppercase;
    white-space: nowrap;
}
.contributors-wall-names {
    font: 300 9px/1.55 "IBM Plex Mono", "IBM Plex Sans JP", monospace;
    letter-spacing: .28px;
    overflow-wrap: anywhere;
}
@media (max-height: 680px) and (min-width: 761px) {
    .contributors-wall { bottom: 9px; width: 54%; opacity: .38; }
    .contributors-wall-label { font-size: 6px; margin-bottom: 3px; }
    .contributors-wall-names { font-size: 7px; line-height: 1.35; }
}
@media (max-width: 760px) and (orientation: portrait) {
    .contributors-wall {
        position: relative !important;
        left: auto;
        bottom: auto;
        width: 100%;
        margin: 24px 0 0;
        padding-top: 2px;
        opacity: .5;
    }
    .contributors-wall::before { width: 28px; }
    .contributors-wall-names { max-width: 88%; }
}
@media (max-width: 950px) and (max-height: 520px) and (orientation: landscape) {
    .contributors-wall { display: none; }
}


/* ==========================================================================
   v61 · Simplified-Chinese font normalization
   archive-system.js sets the Chinese locale to zh-Hans, so this page now uses
   the same SC glyph set consistently instead of falling through Sans JP.
   ========================================================================== */
html[lang^="zh"] {
  font-synthesis: none;
}

html[lang^="zh"] body,
html[lang^="zh"] button,
html[lang^="zh"] input,
html[lang^="zh"] textarea,
html[lang^="zh"] select,
html[lang^="zh"] summary,
html[lang^="zh"] .leaflet-container,
html[lang^="zh"] .leaflet-popup,
html[lang^="zh"] .leaflet-popup-content,
html[lang^="zh"] .real-map-locator {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-synthesis: none !important;
  -webkit-font-smoothing: antialiased;
}

/* Keep the intentionally monospaced child rows, with a proper SC fallback. */
html[lang^="zh"] .layer-child-row {
  font-family: "IBM Plex Mono", "Noto Sans SC", "PingFang SC", monospace !important;
  font-synthesis: none !important;
}