:root {
  --forest-950: #0b1915;
  --forest-900: #10231d;
  --forest-800: #17372e;
  --forest-700: #275044;
  --moss: #69806c;
  --paper: #f0ead9;
  --paper-2: #e5ddca;
  --ink: #18231f;
  --muted: #758079;
  --gold: #d3a356;
  --rust: #a65f3d;
  --line: rgba(233, 226, 207, .16);
  --shadow: 0 24px 70px rgba(6, 17, 13, .34);
  --sans: 'Noto Sans JP', sans-serif;
  --serif: 'Shippori Mincho', serif;
  --mono: 'DM Mono', monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--forest-950); color: var(--paper); font-family: var(--sans); overflow: hidden; }
.demo-ribbon { position: fixed; z-index: 100; right: 18px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid rgba(240,234,217,.25); background: rgba(11,25,21,.92); box-shadow: 0 8px 28px rgba(0,0,0,.22); color: #d7d1bf; font-size: 9px; backdrop-filter: blur(10px); }
.demo-ribbon strong { color: var(--gold); font: 500 9px var(--mono); letter-spacing: .12em; }
@media (max-width: 600px) { .demo-ribbon { left: 8px; right: 8px; bottom: 8px; justify-content: center; } .demo-ribbon span { display: none; } }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.app-shell { height: 100vh; min-height: 640px; display: flex; flex-direction: column; background: radial-gradient(circle at 8% 2%, rgba(87, 121, 99, .15), transparent 25%), var(--forest-950); }
.topbar { height: 58px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 34px; border-bottom: 1px solid var(--line); }
.brand { color: var(--paper); text-decoration: none; display: flex; align-items: center; gap: 11px; font: 500 13px/1 var(--mono); letter-spacing: .18em; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(237, 231, 214, .5); border-radius: 50%; color: var(--gold); font-size: 17px; }
.topbar-meta { display: flex; align-items: center; gap: 15px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #7aa67e; box-shadow: 0 0 0 4px rgba(122, 166, 126, .12); }
.avatar { width: 31px; height: 31px; border: 1px solid rgba(239, 233, 216, .35); border-radius: 50%; background: #274a3e; color: var(--paper); font: 10px var(--mono); }

.workspace { min-height: 0; flex: 1; display: flex; flex-direction: column; padding: 0 30px 24px; }
.atlas-head { min-height: 137px; display: flex; justify-content: space-between; align-items: center; padding: 22px 3px 17px; }
.eyebrow { display: flex; align-items: center; gap: 13px; margin: 0 0 8px; color: #87978d; font: 10px var(--mono); letter-spacing: .17em; text-transform: uppercase; }
.eyebrow::before { content: ''; width: 23px; height: 1px; background: var(--gold); }
.atlas-code { padding-left: 13px; border-left: 1px solid rgba(238, 231, 211, .18); }
h1, h2, h3, p { margin-top: 0; }
.atlas-identity h1 { margin: 0; font: 700 clamp(27px, 2.3vw, 38px)/1.25 var(--serif); letter-spacing: .03em; }
.record-total { margin: 7px 0 0; color: #96a39a; font: 10px var(--mono); letter-spacing: .04em; }
.record-total strong { color: var(--gold); font-weight: 500; }.record-total span { padding: 0 7px; opacity: .4; }
.atlas-actions { display: flex; align-items: center; gap: 13px; }
.view-switch { padding: 4px; display: flex; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.view-tab { border: 0; padding: 11px 18px; background: transparent; color: #88978d; font: 11px var(--mono); letter-spacing: .08em; }
.view-tab span { font-size: 15px; vertical-align: -1px; margin-right: 5px; }
.view-tab.is-active { color: var(--forest-900); background: var(--paper); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.primary-button { min-height: 46px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; border: 1px solid var(--gold); background: var(--gold); color: var(--forest-900); font: 600 11px var(--mono); letter-spacing: .08em; transition: .2s; }
.primary-button:hover { background: #e1b76e; transform: translateY(-1px); }
.primary-button > span:first-child { font-size: 18px; font-weight: 400; }

.toolbar { min-height: 60px; flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 8px; background: rgba(17, 42, 34, .85); border: 1px solid var(--line); border-bottom: 0; }
.search-box { width: min(470px, 48vw); height: 43px; display: flex; align-items: center; gap: 11px; padding: 0 14px; border: 1px solid rgba(237, 230, 210, .14); background: rgba(4, 14, 10, .22); }
.search-box > span { font-size: 23px; transform: rotate(-18deg); color: #9bab9f; }
.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--paper); font-size: 12px; }
.search-box input::placeholder { color: #75847a; }
kbd { border: 1px solid rgba(233, 226, 207, .15); padding: 3px 6px; color: #7d8d82; font: 9px var(--mono); }
.toolbar-buttons { display: flex; gap: 7px; }
.tool-button { min-height: 42px; padding: 0 14px; border: 1px solid rgba(238, 231, 211, .15); background: rgba(255,255,255,.025); color: #c3ccc5; font: 10px var(--mono); letter-spacing: .08em; position: relative; }
.tool-button:hover { border-color: rgba(238, 231, 211, .35); color: white; }.tool-button span { color: var(--gold); margin-right: 7px; font-size: 14px; }
.filter-badge { position: absolute; right: -6px; top: -7px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--rust); color: white; font-size: 9px; }

.content-stage { min-height: 0; flex: 1; position: relative; overflow: hidden; border: 1px solid var(--line); }
.view-panel { width: 100%; height: 100%; animation: fade .25s both; }
@keyframes fade { from { opacity: .2; } to { opacity: 1; } }
#map { width: 100%; height: 100%; background: #b9bdad; }
.maplibregl-map { font-family: var(--sans); }
.maplibregl-canvas { filter: sepia(.16) saturate(.7) contrast(.94) brightness(.83); }
.maplibregl-ctrl-group { border-radius: 0 !important; box-shadow: none !important; background: rgba(239, 234, 218, .91) !important; }
.maplibregl-ctrl-group button { width: 32px; height: 32px; }
.maplibregl-ctrl-scale { border-color: rgba(239,234,218,.7) !important; background: rgba(15,35,29,.7) !important; color: var(--paper); font: 9px var(--mono); }
.glass-panel { position: absolute; z-index: 2; background: rgba(13, 31, 25, .9); border: 1px solid rgba(237, 230, 211, .16); backdrop-filter: blur(9px); }
.map-status { top: 18px; left: 18px; padding: 10px 13px; display: flex; align-items: center; gap: 10px; }
.map-status div { display: grid; }.map-status strong { font: 10px var(--mono); letter-spacing: .05em; }.map-status small { color: #87958c; font-size: 9px; margin-top: 2px; }
.map-legend { left: 18px; bottom: 45px; padding: 12px 14px; display: flex; gap: 14px; align-items: center; }
.map-legend p { margin: 0 4px 0 0; color: #819086; font: 8px var(--mono); letter-spacing: .16em; }
.map-legend span { color: #ccd3ce; font-size: 9px; display: flex; gap: 5px; align-items: center; }
.map-legend i { width: 6px; height: 6px; background: var(--legend); border-radius: 50%; }
.map-credit { position: absolute; right: 7px; bottom: 5px; z-index: 2; color: rgba(240,234,217,.6); font: 7px var(--mono); letter-spacing: .08em; }
.map-fallback { position: absolute; inset: 0; z-index: 10; background: radial-gradient(circle, #2c5547, #142a23); display: grid; place-items: center; }
.map-fallback div { display: grid; text-align: center; gap: 8px; }.map-fallback span { font-size: 42px; color: var(--gold); }.map-fallback small { color: #96a59b; }

.photo-marker { width: 56px; height: 67px; padding: 3px; border: 2px solid var(--paper); background: var(--paper); box-shadow: 0 7px 18px rgba(9,22,17,.42); transition: box-shadow .16s, border-color .16s; }
.photo-marker::after { content: ''; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--paper); border-bottom: 0; }
.photo-marker:hover { box-shadow: 0 10px 24px rgba(9,22,17,.5); z-index: 3; }
.photo-marker img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.8) contrast(1.04); }

.detail-panel { position: absolute; z-index: 8; right: 0; top: 0; bottom: 0; width: min(390px, 38vw); overflow-y: auto; background: var(--paper); color: var(--ink); box-shadow: -22px 0 60px rgba(7,18,14,.4); transform: translateX(105%); transition: transform .35s cubic-bezier(.3,.8,.25,1); }
.detail-panel.is-open { transform: none; }.panel-close { position: absolute; z-index: 3; right: 17px; top: 16px; width: 31px; height: 31px; border: 1px solid rgba(237,230,210,.26); background: rgba(12,29,23,.58); color: var(--paper); font-size: 21px; line-height: 1; }
.sheet-handle { display: none; }.detail-photo { height: 235px; position: relative; overflow: hidden; background: #22392f; }
.detail-photo::after { content: ''; position: absolute; inset: auto 0 0; height: 50%; background: linear-gradient(transparent, rgba(10,21,17,.4)); }
.detail-photo img { width: 100%; height: 100%; object-fit: cover; }.detail-photo > span { position: absolute; z-index: 1; left: 18px; bottom: 17px; padding: 5px 9px; background: rgba(13,31,25,.78); color: var(--paper); font: 9px var(--mono); letter-spacing: .12em; }
.detail-photo-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.detail-photo-gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detail-photo-gallery img { min-width: 0; }
.detail-photo > button { position: absolute; z-index: 1; right: 17px; bottom: 15px; width: 31px; height: 31px; border: 1px solid rgba(255,255,255,.45); background: rgba(13,31,25,.6); color: white; }
.detail-body { padding: 24px 25px 28px; }.detail-index { color: #889088; font: 9px var(--mono); letter-spacing: .14em; }
.detail-body h2 { margin: 0 0 7px; font: 700 27px var(--serif); }.detail-place { display: flex; gap: 12px; color: #69716c; font: 10px var(--mono); }
.taxonomy { margin: 22px 0 16px; border-top: 1px solid #cac3b2; }.taxonomy div { display: grid; grid-template-columns: 76px 1fr; border-bottom: 1px solid #d3cbbb; padding: 9px 0; }
.taxonomy dt { color: #82877f; font-size: 10px; }.taxonomy dd { margin: 0; font-size: 11px; font-weight: 500; }.taxonomy i { font-family: var(--serif); }
.observation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #d0c8b8; border: 1px solid #d0c8b8; }.observation-grid > div { background: #e8e1d0; padding: 12px; display: grid; gap: 5px; }
.observation-grid span, .coordinates > span, .memo > span { color: #7e857e; font: 8px var(--mono); letter-spacing: .13em; }.observation-grid strong { font: 600 15px var(--serif); }.observation-grid small { font: 8px var(--mono); color: #7e857e; }
.memo { margin: 17px 0; padding-left: 13px; border-left: 2px solid var(--gold); }.memo p { margin: 7px 0 0; font-size: 11px; line-height: 1.75; }
.coordinates { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px dashed #c9c1b0; }.coordinates code { text-align: right; font: 9px/1.6 var(--mono); color: #69726c; }
.edit-button { width: 100%; height: 42px; margin-top: 10px; border: 1px solid #244439; background: transparent; color: #244439; font: 500 10px var(--mono); letter-spacing: .06em; }

#tableView { overflow: auto; background: #eee8d8; color: var(--ink); padding: 25px 30px 35px; }
.table-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 20px; }.table-heading .eyebrow { color: #7b847e; }.table-heading h2 { margin: 0; font: 700 26px var(--serif); }.table-heading > p { color: #778079; font: 10px var(--mono); }
.table-wrap { overflow-x: auto; border-top: 2px solid var(--ink); }
table { width: 100%; border-collapse: collapse; min-width: 870px; font-size: 11px; } th { padding: 13px 10px; text-align: left; border-bottom: 1px solid #bfb8a8; color: #727a74; font: 8px var(--mono); letter-spacing: .12em; }
td { padding: 11px 10px; border-bottom: 1px solid #d3cbbb; }.mono-date { font: 9px var(--mono); }.record-cell { display: flex; align-items: center; gap: 11px; }.record-cell img { width: 42px; height: 42px; object-fit: cover; filter: saturate(.75); }.record-cell strong { font-size: 11px; }
.record-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.record-tags > span { display: inline-flex; width: fit-content; padding: 3px 7px; border: 1px solid #9b5d42; border-radius: 999px; background: #f4e5d6; color: #753f2e; font: 9px var(--mono); letter-spacing: .06em; }
.record-cell > span > .record-tags { margin-top: 4px; }
td small { display: block; margin-top: 3px; color: #7b837d; font: italic 9px var(--serif); }.count-pill { display: inline-grid; place-items: center; min-width: 29px; height: 25px; border: 1px solid #b7ad9b; font: 9px var(--mono); }
td:last-child button { border: 0; background: none; color: #355849; font-size: 17px; } tbody tr { cursor: pointer; transition: background .15s; } tbody tr:hover, tbody tr:focus { background: rgba(211,163,86,.12); outline: none; }
.empty-state { text-align: center; padding: 60px; color: #7d857f; }.table-note { margin-top: 18px; padding: 13px 16px; border: 1px dashed #bfb6a5; color: #737a75; font-size: 10px; }.table-note span { color: var(--gold); margin-right: 6px; }

.scrim { position: fixed; z-index: 20; inset: 0; background: rgba(3,12,8,.5); backdrop-filter: blur(2px); }
.side-drawer { position: fixed; z-index: 21; top: 0; right: 0; width: min(450px, 94vw); height: 100%; overflow-y: auto; padding: 31px 34px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); transform: translateX(105%); transition: transform .3s ease; }.side-drawer.is-open { transform: none; }
.compact-drawer { width: min(380px, 94vw); }.drawer-head, .modal-head { position: relative; display: flex; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid #c9c1b0; }.drawer-head h2, .modal-head h2 { margin: 0; font: 700 29px var(--serif); }.drawer-head .panel-close, .modal-head .panel-close { position: static; background: transparent; border-color: #bfb6a4; color: var(--ink); }
.side-drawer fieldset { border: 0; padding: 22px 0; margin: 0; border-bottom: 1px solid #d3ccbc; }.side-drawer legend, .privacy-field legend { padding: 0; margin-bottom: 13px; color: #424d46; font-size: 11px; font-weight: 600; }
.date-range, .range-row { display: flex; align-items: center; gap: 8px; }.date-range input, .range-row input, .side-drawer select { min-width: 0; width: 100%; height: 42px; border: 1px solid #bfb6a5; background: #eae3d3; padding: 0 10px; color: var(--ink); font: 10px var(--mono); }.date-range span, .range-row span { color: #8b928d; }
.check-list, .check-grid { display: grid; gap: 11px; }.check-grid { grid-template-columns: 1fr 1fr; }.check-list label, .check-grid label { display: flex; gap: 9px; align-items: center; color: #3e4943; font-size: 11px; cursor: pointer; }.check-list input, .check-grid input { position: absolute; opacity: 0; }.check-list label span, .check-grid label span { width: 15px; height: 15px; border: 1px solid #9aa198; background: #eee8d8; }.check-list input:checked + span, .check-grid input:checked + span { background: var(--forest-700); box-shadow: inset 0 0 0 3px var(--paper); }
.drawer-actions { display: flex; justify-content: space-between; align-items: center; padding-top: 27px; }.text-button { border: 0; background: none; color: #5f6962; font: 10px var(--mono); letter-spacing: .08em; text-decoration: underline; text-underline-offset: 5px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.segmented input { position: absolute; opacity: 0; }.segmented span { display: grid; place-items: center; height: 47px; border: 1px solid #bfb6a5; color: #68716b; font: 10px var(--mono); }.segmented input:checked + span { background: var(--forest-800); border-color: var(--forest-800); color: var(--paper); }.settings-note { margin-top: 21px; padding: 12px; background: #e6dfce; color: #737a75; font-size: 10px; line-height: 1.7; }

.modal { width: min(960px, calc(100vw - 40px)); max-height: calc(100vh - 50px); padding: 0; border: 1px solid rgba(235,228,208,.25); background: var(--paper); color: var(--ink); box-shadow: 0 30px 110px rgba(3,12,8,.72); }.modal::backdrop { background: rgba(4,13,10,.78); backdrop-filter: blur(5px); }.modal > form, .ai-modal { padding: 28px 31px; }.modal-head { align-items: start; }.add-layout { display: grid; grid-template-columns: 255px 1fr; gap: 27px; margin-top: 25px; }
.photo-upload { height: 330px; position: relative; border: 1px dashed #a9a18f; background: #e5dece; overflow: hidden; }.photo-upload button { width: 100%; height: 100%; border: 0; background: linear-gradient(135deg, rgba(35,68,57,.05), transparent); color: #56615a; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; }.photo-upload button span { font-size: 30px; color: var(--gold); }.photo-upload button strong { font-size: 11px; }.photo-upload button small { font: 8px var(--mono); color: #8a918b; }.photo-upload img { width: 100%; height: 100%; object-fit: cover; }
.form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.field { display: grid; gap: 7px; }.field > span { color: #626c65; font-size: 9px; font-weight: 600; }.field input, .field textarea { width: 100%; border: 0; border-bottom: 1px solid #bcb3a1; background: rgba(229,222,206,.55); padding: 10px; border-radius: 0; color: var(--ink); outline: 0; font-size: 11px; }.field input:focus, .field textarea:focus { border-color: var(--forest-700); background: #e6decc; }.wide { grid-column: 1 / -1; }.species-field { grid-column: 1 / -1; }.species-field > div { display: flex; }.species-field input { flex: 1; }.species-field button { border: 0; border-bottom: 1px solid var(--forest-700); background: var(--forest-700); color: var(--paper); padding: 0 14px; font-size: 10px; white-space: nowrap; }
.privacy-field { border: 0; padding: 0; margin: 3px 0 0; }.privacy-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }.privacy-options label { min-width: 0; padding: 10px 8px; display: flex; align-items: center; gap: 7px; border: 1px solid #c7bfaf; cursor: pointer; }.privacy-options input { position: absolute; opacity: 0; }.privacy-options label > span { font-size: 17px; color: #7a847c; }.privacy-options b { font-size: 9px; }.privacy-options small { display: block; margin-top: 3px; color: #858c86; font-size: 7px; font-weight: 400; }.privacy-options label:has(input:checked) { border-color: var(--forest-700); background: rgba(36,68,57,.08); }.privacy-options label:has(input:checked) > span { color: var(--forest-700); }
.modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 18px; margin-top: 24px; padding-top: 19px; border-top: 1px solid #c9c1b0; }
.ai-modal { width: min(860px, calc(100vw - 40px)); }.ai-notice { margin: 17px 0; padding: 11px 14px; border-left: 2px solid var(--gold); background: #e7dfcd; color: #5f6962; font-size: 10px; }.ai-candidates { display: grid; gap: 9px; }.ai-candidates article { display: grid; grid-template-columns: 125px 1fr auto; align-items: center; gap: 17px; min-height: 116px; padding: 9px; border: 1px solid #c8bfad; }.ai-candidates article > img { width: 125px; height: 96px; object-fit: cover; }.candidate-copy { display: grid; }.candidate-copy p { margin: 0 0 4px; color: #92968f; font: 8px var(--mono); letter-spacing: .12em; }.candidate-copy h3 { margin: 0; font: 700 18px var(--serif); }.candidate-copy span { font-size: 9px; color: #69716c; }.candidate-copy i { margin-top: 3px; font: 10px var(--serif); }.candidate-copy small { margin-top: 3px; color: #7a817c; font-size: 8px; }.candidate-action { min-width: 125px; display: grid; justify-items: end; gap: 16px; }.confidence { font-size: 9px; color: #627268; }.confidence-高 { color: #34704e; }.candidate-action button { border: 0; border-bottom: 1px solid #456757; background: none; color: #345347; padding: 5px 0; font-size: 9px; font-weight: 600; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 25px; min-width: 300px; padding: 12px 18px; display: flex; align-items: center; gap: 12px; background: var(--forest-800); border: 1px solid rgba(237,230,211,.25); color: var(--paper); box-shadow: var(--shadow); transform: translate(-50%, 150%); transition: .35s; }.toast.is-visible { transform: translate(-50%, 0); }.toast > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #658d6e; }.toast p { margin: 0; display: grid; }.toast strong { font-size: 10px; }.toast small { margin-top: 2px; color: #95a39a; font-size: 8px; }

@media (max-width: 780px) {
  body { overflow: auto; }.app-shell { min-height: 100svh; height: auto; }.topbar { height: 52px; padding: 0 16px; }.brand { font-size: 11px; }.sync-state, .icon-button { display: none; }
  .workspace { min-height: calc(100svh - 52px); padding: 0 12px 12px; }.atlas-head { min-height: 143px; align-items: flex-start; padding: 20px 2px 13px; }.atlas-identity h1 { font-size: 27px; }.atlas-code, .record-total span, .record-total span + * { display: none; }
  .atlas-actions { flex-direction: column-reverse; align-items: flex-end; gap: 9px; }.view-tab { padding: 8px 11px; }.primary-button { min-height: 40px; padding: 0 14px; }
  .toolbar { min-height: 104px; flex-wrap: wrap; padding: 8px; gap: 7px; }.search-box { width: 100%; height: 42px; }.toolbar-buttons { width: 100%; }.tool-button { flex: 1; }
  .content-stage { height: calc(100svh - 311px); min-height: 390px; flex: none; }.map-legend { display: none; }.map-status { top: 12px; left: 12px; }.maplibregl-ctrl-bottom-left { bottom: 9px; }
  .photo-marker { width: 48px; height: 58px; }.detail-panel { position: fixed; z-index: 30; top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 82svh; border-radius: 18px 18px 0 0; transform: translateY(105%); }.detail-panel.is-open { transform: none; }.sheet-handle { display: block; position: sticky; z-index: 4; top: 0; width: 36px; height: 4px; border-radius: 5px; background: rgba(20,40,33,.25); margin: 9px auto -13px; }.detail-photo { height: 205px; }.detail-body { padding: 21px 20px 26px; }
  #tableView { padding: 20px 14px 30px; }.table-heading h2 { font-size: 23px; }
  .side-drawer { padding: 25px 22px; }
  .modal { width: calc(100vw - 20px); max-height: calc(100svh - 20px); }.modal > form, .ai-modal { padding: 21px 18px; }.add-layout { grid-template-columns: 1fr; }.photo-upload { height: 175px; }.form-fields { grid-template-columns: 1fr; }.wide, .species-field { grid-column: auto; }.privacy-options { grid-template-columns: 1fr; }.add-modal .modal-actions { position: sticky; bottom: -21px; margin-left: -18px; margin-right: -18px; padding: 13px 18px; background: var(--paper); }
  .ai-candidates article { grid-template-columns: 82px 1fr; gap: 12px; }.ai-candidates article > img { width: 82px; height: 90px; }.candidate-action { grid-column: 1 / -1; display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 0 4px 6px; }
}

@media (max-width: 430px) {
  .atlas-head { min-height: 136px; }.eyebrow { font-size: 8px; }.record-total { font-size: 9px; }.view-tab span { display: none; }.content-stage { height: calc(100svh - 302px); }.atlas-actions .primary-button { font-size: 9px; }.toolbar { min-height: 100px; }
}

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

/* --------------------------------------------------------------------------
   Full-map layout — header + map canvas + floating tools
   -------------------------------------------------------------------------- */
.app-shell { min-height: 0; }
.topbar { position: relative; height: 64px; padding: 0 20px; gap: 16px; background: rgba(11, 25, 21, .98); }
.header-identity { display: flex; align-items: center; height: 100%; gap: 20px; }
.header-divider { width: 1px; height: 27px; background: var(--line); }
.header-atlas { display: flex; align-items: baseline; gap: 10px; }
.header-atlas > span { color: #718077; font: 8px var(--mono); letter-spacing: .16em; }
.header-atlas strong { color: var(--paper); font: 600 16px var(--serif); letter-spacing: .05em; }
.header-tools { position: absolute; left: 50%; transform: translateX(-50%); min-width: 0; height: 100%; display: flex; align-items: center; gap: 5px; }
.header-tools .search-box { width: clamp(180px, 22vw, 310px); height: 40px; }
.header-tools .tool-button { min-height: 40px; }
.header-tools .primary-button { min-height: 40px; }
.header-account { height: 100%; margin-left: auto; display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.header-account .view-switch { padding: 3px; flex: 0 0 auto; }
.header-account .view-tab { min-height: 36px; padding: 0 12px; }

.workspace { padding: 0; }
.content-stage { flex: 1; border: 0; }

.map-summary { top: 18px; left: 18px; width: 375px; padding: 18px 18px 15px; }
.map-summary-toggle { position: absolute; right: 8px; top: 7px; width: 27px; height: 27px; display: grid; place-items: center; border: 0; background: transparent; color: #c6cec8; font-size: 14px; line-height: 1; }
.map-summary-toggle:hover { color: #fff; }
.map-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.map-summary-head { padding-right: 27px; }
.map-summary-content { overflow: hidden; max-height: 900px; opacity: 1; transition: max-height .24s ease, opacity .18s ease, margin .24s ease; }
.map-summary.is-collapsed { width: 375px; padding-top: 12px; padding-bottom: 12px; }
.map-summary.is-collapsed .map-summary-content { max-height: 0; margin: 0; opacity: 0; }
.map-summary p { margin: 0; color: #aeb9b1; font: 10px var(--mono); }
.map-summary p strong { color: var(--paper); font-size: 16px; font-weight: 500; }
.map-summary p span { padding: 0 6px; color: var(--gold); }
.map-summary small { margin-top: 7px; display: flex; align-items: center; gap: 8px; color: #7f9085; font: 8px var(--mono); }
.map-summary small b { color: #9dab9f; font-weight: 400; }
.map-summary .status-dot { display: inline-block; }
.collection-kicker { color: #b86443 !important; font-size: 8px !important; letter-spacing: .15em; }
.map-summary-head h1 { margin: 5px 0 6px; color: var(--paper); font: 600 23px/1.25 var(--serif); letter-spacing: .04em; }
.map-summary .collection-copy { max-width: 290px; color: #aab6ae; font: 10px/1.7 var(--sans); }
.collection-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 15px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.collection-stats > div { min-height: 55px; padding: 9px 10px; display: flex; align-items: baseline; gap: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.collection-stats strong { color: var(--paper); font: 500 20px var(--mono); }
.collection-stats span { color: #829087; font-size: 8px; }
.table-heading > div > small { display: block; margin-top: 6px; color: #7e887f; font-size: 10px; }
.modal-head > div > small { display: block; max-width: 360px; margin-top: 7px; color: #747d76; font-size: 10px; line-height: 1.6; }
.workspace-tools { position: absolute; z-index: 8; top: 18px; right: 18px; display: flex; align-items: center; gap: 6px; padding: 5px; border: 1px solid rgba(243,240,230,.2); background: rgba(24,33,28,.9); box-shadow: 0 12px 32px rgba(15,22,18,.22); backdrop-filter: blur(10px); }
.workspace-tools .view-switch { padding: 2px; flex: 0 0 auto; }
.workspace-tools .view-tab { min-height: 34px; padding: 0 12px; }
.workspace-tools .search-box { width: 210px; height: 36px; }
.workspace-tools .tool-button { min-height: 36px; }
.header-account > .primary-button { min-height: 38px; }
@media (max-width: 960px) {
  .topbar { height: 58px; align-content: center; }
  .header-identity, .header-account { height: 58px; }
  .workspace-tools { top: 10px; right: 10px; left: 10px; justify-content: flex-end; }
  .workspace-tools .search-box { flex: 1; width: auto; }
  .map-summary { top: 66px; }
}
@media (max-width: 520px) {
  .header-account > .primary-button { padding: 0 10px; font-size: 9px; }
  .workspace-tools .search-box { min-width: 0; }
  .workspace-tools .search-box kbd { display: none; }
  .workspace-tools .view-tab { padding: 0 8px; }
  .workspace-tools .tool-button { padding: 0 9px; }
}
.summary-view-button { min-height: 31px; padding: 0 10px; border: 1px solid rgba(239, 233, 216, .2); background: rgba(255,255,255,.025); color: #c4cec7; font: 9px var(--mono); letter-spacing: .08em; }
.summary-view-button span { margin-right: 5px; color: var(--gold); }
.summary-view-button:hover { border-color: rgba(239, 233, 216, .45); color: white; }
.summary-legend { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.summary-legend > p { margin-bottom: 8px; color: #718178; font-size: 8px; letter-spacing: .14em; }
.summary-legend > div { display: grid; grid-template-columns: 1fr; gap: 8px; }
.summary-legend span { color: #bdc8c0; font-size: 8px; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.summary-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--legend); }
.summary-legend .numeric-summary { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.numeric-summary span { font: 9px var(--mono); }
.numeric-summary b { color: #708078; font-weight: 400; }
.summary-legend .size-dot { display: inline-block; border: 1px solid var(--paper); background: var(--gold); }
.summary-legend .size-dot-small { width: 9px; height: 9px; }
.summary-legend .size-dot-large { width: 18px; height: 18px; }

#tableView { padding: 30px 30px 35px; }

/* Record details use a neutral field grid so custom columns can be appended. */
.detail-body { padding: 22px 24px 28px; }
.record-fields { margin: 22px 0 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #c8c0af; border-left: 1px solid #c8c0af; }
.record-fields > div { min-height: 76px; padding: 13px 14px; display: grid; align-content: start; gap: 8px; border-right: 1px solid #c8c0af; border-bottom: 1px solid #c8c0af; }
.record-fields dt { color: #7f8881; font-size: 9px; font-weight: 600; letter-spacing: .06em; }
.record-fields dd { margin: 0; color: var(--ink); font-size: 12px; font-weight: 500; }
.record-fields dd i { font: italic 12px var(--serif); }
.record-fields .feature-field { min-height: 99px; }
.record-fields .feature-field dd { font: 600 25px var(--serif); }
.record-fields .feature-field small { color: #7e857f; font: 9px var(--mono); }
.record-fields .field-note-row { grid-column: 1 / -1; min-height: 92px; }
.record-fields .field-note-row dt { font: 8px var(--mono); letter-spacing: .14em; }
.record-fields .field-note-row dd { font-size: 11px; font-weight: 400; line-height: 1.75; }
.add-custom-field { width: 100%; min-height: 38px; margin-top: 10px; border: 1px dashed #b8ae9c; background: transparent; color: #778079; font-size: 9px; }
.record-position-control { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; border: 1px solid #c7beac; color: #59635d; font-size: 10px; }
.record-position-control select { min-width: 145px; padding: 8px 28px 8px 9px; border: 1px solid #b8ae9c; background: #eee7d6; color: var(--ink); font-size: 10px; }

/* Forms and drawers follow the same bordered-field system. */
.form-fields { gap: 0; border-top: 1px solid #c7beac; border-left: 1px solid #c7beac; }
.field { min-height: 76px; padding: 11px 12px; align-content: start; border-right: 1px solid #c7beac; border-bottom: 1px solid #c7beac; }
.field input, .field textarea { padding: 8px 0; background: transparent; }
.field input:focus, .field textarea:focus { background: transparent; }
.species-field > div { margin: 0 -1px -1px 0; }
.species-field button { border-bottom: 0; }
.privacy-field { padding-top: 14px; border-right: 1px solid #c7beac; border-bottom: 1px solid #c7beac; }
.privacy-field legend { margin-left: 12px; }
.privacy-options { gap: 0; padding: 0 12px 12px; }
.privacy-options label { border-right: 0; }
.privacy-options label:last-child { border-right: 1px solid #c7bfaf; }
.side-drawer fieldset { padding: 18px 0; }
.side-drawer .check-list, .side-drawer .check-grid { border-top: 1px solid #cbc3b3; border-left: 1px solid #cbc3b3; gap: 0; }
.side-drawer .check-list label, .side-drawer .check-grid label { min-height: 44px; padding: 9px 10px; border-right: 1px solid #cbc3b3; border-bottom: 1px solid #cbc3b3; }
.settings-drawer { width: min(475px, 94vw); }
.settings-drawer .precision-choice { grid-template-columns: repeat(2, 1fr); }
.settings-drawer .precision-choice span { padding: 0 5px; font-size: 9px; }
.field-help { margin: 10px 0 0; color: #7a827c; font-size: 9px; line-height: 1.65; }
.setting-select-label { display: grid; gap: 8px; }
.setting-select-label > span { color: #69726c; font-size: 9px; font-weight: 600; }
.attribute-detection { margin-top: 11px; padding: 10px 11px; display: flex; align-items: center; gap: 10px; border: 1px solid #c8c0af; background: #e7dfce; }
.attribute-detection .type-badge { padding: 4px 6px; background: var(--forest-700); color: var(--paper); font: 7px var(--mono); letter-spacing: .1em; }
.attribute-detection b { color: #68716b; font: 8px var(--mono); font-weight: 400; }
.legend-editor { margin-top: 10px; }
.legend-color-list { max-height: 270px; overflow-y: auto; border-top: 1px solid #c8c0af; border-left: 1px solid #c8c0af; }
.legend-color-row { min-height: 44px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-right: 1px solid #c8c0af; border-bottom: 1px solid #c8c0af; }
.legend-color-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3e4943; font-size: 10px; }
.legend-color-row input[type="color"] { width: 34px; height: 25px; flex: 0 0 auto; padding: 2px; border: 1px solid #aaa18f; background: transparent; cursor: pointer; }
.legend-empty { padding: 18px 13px; border: 1px dashed #bab1a0; color: #778079; font-size: 9px; text-align: center; }
.numeric-editor { min-height: 104px; padding: 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; border: 1px solid #c8c0af; background: #e8e1d1; }
.numeric-editor > div:not(.numeric-line) { display: grid; justify-items: center; gap: 4px; }
.numeric-editor span { color: #808780; font-size: 8px; }.numeric-editor strong { font: 13px var(--mono); }
.numeric-line { height: 1px; background: linear-gradient(90deg, #c4bca9, var(--forest-700)); }
.preview-point { display: block; margin-top: 6px; border-radius: 50%; background: var(--gold); border: 2px solid var(--paper); box-shadow: 0 0 0 1px #a89e8c; }
.preview-small { width: 13px; height: 13px; }.preview-large { width: 29px; height: 29px; }

@media (max-width: 960px) {
  body { overflow: hidden; }
  .app-shell { height: 100svh; min-height: 0; }
  .topbar { height: 106px; padding: 0 13px; gap: 0; flex-wrap: wrap; align-content: flex-start; }
  .header-identity { height: 53px; }
  .header-identity { gap: 10px; }
  .header-divider { height: 22px; }
  .header-atlas { gap: 6px; }
  .header-atlas > span { display: none; }
  .header-atlas strong { font-size: 13px; }
  .header-account { height: 53px; margin-left: auto; }
  .header-account .view-tab { min-height: 35px; padding: 0 10px; }
  .header-tools { position: static; order: 3; transform: none; width: calc(100% + 26px); height: 53px; margin: 0 -13px; padding: 0 10px; overflow-x: auto; border-top: 1px solid var(--line); scrollbar-width: none; justify-content: center; }
  .header-tools::-webkit-scrollbar { display: none; }
  .header-tools .search-box { flex: 0 1 260px; width: 260px; height: 37px; }
  .header-tools .search-box kbd { display: none; }
  .header-tools .tool-button { flex: 0 0 auto; min-height: 37px; }
  .header-tools .primary-button { flex: 0 0 auto; min-height: 37px; }
  .workspace { min-height: 0; }
  .content-stage { height: auto; min-height: 0; flex: 1; }
  .map-summary { top: 10px; left: 10px; width: min(355px, calc(100vw - 20px)); padding: 11px 13px; }
  .map-summary p strong { font-size: 14px; }
  #tableView { padding: 22px 14px 28px; }
  .detail-panel { max-height: 84svh; }
  .record-fields > div { min-height: 70px; }
  .form-fields { grid-template-columns: 1fr 1fr; }
  .form-fields .wide, .form-fields .species-field, .form-fields .privacy-field { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .brand { font-size: 9px; letter-spacing: .12em; }
  .brand-mark { width: 25px; height: 25px; }
  .header-account { gap: 6px; }
  .avatar { width: 28px; height: 28px; }
  .header-atlas strong { max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header-account .view-tab { padding: 0 8px; }
  .header-account .view-tab span { display: none; }
  .header-tools { justify-content: flex-start; }
  .header-tools .search-box { flex: 1 1 150px; width: 150px; }
  .header-tools .tool-button span { display: none; }
  .header-tools .primary-button { padding: 0 11px; font-size: 9px; }
  .map-summary { width: calc(100vw - 20px); }
  .summary-legend > div { grid-template-columns: 1fr; row-gap: 7px; }
  .form-fields { grid-template-columns: 1fr; }
  .form-fields .wide, .form-fields .species-field, .form-fields .privacy-field { grid-column: auto; }
  .record-fields { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Field Atlas visual direction
   A calm field-instrument palette: charcoal canopy, specimen paper and clay.
   -------------------------------------------------------------------------- */
:root {
  --forest-950: #18211c;
  --forest-900: #202b24;
  --forest-800: #2b3a30;
  --forest-700: #405b49;
  --moss: #667b5c;
  --paper: #f3f0e6;
  --paper-2: #e8e2d4;
  --ink: #252b27;
  --muted: #6e756f;
  --gold: #b86443;
  --rust: #9f4f34;
  --line: rgba(243, 240, 230, .14);
  --shadow: 0 18px 45px rgba(20, 27, 23, .24);
}

body,
.app-shell { background: var(--forest-950); }

.topbar {
  background: #1c251f;
  border-bottom-color: rgba(243, 240, 230, .17);
}

.brand { letter-spacing: .13em; }
.brand-mark {
  width: 30px;
  border-radius: 2px;
  border-color: #b86443;
  color: #f3f0e6;
  background: #b86443;
  font: 500 9px/1 var(--mono);
  letter-spacing: .08em;
}

.header-atlas > span,
.eyebrow,
.summary-legend > p { color: #8e9991; }

.primary-button {
  border-color: #b86443;
  background: #b86443;
  color: #fffaf1;
  letter-spacing: .04em;
  box-shadow: none;
}
.primary-button:hover {
  background: #a95437;
  transform: none;
}

.view-switch,
.search-box,
.tool-button,
.summary-view-button { background: #232e27; }

.view-tab.is-active {
  background: #f3f0e6;
  color: #252b27;
  box-shadow: none;
}

.tool-button span,
.summary-view-button span,
.map-summary p span { color: #c77a56; }

.glass-panel {
  background: #202a24;
  border-color: rgba(243, 240, 230, .19);
  backdrop-filter: none;
}

.map-summary { box-shadow: 0 5px 16px rgba(20, 27, 23, .18); }

#map { background: #c8c8b8; }
.maplibregl-canvas {
  filter: sepia(.08) saturate(.72) contrast(.96) brightness(.94);
}

.maplibregl-ctrl-group { background: rgba(243, 240, 230, .96) !important; }

.photo-marker {
  border-width: 3px;
  border-color: #f3f0e6;
  background: #f3f0e6;
  box-shadow: 0 3px 10px rgba(24, 33, 28, .3);
}
.photo-marker:hover { box-shadow: 0 7px 18px rgba(24, 33, 28, .42); }
.photo-marker img { filter: saturate(.92) contrast(1.02); }

#tableView,
.detail-panel,
.side-drawer,
.modal { background: #f3f0e6; }

.detail-panel,
.side-drawer,
.modal { box-shadow: var(--shadow); }

.record-cell img { filter: saturate(.9) contrast(1.02); }

.observation-grid > div,
.settings-note,
.attribute-detection,
.numeric-editor,
.ai-notice { background: #e8e2d4; }

.date-range input,
.range-row input,
.side-drawer select { background: #ede8dc; }

.segmented input:checked + span,
.check-list input:checked + span,
.check-grid input:checked + span,
.attribute-detection .type-badge { background: #405b49; border-color: #405b49; }

.modal::backdrop,
.scrim {
  background: rgba(24, 33, 28, .62);
  backdrop-filter: none;
}

.photo-upload button { background: transparent; }
.preview-point,
.summary-legend .size-dot { background: #b86443; }

.toast {
  background: #2b3a30;
  box-shadow: 0 7px 22px rgba(20, 27, 23, .28);
}

/* Atlas configuration and field-definition UI. */
.atlas-settings-drawer { width: min(560px, 96vw); padding-bottom: 60px; background: #fff; }
.atlas-setting-section { padding: 25px 0 5px; border-bottom: 1px solid #cec7b8; }
.atlas-setting-section:last-child { border-bottom: 0; }
.setting-section-head { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 18px; margin-bottom: 15px; }
.setting-section-head > div { display: flex; align-items: center; gap: 10px; }
.setting-section-head > div > span { color: #b86443; font: 9px var(--mono); }
.setting-section-head h3 { margin: 0; font: 700 17px var(--serif); }
.setting-section-head > p { max-width: 230px; margin: 1px 0 0; color: #747c76; font-size: 9px; line-height: 1.65; text-align: right; }
.setting-subhead { margin: 20px 0 9px; color: #727b75; font: 8px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.fixed-fields-note { margin: 0 0 10px; padding: 10px 12px; border-left: 2px solid #b86443; background: #f5f4ef; color: #69726c; font-size: 9px; line-height: 1.7; }
.field-setting-list { border-top: 1px solid #c9c1b1; border-left: 1px solid #c9c1b1; }
.field-setting-row { min-height: 53px; margin: 0; padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-right: 1px solid #c9c1b1; border-bottom: 1px solid #c9c1b1; cursor: pointer; }
.field-setting-row > div { min-width: 0; display: grid; gap: 3px; }
.field-setting-row strong { color: #303a34; font-size: 10px; }
.field-setting-row small { color: #7e857f; font-size: 8px; }
.field-setting-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-ui { width: 34px; height: 19px; flex: 0 0 auto; position: relative; border: 1px solid #9fa69f; background: #ded8ca; transition: .15s; }
.switch-ui::after { content: ''; position: absolute; width: 13px; height: 13px; left: 2px; top: 2px; background: #888f89; transition: .15s; }
.field-setting-row input:checked + .switch-ui { border-color: #405b49; background: #405b49; }
.field-setting-row input:checked + .switch-ui::after { left: 17px; background: #f3f0e6; }
.field-setting-row.is-locked { cursor: default; background: #f7f7f4; }
.locked-label { padding: 4px 6px; color: #66716a; border: 1px solid #bbb4a6; font: 7px var(--mono); letter-spacing: .06em; }
.related-field-settings { margin: 0 0 0 22px; padding: 10px 0 0 13px; border-left: 2px solid #b86443; }
.related-field-settings > p { margin: 0 0 8px; color: #737b75; font-size: 8px; }
.related-field-settings.is-disabled { opacity: .42; pointer-events: none; }
.custom-field-area { margin-top: 12px; }
.custom-field-form { margin-top: 9px; padding: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 1px solid #c5bdad; background: #ede8dc; }
.custom-field-form label { display: grid; gap: 6px; }
.custom-field-form label > span { color: #626c65; font-size: 8px; font-weight: 600; }
.custom-field-form input, .custom-field-form select { width: 100%; height: 39px; border: 1px solid #bcb4a4; background: #f3f0e6; padding: 0 9px; color: var(--ink); font-size: 10px; }
.custom-field-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 13px; }
.custom-field-actions .primary-button { min-height: 36px; }
#customFieldSettings { margin-top: 9px; border-top: 1px solid #c9c1b1; }
.custom-setting-row { min-height: 47px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #c9c1b1; border-top: 0; }
.custom-setting-row > div { display: grid; gap: 2px; }
.custom-setting-row strong { font-size: 10px; }.custom-setting-row small { color: #7b837d; font-size: 8px; }
.custom-setting-row button { border: 0; background: transparent; color: #90523c; font-size: 9px; }
.position-display-options { display: grid; gap: 7px; }
.position-display-options label { cursor: pointer; }
.position-display-options input { position: absolute; opacity: 0; }
.position-display-options label > span { min-height: 58px; padding: 11px 12px 11px 42px; display: grid; align-content: center; gap: 3px; position: relative; border: 1px solid #c5bdad; }
.position-display-options label > span::before { content: ''; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; border-radius: 50%; border: 1px solid #909990; transform: translateY(-50%); }
.position-display-options input:checked + span { border-color: #405b49; background: rgba(64, 91, 73, .07); }
.position-display-options input:checked + span::before { border-color: #405b49; box-shadow: inset 0 0 0 4px #f3f0e6; background: #405b49; }
.position-display-options b { color: #38433c; font-size: 10px; }.position-display-options small { color: #7b837d; font-size: 8px; }
.selected-taxon-summary { min-height: 14px; margin-top: 3px; color: #6e776f; font: 8px var(--mono); }
.field select { width: 100%; min-height: 37px; border: 0; border-bottom: 1px solid #bcb3a1; background: transparent; padding: 8px 0; color: var(--ink); font-size: 11px; }
.custom-record-fields:empty { display: none; }
.custom-record-fields { display: grid; grid-template-columns: 1fr 1fr; border-left: 1px solid #c7beac; }
.auto-data-card { grid-column: 1 / -1; min-height: 58px; padding: 11px 12px; display: flex; justify-content: space-between; align-items: center; gap: 14px; border-right: 1px solid #c7beac; border-bottom: 1px solid #c7beac; background: #e8e2d4; }
.auto-data-card > span { color: #69736b; font-size: 8px; }.auto-data-card strong { color: #38443c; font-size: 10px; }
.record-field-auto small { display: block; margin-top: 4px; color: #7b837d; font: 8px var(--mono); }

@media (max-width: 960px) {
  .atlas-settings-button { display: inline-flex; }
}

@media (max-width: 600px) {
  .setting-section-head { grid-template-columns: 1fr; gap: 5px; }
  .setting-section-head > p { max-width: none; text-align: left; }
  .custom-field-form { grid-template-columns: 1fr; }
  .custom-field-actions { grid-column: auto; }
  .custom-record-fields { grid-template-columns: 1fr; }
}

/* Account entry point for profile and preferences. */
.header-account { position: relative; }
.account-menu { position: absolute; z-index: 40; right: 0; top: calc(100% - 4px); width: 220px; padding: 7px; border: 1px solid #c9c3b7; background: #fff; color: var(--ink); box-shadow: 0 12px 32px rgba(20, 27, 23, .22); }
.account-summary { min-height: 58px; padding: 8px 9px 11px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #ddd8cd; }
.account-summary > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #405b49; color: #fff; font: 10px var(--mono); }
.account-summary > div { display: grid; gap: 2px; }.account-summary strong { font-size: 12px; }.account-summary small { color: #7a827c; font-size: 10px; }
.account-menu > button, .account-menu > a { width: 100%; min-height: 40px; padding: 0 10px; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: #354039; font-size: 12px; text-align: left; text-decoration: none; }
.account-menu > button:hover, .account-menu > a:hover { background: #f1efe8; }.account-menu > button span, .account-menu > a span { width: 17px; color: #6d776f; text-align: center; }
.account-menu > button:last-child { margin-top: 4px; border-top: 1px solid #ddd8cd; color: #8d4d37; }

/* Readability pass: keep the field-guide density without miniature type. */
.header-tools .search-box input { font-size: 13px; }
.tool-button, .summary-view-button, .primary-button { font-size: 11px; }
.map-summary p { font-size: 11px; }.map-summary small, .summary-legend span { font-size: 10px; }
.drawer-head h2, .modal-head h2 { font-size: 30px; }
.side-drawer legend, .privacy-field legend { font-size: 13px; }
.setting-section-head h3 { font-size: 19px; }
.setting-section-head > p, .fixed-fields-note, .field-help { font-size: 11px; }
.setting-subhead { font-size: 10px; }
.field-setting-row strong { font-size: 13px; }.field-setting-row small { font-size: 10px; line-height: 1.45; }
.related-field-settings > p { font-size: 10px; }
.custom-field-form label > span, .field > span { font-size: 11px; }
.custom-field-form input, .custom-field-form select, .field input, .field textarea, .field select { font-size: 13px; }
.custom-setting-row strong { font-size: 12px; }.custom-setting-row small { font-size: 10px; }
.position-display-options b { font-size: 12px; }.position-display-options small { font-size: 10px; }
.public-location-policy{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:16px}.public-location-policy>div{min-height:88px;padding:13px;border:1px solid #c5bdad;display:grid;align-content:center;gap:4px}.public-location-policy>div:last-child{background:rgba(64,91,73,.07)}.public-location-policy>div>span{color:#7b837d;font:8px var(--mono);letter-spacing:.1em}.public-location-policy strong{font:600 14px var(--serif)}.public-location-policy small{color:#747d76;font-size:9px}.public-location-policy>b{color:var(--rust);font-size:17px}.location-save-note{margin:0;padding:11px 12px;border-left:3px solid #56705a;background:#e5e1d5;display:grid;gap:3px}.location-save-note strong{font-size:10px}.location-save-note span{color:#707a72;font-size:9px}.record-public-location{margin-top:14px;padding:13px;border:1px solid #c7beac;display:grid;gap:4px}.record-public-location>span{color:#7d857f;font:8px var(--mono);letter-spacing:.1em}.record-public-location>strong{font:600 14px var(--serif)}.record-public-location>small{color:#737c75;font-size:9px;line-height:1.6}.request-fixed-location{margin-top:8px;min-height:37px;border:1px solid #435c49;background:transparent;color:#35483b;font-size:9px}.request-fixed-location:hover{background:#e2ddd0}
@media(max-width:600px){.public-location-policy{grid-template-columns:1fr}.public-location-policy>b{transform:rotate(90deg);justify-self:center}}
.table-heading > p, .record-total { font-size: 11px; }
table { font-size: 12px; } th { font-size: 10px; } td small, .mono-date { font-size: 10px; }
.record-cell strong { font-size: 12px; }
.detail-index, .detail-place { font-size: 11px; }
.record-fields dt { font-size: 11px; }.record-fields dd { font-size: 13px; }
.record-fields .field-note-row dd { font-size: 12px; }
.ai-notice, .candidate-copy span, .candidate-copy small, .confidence, .candidate-action button { font-size: 11px; }

/* Collection-first hierarchy: keep the product header calm and move tools onto the atlas. */
.workspace-tools .search-box input { font-size: 13px; }
@media (max-width: 960px) {
  .topbar { height: 58px; min-height: 58px; flex-wrap: nowrap; align-content: center; }
  .header-identity, .header-account { height: 58px; }
  .workspace-tools { top: 10px; right: 10px; left: 10px; justify-content: flex-end; }
  .workspace-tools .search-box { flex: 1; width: auto; }
  .map-summary { top: 66px; }
}
@media (max-width: 520px) {
  .workspace-tools { gap: 3px; padding: 4px; }
  .workspace-tools .search-box { min-width: 0; }
  .workspace-tools .search-box kbd { display: none; }
  .workspace-tools .view-tab { padding: 0 7px; }
  .workspace-tools .view-tab span { display: none; }
  .workspace-tools .tool-button { padding: 0 8px; }
}
/* 公開図鑑へのプレビュー導線 */
.public-preview-link{color:var(--ink);font-size:12px;text-decoration:none;border-bottom:1px solid currentColor;padding:5px 0;white-space:nowrap}
@media(max-width:760px){.public-preview-link{display:none}}
.viewer-label{display:none;margin-left:auto;padding:5px 9px;border:1px solid rgba(238,231,211,.24);color:#d9d3c4;font:9px var(--mono);letter-spacing:.08em}
.public-viewer .header-account{display:none}
.public-viewer .viewer-label{display:inline-flex}
.public-viewer .edit-button{display:none!important}

/* MAP / 一覧 / カードを共通ヘッダーから切り替える */
.header-view-switch{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;padding:3px;border:1px solid rgba(243,240,230,.16);background:rgba(255,255,255,.025)}
.header-view-switch .view-tab{min-height:36px;padding:0 14px}
.summary-search-tools{display:grid;grid-template-columns:1fr auto;gap:7px;padding-right:25px}
.summary-search-tools .search-box{width:100%;height:38px;background:rgba(255,255,255,.045)}
.summary-search-tools .search-box input{min-width:0}
.summary-search-tools .search-box kbd{display:none}
.summary-search-tools .tool-button{min-height:38px;padding:0 10px}
.map-summary{z-index:9}
#tableView,#cardView{padding-left:423px}

/* 写真を主役にしたカード表示 */
#cardView{overflow:auto;background:#eee8d8;color:var(--ink);padding-top:30px;padding-right:30px;padding-bottom:42px}
.card-view-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #c7bead}
.card-view-heading h2{margin:0;font:600 30px var(--serif)}
.card-view-heading>p{margin:0;color:#737c75;font-size:10px}.card-view-heading>p span{font:500 17px var(--mono);color:var(--ink)}
.record-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}
.record-card{min-width:0;background:#f7f3e8;border:1px solid #d0c7b7;cursor:pointer;outline:0;transition:transform .18s ease,box-shadow .18s ease}
.record-card:hover{transform:translateY(-3px);box-shadow:0 13px 28px rgba(35,43,37,.13)}
.record-card:focus-visible{box-shadow:0 0 0 3px #b86443}
.record-card-photo{position:relative;aspect-ratio:4/3;overflow:hidden;background:#d8d1c2}
.record-card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.record-card:hover .record-card-photo img{transform:scale(1.025)}
.record-card-photo>span{position:absolute;right:9px;bottom:9px;padding:4px 7px;background:rgba(28,38,31,.82);color:#fff;font:8px var(--mono)}
.record-card-body{padding:14px 15px 16px}.record-card-meta{display:flex;justify-content:space-between;color:#7b837c;font:8px var(--mono);letter-spacing:.08em}
.record-card h3{margin:9px 0 4px;font:600 18px var(--serif)}.record-card-body>i{display:block;color:#49614b;font:italic 11px var(--serif)}
.record-card-body>small{display:block;margin-top:3px;color:#778079;font-size:9px}.record-card-body>p{margin:13px 0 0;padding-top:10px;border-top:1px solid #d7cfbf;color:#727b74;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.record-card .record-tags{margin-top:8px}.card-empty{grid-column:1/-1;padding:70px;text-align:center;color:#747c75}

/* 一覧・カードでは詳細パネルを表示領域に含め、内容と重ならないようにする。 */
@media(min-width:761px){
  body.detail-open[data-view="table"] #tableView,
  body.detail-open[data-view="cards"] #cardView{
    padding-right:calc(min(390px,38vw) + 30px);
  }
  #tableView,#cardView{transition:padding-right .35s cubic-bezier(.3,.8,.25,1)}
}

@media(max-width:1120px){.record-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.header-view-switch .view-tab{padding:0 10px}}
@media(max-width:960px){
  .topbar{height:106px}
  .header-view-switch{position:static;order:3;transform:none;width:100%;height:53px;margin:0;padding:7px 10px;border-width:1px 0 0;justify-content:center}
  .header-view-switch .view-tab{flex:1;max-width:150px}
  .content-stage{height:calc(100svh - 136px)}
  .map-summary{top:10px}
  #tableView,#cardView{padding-left:380px}
}
@media(max-width:760px){
  .map-summary{position:relative;top:auto;left:auto;width:100%;border-width:0 0 1px;box-shadow:none;border-radius:0}
  .map-summary.is-collapsed{width:100%}
  .content-stage{overflow:auto;background:#eee8d8}
  #mapView{height:68svh;min-height:480px}
  #tableView,#cardView{height:auto;min-height:70svh;padding-left:14px;padding-right:14px}
  .record-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}
  .record-card-body{padding:11px}.record-card h3{font-size:15px}
}

/* Required coordinates with an optional map picker. */
.position-field{margin:0;padding:13px 12px 12px;border:0;border-right:1px solid #c7beac;border-bottom:1px solid #c7beac}
.position-field legend{padding:0;color:#626c65;font-size:9px;font-weight:600}
.coordinate-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.coordinate-inputs label{display:grid;gap:5px}.coordinate-inputs span{color:#7b827d;font-size:8px}
.coordinate-inputs input{width:100%;padding:8px 0;border:0;border-bottom:1px solid #bcb3a1;background:transparent;color:var(--ink);font-size:11px;outline:0}
.position-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px}.position-actions button{min-height:34px;padding:0 10px;border:1px solid #9eaa9f;background:transparent;color:#405147;font-size:9px}.position-actions button:hover{background:#e0dacb}.position-actions small{flex:1;min-width:220px;color:#737c75;font-size:9px;line-height:1.5}
.location-picker-modal{width:min(760px,calc(100vw - 30px));padding:26px 28px}.location-picker-map-wrap{height:min(58vh,520px);position:relative;margin-top:20px;border:1px solid #aaa393;background:#dfe3d6}.location-picker-map-wrap #locationPickerMap{width:100%;height:100%}.location-crosshair{position:absolute;left:50%;top:50%;display:none;transform:translate(-50%,-50%);pointer-events:none;color:var(--rust);font-size:28px}
.location-picker-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px}.location-picker-footer span{color:#657068;font:10px var(--mono)}.location-picker-footer button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:600px){.coordinate-inputs{grid-template-columns:1fr}.position-actions{align-items:stretch;flex-direction:column}.position-actions button{width:100%}.position-actions small{min-width:0}.location-picker-modal{padding:20px 16px}.location-picker-map-wrap{height:55vh}.location-picker-footer{align-items:stretch;flex-direction:column}.location-picker-footer button{width:100%}}
@media(max-width:430px){.header-view-switch .view-tab span{display:none}.record-card-grid{grid-template-columns:1fr 1fr}.summary-search-tools{grid-template-columns:1fr}.summary-search-tools .tool-button{width:100%}}

/* Header refinement and compact mobile navigation */
.header-atlas{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
.header-atlas>span{line-height:1.1}.header-atlas strong{line-height:1.15}
.header-tools-menu{display:block;position:relative}
.header-view-switch{position:static;transform:none;display:flex}
.mobile-tools-extra,.mobile-tools-button{display:none}
.collection-stats{grid-template-columns:repeat(2,1fr)}
#tableView,#cardView{padding-left:30px}
.public-viewer .header-account{display:flex}
.public-viewer .header-account>.public-preview-link,.public-viewer .header-account>.primary-button,.public-viewer .header-account>.avatar{display:none}

@media(min-width:761px) and (max-width:960px){
  .topbar{height:58px;min-height:58px;flex-wrap:nowrap}
  .header-identity,.header-account{height:58px}
  .header-view-switch{position:static;transform:none;width:auto;height:auto;margin:0;padding:3px;border:1px solid rgba(243,240,230,.16)}
  .header-view-switch .view-tab{flex:0 0 auto;min-height:35px}
  .content-stage{height:calc(100svh - 88px)}
}

@media(max-width:760px){
  .topbar{height:58px;min-height:58px;padding:0 10px;flex-wrap:nowrap;overflow:visible}
  .header-identity{height:58px;min-width:0;flex:1;gap:0}
  .header-identity .brand,.header-divider,.header-atlas>span,.viewer-label{display:none!important}
  .header-atlas{display:flex}.header-atlas strong{max-width:130px;color:var(--paper);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .header-account{height:58px;gap:6px;margin-left:auto;position:static}
  .header-account>.primary-button{min-height:34px;padding:0 10px;font-size:9px}
  .header-account>.avatar{width:30px;height:30px}
  .mobile-tools-button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgba(243,240,230,.2);background:transparent;color:var(--paper);font-size:17px}
  .header-tools-menu{display:none;position:absolute;z-index:45;right:8px;top:54px;width:min(330px,calc(100vw - 16px));padding:10px;border:1px solid rgba(243,240,230,.18);background:#202b24;box-shadow:0 16px 42px rgba(10,18,13,.4)}
  .header-tools-menu.is-open{display:block}
  .header-view-switch{width:100%;height:auto;margin:0;padding:3px;border:1px solid rgba(243,240,230,.15)}
  .header-view-switch .view-tab{max-width:none;min-height:40px;flex:1}
  .mobile-tools-extra{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:8px}
  .mobile-tools-extra .search-box{width:100%;height:39px}.mobile-tools-extra .tool-button{min-height:39px;padding:0 10px}
  .mobile-tools-extra>a{grid-column:1/-1;padding:9px 3px 2px;color:#c9d0ca;font-size:10px;text-decoration:none}
  .public-viewer .mobile-tools-button{display:grid}
  .content-stage{height:calc(100svh - 88px);overflow:hidden;background:var(--forest-950)}
  .map-summary{position:absolute;top:10px;left:10px;width:min(285px,calc(100vw - 20px));padding:10px 11px;border:1px solid rgba(243,240,230,.18);border-radius:2px;box-shadow:0 12px 28px rgba(12,22,15,.25)}
  .map-summary.is-collapsed{width:min(285px,calc(100vw - 20px));padding:9px 11px}
  .map-summary-toggle{top:5px;right:5px}
  .map-summary-content{padding-right:24px}
  .summary-search-tools{display:none}
  .collection-stats{margin-top:9px}.collection-stats>div{min-height:43px;padding:6px 8px}.collection-stats strong{font-size:16px}
  .summary-legend{margin-top:8px;padding-top:7px;padding-right:26px}
  .summary-legend>p{display:none}.summary-legend>div{display:flex;gap:5px 9px;flex-wrap:wrap;max-height:48px;overflow:hidden}
  .summary-legend span{font-size:8px}.summary-legend i{width:6px;height:6px}
  .map-summary.is-collapsed .summary-legend{margin-top:0;padding-top:0;border-top:0}
  #mapView{height:100%;min-height:0}
  #tableView,#cardView{height:100%;min-height:0;overflow:auto;padding:20px 12px 28px}
  .account-menu{position:fixed;right:8px;top:56px}
}

/* ===========================================================
   2026-08-16 追記：スクリーンリーダー専用テキスト
   ヘッダーの .header-atlas strong は多数のルールから参照されていて
   h1 へ置き換えると崩れるため、見た目に影響しない h1 を別途置いている。
   =========================================================== */
.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* 公開ビューアに戻り導線が1つも無く行き止まりになっていたので復活させる。
   .public-viewer .header-account>.public-preview-link が display:none だった。 */
.public-viewer .header-account{ display:flex !important; }
.public-viewer .header-account > .public-preview-link{
  display:inline-flex !important; align-items:center;
  color:var(--paper); font-size:12px; white-space:nowrap;
}
@media(max-width:680px){
  .public-viewer .header-account > .public-preview-link{ font-size:11px; }
}