:root{font-family:Aptos,Arial,sans-serif;color:#242424;background:#fff;--turquoise:#54cec5;--pale:#bdf8f3;--bubble:#fff2cb}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #047a9d;outline-offset:3px}[hidden]{display:none!important}header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:16px 30px;border-bottom:1px solid #ddd}header small{letter-spacing:3px;font-size:10px;color:#687874}h1{font-size:24px;margin:6px 0 0}h2{font-size:27px;line-height:1.2;margin:10px 0 20px}p{line-height:1.55}.plain{background:#ffffffdf;border:0;border-radius:6px;padding:10px 12px;color:#345853}.primary,.secondary{border:2px solid var(--turquoise);border-radius:9px;padding:12px 18px;font-weight:700}.primary{background:var(--pale)}.secondary{background:#fff}#explore{display:grid;grid-template-columns:1fr 340px;height:calc(100dvh - 88px)}.map-shell{position:relative;min-height:500px;overflow:hidden;background:#66745f}.map{position:absolute;inset:0;overflow:hidden;touch-action:none;background:#3a4b3d url('reference-map.jpg') center/contain no-repeat}.map.has-tiles{background:#29352b}.tiles img{position:absolute;width:256px;height:256px;user-select:none}.marks button{pointer-events:auto}.map-top{position:absolute;top:16px;left:18px;right:70px;display:flex;align-items:start;flex-direction:column;gap:7px;pointer-events:none}.map-top span{background:#fffffff2;border-radius:5px;padding:8px 12px;font-size:12px;max-width:100%}.example-tag{color:#6d6558}.map-controls{position:absolute;right:14px;top:18px;display:grid;gap:4px}.map-controls button{width:40px;height:40px;background:white;border:1px solid #ccc;border-radius:6px;font-size:24px}.map-legend{position:absolute;bottom:35px;left:15px;background:#ffffffe8;padding:9px;font-size:11px;border-radius:5px}.map-legend span{display:inline-block;width:9px;height:9px;border:1px solid #888;border-radius:100%;margin:0 5px 0 8px}.negative{background:#ef705b}.mixed{background:#f4b15f}.neutral{background:#fff2cb}.positive{background:#a9d6b8}.attribution{position:absolute;bottom:0;left:0;right:0;padding:4px 8px;font-size:9px;background:#ffffffe6}.round-action{position:absolute;bottom:55px;left:50%;transform:translateX(-50%);border:4px solid var(--turquoise);border-radius:100%;width:156px;height:156px;background:var(--pale);font-weight:700;line-height:1.5;box-shadow:0 5px 20px #0002}.round-action span{display:block;font-size:45px}aside{padding:28px 24px;overflow:auto}aside p{font-size:13px;color:#606a65}label{display:block;font-size:13px;font-weight:bold;margin:16px 0 7px}select,input,textarea{width:100%;padding:11px;border:1px solid #aaa;border-radius:6px;background:#fff;color:#222}aside small{display:block;color:#6b6b6b;font-size:10px;line-height:1.5;margin-top:6px}.record-card{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:white;border:0;border-bottom:1px solid #ddd;padding:15px 0}.record-card strong{display:block;font-size:13px}.record-card small{font-size:11px;margin-top:6px}.swatch{display:inline-block;border:1px solid #666;border-radius:99px;width:10px;height:10px;margin-right:7px}#recorder{position:fixed;inset:88px 0 0;background:#d9ddd8;z-index:20;overflow:auto}#camera,.camera-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.camera-shade{background:#ffffffe0;opacity:.50;pointer-events:none}.record-heading{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;max-width:600px;margin:auto;padding:12px 20px}.record-heading>span{background:white;padding:6px 12px;border-radius:30px}.record-content{position:relative;z-index:2;max-width:440px;margin:0 auto;padding:10px 24px 25px}#question{font-size:27px;text-align:center;background:#ffffffeb;border-radius:9px;padding:16px;margin:0 0 10px}#cameraInfo{text-align:center;background:#ffffffe8;border-radius:6px;font-size:11px;padding:5px}#cameraStatus{margin:3px}#retryCamera{font-size:10px;padding:4px}#choices{max-height:245px;overflow:auto;display:grid;gap:0;padding:8px 0}.choice{background:#fffffff5;border:1px solid #878787;min-height:48px;font-size:19px;font-weight:bold;display:flex;align-items:center;justify-content:center;gap:15px}.choice.selected{background:#bce2fb;border:2px solid #42a3d8}.choice span{font-size:25px}#search{margin-top:10px;background:#fff}#appreciation{text-align:center;background:#ffffffc9;padding:14px;border-radius:10px}#ratingText{font-size:20px;font-weight:bold}#appreciation p{font-size:11px}.record-nav{display:flex;gap:10px}.record-nav button{flex:1}.privacy{font-size:11px;background:#ffffffde;padding:10px;border-radius:6px;text-align:center}#locationFields{background:#fffffff5;padding:15px;border-radius:9px}#locationFields p{font-size:12px}#useLocation{margin-top:12px;width:100%}.locating #recorder{left:auto;width:380px;background:#fffffff2}.locating .camera-shade,.locating #camera,.locating #cameraInfo{display:none}.locating #browse{visibility:hidden}.locating .round-action{display:none}.locating .record-content{padding:10px 20px}.locating #question{font-size:22px}.locating .locating .map-shell{padding-right:0}dialog{border:1px solid #bbb;border-radius:14px;padding:25px;max-width:520px;width:calc(100% - 28px);max-height:85dvh}dialog::backdrop{background:#183d3270}.close{float:right;font-size:25px;border:0;background:none}.detail-record{border-top:1px solid #ddd;padding:15px 0}.detail-record p{font-size:13px}.detail-record small{color:#666}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:100;background:#204d45;color:white;border-radius:8px;padding:13px 20px;max-width:90vw;display:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#submitStatus{background:#fff7d9;padding:8px;border-radius:5px;font-size:12px}#submitStatus:empty{display:none}
@media(max-width:700px){header{height:72px;padding:12px 16px}h1{font-size:19px}header small{font-size:8px}header button{font-size:11px}#explore{height:auto;display:flex;flex-direction:column}.map-shell{height:calc(78dvh - 72px);min-height:460px}aside{padding:22px}.round-action{width:125px;height:125px;bottom:72px;font-size:12px}.round-action span{font-size:34px}.map-legend{bottom:29px;font-size:10px}.map-top span{font-size:10px}.attribution{font-size:8px}#recorder{inset:72px 0 0}.record-content{padding:8px 20px 20px}#question{font-size:23px;padding:13px}.locating #recorder{position:relative;inset:auto;width:100%;overflow:visible}.locating #explore{height:340px}.locating .map-shell{min-height:340px;height:340px}.locating #browse{display:none}.locating .record-heading{padding:12px}.locating .map-legend{display:none}.locating #recorder .record-content{max-width:450px}.locating .map-top{top:8px}.locating .map-top span{font-size:9px}.locating }

/* ---- Version 2: map layers ---- */
.layers{position:absolute;inset:0;pointer-events:none;will-change:transform}
.tiles,.marks{position:absolute;inset:0;pointer-events:none}
.map-observation{position:absolute;transform:translate(-50%,-50%);background:none;border:0;padding:0;font-weight:bold;filter:drop-shadow(1px 2px 2px #0005)}
.map-observation.input{width:105px;height:90px}
.map-observation.input .puzzle{position:absolute;left:0;top:0;margin:0}
.map-observation.cluster{width:132px;height:84px;border-radius:50%;background:#fff;border:6px solid transparent;background:linear-gradient(#fffbea,#fffbea) padding-box,var(--ring) border-box;display:grid;place-content:center;gap:4px;font-size:13px}
.cluster-counts{font-size:11px;font-weight:600}.cluster-counts i{display:inline-block;width:8px;height:8px;border-radius:50%;border:1px solid #777;margin:0 2px 0 4px}
.map-observation.heat{width:96px;height:96px;border-radius:50%;isolation:isolate;display:grid;place-content:center}
.heat span{position:absolute;inset:-18px;border-radius:50%;background:var(--ring);filter:blur(14px);opacity:.75;z-index:-1}
.heat b{background:#fffd;border-radius:20px;padding:6px 10px}
.pin{position:absolute;transform:translate(-50%,-100%);font-size:36px;line-height:1;pointer-events:none;filter:drop-shadow(0 2px 2px #0006)}
.pin.draggable{pointer-events:auto;cursor:grab;touch-action:none}
.pin-radius{position:absolute;transform:translate(-50%,-50%);border-radius:50%;border:2px dashed #fff;background:#54cec522;pointer-events:none}
.me{position:absolute;width:16px;height:16px;transform:translate(-50%,-50%);border-radius:50%;background:#1a73e8;border:3px solid #fff;box-shadow:0 0 0 2px #1a73e855;pointer-events:none}

/* ---- "I'm ..." puzzle piece ---- */
.puzzle{position:relative;width:300px;height:180px;margin:12px auto 6px;flex:none}
.puzzle svg{position:absolute;inset:0;width:100%;height:100%}
.puzzle line{stroke:#3d3d3d;stroke-width:2.5}
.piece{position:absolute;transform:translate(-50%,-50%);width:90px;height:90px;border-radius:50%;border:3px solid #4a4a4a;background:var(--bubble);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:13px;line-height:1.1;padding:6px;overflow-wrap:anywhere;transition:background .2s}
.piece em{font-style:normal;font-size:20px;margin-bottom:2px}
.piece.empty{border-style:dashed;border-color:#777;background:#ffffffb0;color:#666;font-weight:600}
.piece.proposed{border-style:dotted}
.puzzle .avatar{position:absolute;left:0;top:116px;width:56px;height:56px;border-radius:12px;border:2px solid #b9b9b9;background:#fff;font-size:34px;display:grid;place-content:center;padding:0;line-height:1}
.puzzle button.avatar:hover{border-color:var(--turquoise)}
.puzzle .im{position:absolute;left:62px;top:132px;font-weight:800;font-size:21px}
.puzzle.compact{transform:scale(.5);transform-origin:0 0}
#puzzlePreview{background:#ffffffb8;border-radius:12px;margin:12px 0}
.detail-record .puzzle{margin-left:0}
.mini-avatar{font-size:24px;line-height:1;width:34px;height:34px;display:grid;place-content:center;border:1px solid #ccc;border-radius:8px;flex:none}
.tag{display:inline-block;font-size:10px;font-weight:700;border-radius:20px;padding:2px 8px;margin:6px 4px 0 0;background:#eee;color:#444}
.tag.test{background:#e8e4ff;color:#3d2f8f}.tag.proposed{background:#fff2cb;color:#6b5100}

/* ---- Choices, search, proposals ---- */
.choice-heading{margin:8px 0 4px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#4d5c58;background:#ffffffd9;padding:4px 8px;border-radius:4px}
#choices{max-height:260px}
.propose{width:100%;margin-top:8px}.propose.selected{background:var(--pale)}

/* ---- Appreciation gradient: Positive / Mixed / Neutral / Mixed / Negative ---- */
.gradient-wrap{display:flex;justify-content:center;align-items:stretch;gap:12px;height:240px;margin:6px auto}
.gradient-arrow{width:46px;background:linear-gradient(to bottom,#3f9f5c 0%,#bcdc86 28%,#fff28a 50%,#f4b15f 72%,#e0483a 100%);clip-path:polygon(50% 0,100% 11%,68% 11%,68% 89%,100% 89%,50% 100%,0 89%,32% 89%,32% 11%,0 11%)}
#rating{writing-mode:vertical-lr;direction:rtl;appearance:auto;width:30px;height:auto;margin:22px 0;padding:0;border:0;background:none;accent-color:#333}
.gradient-labels{display:flex;flex-direction:column;justify-content:space-between;padding:12px 0}
.gradient-labels button{background:none;border:0;text-align:left;font-size:14px;padding:3px 8px;border-radius:5px;color:#333}
.gradient-labels button.on{background:#fff;font-weight:800;box-shadow:0 0 0 2px #333}

/* ---- Location step ---- */
.check{display:flex;gap:8px;align-items:flex-start;font-weight:normal;font-size:12px;line-height:1.4}
.check input{width:auto;margin-top:2px}
#demoWrap{background:#f2f0ff;border-radius:8px;padding:10px;margin:8px 0}
.time-info{font-size:12px;background:#f4f8f7;border-radius:6px;padding:8px}
#extra summary{cursor:pointer;font-size:13px;font-weight:700;margin-top:6px}
.locating #puzzlePreview .puzzle{transform:scale(.8);margin:-8px auto -30px}

/* ---- Avatar picker ---- */
.avatar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.avatar-grid button{font-size:34px;aspect-ratio:1;border:2px solid #ccc;border-radius:12px;background:#fff}
.avatar-grid button.selected,.avatar-grid button:hover{border-color:var(--turquoise);background:var(--pale)}
@media(max-width:700px){.locating #puzzlePreview{display:none}.puzzle{transform-origin:50% 0}}
@media(max-width:340px){.puzzle:not(.compact){transform:scale(.9);transform-origin:0 0}}
.me-halo{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:#1a73e822;border:1px solid #1a73e866;pointer-events:none}

/* ---- Location required ---- */
.round-action small{display:block;font-size:11px;font-weight:700;color:#8a2b1d;line-height:1.2}
.round-action small:empty{display:none}
.round-action.locked{background:#eef3f2;border-color:#9fb5b1;filter:grayscale(.5)}
#locationDialog{max-width:440px;text-align:center}
#locationDialog .loc-icon{font-size:44px}
#locationDialog h2{font-size:23px;margin:6px 0 12px}
#locationDialog ol{text-align:left;padding-left:22px;font-size:14px;line-height:1.55;background:#f4f8f7;border-radius:10px;padding:12px 12px 12px 34px}
#locationDialog ol:empty{display:none}
#locationDialog li{margin:4px 0}
#locationDialog button{display:block;width:100%;margin-top:10px}
#locationDialog .loc-why{font-size:12px;color:#5c6b67}
#locStatus{font-size:13px;color:#8a2b1d}#locStatus:empty{display:none}

/* ---- Groups: marker and one-by-one details ---- */
.cluster-total{font-size:22px;font-weight:800;line-height:1}
.cluster-name{font-size:12px}
.map-observation.cluster{gap:2px}
#detailSummary{display:flex;flex-wrap:wrap;gap:6px;margin:-8px 0 4px}
.count-chip{font-size:12px;font-weight:600;background:#f3f5f4;border-radius:20px;padding:4px 10px}
.count-chip i{display:inline-block;width:9px;height:9px;border-radius:50%;border:1px solid #777;margin-right:5px}
.detail-nav{display:flex;align-items:center;gap:10px;border-top:1px solid #ddd;padding-top:12px}
.detail-nav button{flex:1;padding:10px}
.detail-nav span{font-size:14px;font-weight:700;min-width:60px;text-align:center}
#details .detail-record{border-top:0;min-height:300px}

/* ---- Darker imagery so inputs stand out (same precision) ---- */
.tiles img{filter:brightness(.58) saturate(.7) contrast(1.08)}
.map.has-tiles{background:#1c241e}
.map-observation.input .piece{border-color:#fff;box-shadow:0 0 0 2px #222}
.map-observation.input .puzzle line{stroke:#fff;stroke-width:3}
/* ---- Points of interest ---- */
.poi{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;pointer-events:auto}
.poi-star{width:34px;height:34px;border-radius:50%;display:grid;place-content:center;background:#1f2a44;color:#ffd24a;font-size:20px;border:2px solid #ffd24a;box-shadow:0 2px 6px #0007}
.poi-label{background:#1f2a44e6;color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:12px;white-space:nowrap}
.poi:hover .poi-star,.poi:focus-visible .poi-star{transform:scale(1.12)}
#poiDialog .poi-kind{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:#1f2a44;color:#ffd24a;border-radius:20px;padding:3px 10px}
#poiDialog h2{margin:10px 0 4px}#poiDialog .poi-org{margin:0 0 10px;color:#4d5c58;font-weight:600}
#poiDialog a.visit{display:block;text-align:center;text-decoration:none;color:#222;margin:14px 0 8px}
#poiDialog small{display:block;color:#6b6b6b}
.map-legend .star{color:#ffd24a;background:#1f2a44;border-radius:50%;padding:0 3px;margin-left:8px}

/* ---- Header profile button ---- */
.header-actions{display:flex;align-items:center;gap:8px}
.profile-btn{display:flex;align-items:center;gap:6px;border:2px solid var(--turquoise);background:var(--pale);border-radius:30px;padding:5px 12px 5px 6px;font-weight:700;font-size:13px}
.profile-btn #profileFace{font-size:22px;line-height:1;width:30px;height:30px;display:grid;place-content:center;background:#fff;border-radius:50%}
/* ---- Account form ---- */
#accountDialog{max-width:560px}
#accountDialog fieldset{border:1px solid #ddd;border-radius:10px;padding:10px 12px;margin:14px 0}
#accountDialog legend{font-weight:700;font-size:13px;padding:0 4px}
#accountDialog legend span{font-weight:400;color:#6b6b6b;font-size:12px;margin-left:4px}
.field-note{font-size:12px;color:#5c6b67;margin:4px 0 8px}
.avatar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.avatar-option{margin:0;position:relative}
.avatar-option input{position:absolute;opacity:0;inset:0}
.avatar-option span{display:grid;place-content:center;font-size:32px;aspect-ratio:1;border:2px solid #ccc;border-radius:12px;background:#fff;cursor:pointer}
.avatar-option input:checked+span{border-color:#047a9d;background:var(--pale);box-shadow:0 0 0 2px #047a9d}
.avatar-option input:focus-visible+span{outline:3px solid #047a9d;outline-offset:2px}
.about{background:#f7f9f8}
.demo-field{border:0!important;padding:0!important;margin:12px 0 0!important}
.demo-field legend{font-size:13px;padding:0!important;margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;margin:0;font-weight:500;font-size:12px;border:1px solid #bbb;border-radius:20px;padding:5px 10px;background:#fff;cursor:pointer}
.chip input{width:auto;margin:0}
.chip:has(input:checked){background:var(--pale);border-color:#047a9d}
#accountDialog .primary,#accountDialog .danger{width:100%;margin-top:10px}
.danger{background:#fff;border:2px solid #c0392b;color:#a0281b;border-radius:9px;padding:10px 18px;font-weight:700}
#accountStatus{font-size:13px;color:#8a2b1d}#accountStatus:empty{display:none}
#consentWrap{margin-top:12px;background:#fff7e0;border-radius:8px;padding:10px}
/* ---- Profile and badges ---- */
.profile-head{display:flex;gap:14px;align-items:center}
.profile-avatar{font-size:44px;width:72px;height:72px;display:grid;place-content:center;border:2px solid var(--turquoise);border-radius:16px;background:var(--pale);flex:none}
.profile-head h2{margin:0 0 4px}.profile-head p{margin:0;font-size:13px;color:#5c6b67}
#profileDialog h3{margin:18px 0 8px;font-size:16px}#badgeCount{color:#5c6b67;font-weight:600}
.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.badge{border:1px solid #ddd;border-radius:10px;padding:8px;text-align:center;background:#f6f6f6;color:#888}
.badge b{display:block;font-size:12px;margin-top:2px}.badge small{display:block;font-size:10px;line-height:1.3;margin-top:3px}
.badge-icon{font-size:26px;filter:grayscale(1);opacity:.6}
.badge.earned{background:#fffbea;border-color:#e9c84a;color:#333}.badge.earned .badge-icon{filter:none;opacity:1}
#profileEdit{width:100%;margin-top:14px}
@media(max-width:700px){.profile-btn #profileLabel{display:none}.profile-btn{padding:4px}.badge-grid{grid-template-columns:repeat(2,1fr)}}

/* ---- Live local places ---- */
.poi.found .poi-star{width:28px;height:28px;font-size:16px;background:#1f2a44cc;border-style:dashed}
.places-status{background:#1f2a44f0!important;color:#ffd24a;font-weight:600}
.attribution a{color:inherit}

/* ================= Side panel (version 5) ================= */
#browse{background:
  radial-gradient(circle at 1px 1px,#2f6f6914 1px,transparent 0) 0 0/16px 16px,
  linear-gradient(180deg,#e6f7f5 0%,#f5faf9 38%,#fbfaf6 100%);
 border-left:1px solid #d6e4e1;padding:22px 18px 40px}
.side-intro{padding:2px 4px 6px}
.eyebrow{font-size:10px!important;letter-spacing:2.5px;text-transform:uppercase;color:#2f8f86!important;font-weight:700;margin:0 0 4px}
#browse h2{font-size:26px;margin:4px 0 8px;letter-spacing:-.3px}
.side-intro>p:last-child{font-size:13px;color:#53635f;margin:0 0 14px}
.site-card{border-top:5px solid var(--turquoise)!important}
.site-card,.filter-card{background:#fff;border:1px solid #dbe7e4;border-radius:14px;box-shadow:0 6px 18px #1d4a4410;overflow:hidden;margin-bottom:14px}
.site-body{padding:12px 14px 14px}
.site-label{margin:0 0 5px!important;font-size:11px!important;text-transform:uppercase;letter-spacing:1px;color:#5c6b67}
.site-body select{padding:8px 10px;font-size:14px}
.site-body h3{margin:12px 0 2px;font-size:18px}
.site-area{margin:0;font-size:12px!important;color:#5c6b67!important}
.site-stats{margin-top:10px}.site-stats p{margin:0 0 6px;font-size:13px}.site-stats .muted{color:#7a8580}
.dist-bar{display:flex;height:8px;border-radius:6px;overflow:hidden;border:1px solid #0001}
.filter-card{padding:12px 14px}
.filter-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.filter-card label{margin:0 0 5px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#5c6b67}
.filter-card select{padding:8px;font-size:13px}
.filter-card .check{margin:10px 0 0;text-transform:none;letter-spacing:0;font-size:12px;color:#333}
.list-head{display:flex;align-items:center;justify-content:space-between;margin:18px 2px 4px}
.list-head h3{margin:0;font-size:16px}#listCount{color:#5c6b67;font-weight:500}
.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid #cfdcd9;background:#fff;font-size:17px;color:#2f6f69}
.icon-btn:hover{background:var(--pale)}
#dataStatus{font-size:11px;color:#6b7a76;margin:0 2px 8px;min-height:0}
#records{display:grid;gap:10px}
#browse .record-card{display:flex;gap:14px;align-items:center;padding:12px 10px 12px 14px;background:#fff;border:1px solid #dde8e5;border-left:5px solid var(--bubble);border-radius:12px;box-shadow:0 2px 8px #1d4a440d;text-align:left;transition:transform .15s,box-shadow .15s}
#browse .record-card:hover{transform:translateY(-1px);box-shadow:0 6px 16px #1d4a441f}
.card-body{display:flex;flex-direction:column;gap:6px;min-width:0;padding:2px 0}
.words{display:flex;flex-wrap:wrap;gap:4px}
.word{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;background:#f3f6f5;border-radius:20px;padding:3px 8px}
.word em{font-style:normal;font-size:17px;line-height:1}
.meta{font-size:11px;color:#5c6b67;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pill{font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.4px;border-radius:20px;padding:2px 8px;color:#222}
.pill.negative{background:#f6b3a7}.pill.mixed{background:#f8d29e}.pill.neutral{background:#f6ecc9}.pill.positive{background:#bfe3c8}
.place{font-size:11px;color:#444}
.card-body .tag{margin:0 4px 0 0;align-self:flex-start}
.empty-list{text-align:center;background:#ffffffb3;border:1px dashed #b9cdc8;border-radius:12px;padding:22px 16px;color:#53635f}
.empty-list span{font-size:30px}.empty-list p{margin:6px 0 0;font-size:13px}
@media(max-width:700px){#browse{border-left:0;border-top:1px solid #d6e4e1}}

/* ---- Grouped observations in the side list ---- */
.group-card{background:#fff;border:1px solid #dde8e5;border-left:5px solid var(--turquoise);border-radius:12px;box-shadow:0 2px 8px #1d4a440d;overflow:hidden}
.group-head{display:flex;flex-direction:column;gap:8px;width:100%;text-align:left;background:none;border:0;padding:12px 12px 12px 14px}
.group-head:hover{background:#f6fbfa}
.group-title{display:flex;align-items:center;gap:10px}
.group-title b{display:block;font-size:15px}.group-title small{display:block;font-size:11px;color:#5c6b67;margin-top:2px}
.group-icon{font-size:26px;width:42px;height:42px;display:grid;place-content:center;background:var(--pale);border-radius:50%;flex:none}
.chev{margin-left:auto;font-size:16px;color:#2f6f69;transition:transform .2s}
.group-card.open .chev{transform:rotate(180deg)}
.times{font-weight:800;color:#2f6f69;margin-left:2px}
.group-counts{display:flex;flex-wrap:wrap;gap:4px}
.group-body{display:grid;gap:8px;padding:0 10px 12px 14px;border-top:1px dashed #d6e4e1;padding-top:10px;background:#f8fbfa}
#browse .record-card.nested{box-shadow:none}

/* ================= Version 5 ================= */
/* Draft */
.draft-card{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;background:#fffbea;border:1px solid #e9c84a;border-radius:14px;padding:10px 12px;margin-bottom:14px;box-shadow:0 4px 12px #6b510012}
.draft-card>span{font-size:24px;grid-row:span 2}.draft-card b{font-size:14px}.draft-card small{display:block;font-size:11px;color:#6b5f3a;margin:2px 0 0;line-height:1.35}
.draft-card .primary{padding:7px 12px;font-size:13px}.draft-card .plain{grid-column:3;padding:2px 6px;font-size:12px;background:none;text-decoration:underline}
/* City questions */
.mission-card{background:#1f2a44;color:#fff;border-radius:14px;padding:12px 14px;margin-bottom:14px;box-shadow:0 6px 18px #1f2a4430}
.mission-card h3{margin:0 0 2px;font-size:15px;color:#ffd24a}.mission-card .field-note{color:#d5dbea;margin:0 0 8px;font-size:12px}
.mission{display:block;width:100%;text-align:left;background:#ffffff14;border:1px solid #ffd24a55;border-radius:10px;color:#fff;padding:9px 10px;margin-top:6px}
.mission:hover{background:#ffffff22}.mission b{display:block;font-size:14px}.mission span{display:block;font-size:12px;color:#e8ecf5;margin:2px 0 4px;line-height:1.4}
.mission small{font-size:11px;color:#ffd24a}
.mission-area{position:absolute;transform:translate(-50%,-50%);border-radius:50%;border:2px dashed #ffd24a;background:#ffd24a14;pointer-events:none;display:grid;place-content:center}
.mission-area span{background:#1f2a44e6;color:#ffd24a;font-size:11px;font-weight:700;padding:3px 8px;border-radius:12px;white-space:nowrap}
.mission-hint{font-size:12px;background:#1f2a44;color:#fff;border-radius:8px;padding:8px 10px;line-height:1.45}.mission-hint .bonus{color:#ffd24a;font-weight:800;white-space:nowrap}
/* Filters (collapsible) */
details.filter-card>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
details.filter-card>summary::-webkit-details-marker{display:none}
details.filter-card>summary::before{content:'⚙';font-size:15px;color:#2f8f86}details.filter-card>summary::after{content:'▾';margin-left:auto;color:#2f6f69;transition:transform .2s}
details.filter-card[open]>summary::after{transform:rotate(180deg)}details.filter-card[open]>summary{margin-bottom:10px}
.filter-count{background:var(--turquoise);color:#fff;border-radius:20px;font-size:11px;padding:1px 7px}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid #cfdcd9;border-radius:9px;overflow:hidden;margin-bottom:10px}
.seg button{border:0;background:#fff;padding:7px;font-weight:700;font-size:13px;color:#345853}.seg button.on{background:var(--pale);color:#123}
.filter-card input[type=search]{padding:8px 10px;font-size:13px;margin-bottom:10px}.filter-row{row-gap:8px}
#fClear{font-size:12px;padding:6px 0 0;background:none;text-decoration:underline}
/* Cards */
.card-body .tags{display:flex;flex-wrap:wrap;gap:4px}.card-body .tags .tag{margin:0}
.tag.mine{background:var(--pale);color:#1d5a54}.tag.answers{background:#e6f6f4;color:#1d5a54}
.tag.status{background:#eef0ff;color:#2d3a7a}.tag.status.changed{background:#dff3e4;color:#1e6b34}.tag.status.planned{background:#fff1d6;color:#7a4b00}
.group-counts .tag{margin:0}
/* Recorder */
.choice .syn{font-size:12px;font-weight:500;color:#4d6b66;margin-left:-6px}
#discard{font-size:12px;margin-left:auto;margin-right:8px;text-decoration:underline}
.moving{border:1px solid #dfe8e6;border-radius:10px;padding:8px 10px;margin:10px 0}
.moving legend{font-size:13px;font-weight:700;padding:0 4px}.moving legend span{font-weight:400;color:#6b6b6b;font-size:12px}
.moving .chip{font-size:12px}.moving .field-note{font-size:11px!important;margin:8px 0 0}
.editing #camera,.editing .camera-shade,.editing #cameraInfo,.editing #locationHelp,.editing #demoWrap,.editing #useLocation,.editing #locationStatus{display:none!important}
.editing #recorder{background:#eef4f2}
/* Details */
.context-line{font-size:12px!important;color:#4d5c58;margin:4px 0}
.city-status{background:#eef0ff;border-radius:8px;padding:8px 10px;font-size:13px!important}.city-status.changed{background:#dff3e4}.city-status.planned{background:#fff1d6}
.answers-box{margin-top:14px;border-top:1px dashed #d6e4e1;padding-top:10px}.answers-box h3{font-size:15px;margin:0 0 4px}
.answer-counts{font-size:12px!important;color:#4d5c58;margin:0 0 6px}.answers-bar{margin-bottom:8px}
.answer-buttons{display:grid;gap:6px}
.answer{display:flex;align-items:center;gap:10px;text-align:left;background:#fff;border:2px solid #cfdcd9;border-radius:10px;padding:9px 12px;font-weight:700;font-size:14px}
.answer span{font-size:20px}.answer:hover{border-color:var(--turquoise)}.answer.on{background:var(--pale);border-color:#047a9d}
.own-actions{display:flex;gap:8px}.own-actions button{flex:1;padding:9px}
.respond-status{font-size:12px!important;color:#8a2b1d}.respond-status:empty{display:none}
/* Profile: points, updates, ledger */
.profile-btn{position:relative}.profile-btn.has-updates::after{content:'';position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:#e0483a;border:2px solid #fff}
.points-box{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.points-box div{background:var(--pale);border:1px solid #9edcd5;border-radius:12px;padding:10px;text-align:center}
.points-box b{display:block;font-size:30px;line-height:1.1}.points-box span{font-size:12px;color:#345853}
.points-box .pending{background:#fffbea;border-color:#e9c84a}
.points-how{font-size:13px;margin-top:8px}.points-how summary{cursor:pointer;font-weight:700;color:#2f6f69}.points-how ul{padding-left:18px;line-height:1.5}.points-how p{margin:6px 0}
.new-dot{background:#e0483a;color:#fff;font-size:10px;border-radius:10px;padding:1px 6px;vertical-align:middle}
.updates{display:grid;gap:6px}
.update{display:flex;gap:10px;align-items:flex-start;text-align:left;background:#eef0ff;border:0;border-radius:10px;padding:8px 10px;font-size:13px}
.update>span:first-child{font-size:20px}.update small{display:block;color:#4d5c58;margin-top:2px}
.ledger{list-style:none;padding:0;margin:0;display:grid;gap:4px;max-height:240px;overflow:auto}
.ledger li{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:center;font-size:12px;border-bottom:1px solid #eee;padding:5px 0}
.ledger .pts{font-weight:800;font-size:14px;color:#1e6b34;text-align:right}.ledger li.pending .pts{color:#9a6b00}.ledger li.void .pts{color:#999}
.ledger li.void b{color:#888}.ledger small{display:block;color:#6b6b6b;font-size:11px}.ledger .when{text-align:right;color:#5c6b67;font-size:11px}.ledger .empty{display:block;color:#6b6b6b}
#draftDialog{max-width:420px;text-align:center}#draftDialog .loc-icon{font-size:40px}#draftDialog button{display:block;width:100%;margin-top:10px}
@media(max-width:700px){.draft-card{grid-template-columns:auto 1fr}.draft-card .primary{grid-column:1/-1}.draft-card .plain{grid-column:1/-1}}

/* ---- Local places: emoji icons instead of stars ---- */
.poi-icon{width:38px;height:38px;border-radius:50%;display:grid;place-content:center;background:#fffdf5;font-size:21px;line-height:1;border:3px solid #ffd24a;box-shadow:0 2px 8px #0008;transition:transform .15s}
.poi.found .poi-icon{width:32px;height:32px;font-size:17px;border:2px dashed #1f2a44;background:#ffffffee}
.poi:hover .poi-icon,.poi:focus-visible .poi-icon{transform:scale(1.15)}
.legend-places{display:inline!important;width:auto!important;height:auto!important;border:0!important;margin:0 3px 0 8px!important;letter-spacing:1px}
.places-status{color:#fff!important}
/* Place icons: emoji only, no background disc. A soft shadow keeps them readable on the dark imagery. */
.poi-icon,.poi.found .poi-icon{background:none;border:0;box-shadow:none;width:auto;height:auto;font-size:28px;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 2px 3px #000a)}
.poi.found .poi-icon{font-size:23px;opacity:.9}

/* ================= Version 5.3: photo and place name ================= */
.photo-bar{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;background:#ffffffe8;border-radius:10px;padding:8px 10px;margin:8px 0}
.shutter{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;border:3px solid #e0483a;background:#fff;border-radius:40px;padding:10px 16px;font-weight:800;font-size:16px;color:#a0281b;box-shadow:0 3px 10px #0002}
.shutter span:first-child{font-size:22px}.shutter:hover{background:#fff4f2}
.shutter.done{border-color:var(--turquoise);color:#1d5a54;font-size:14px;padding:7px 14px}
.photo-preview{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-weight:700;color:#1e6b34;font-size:13px}
.photo-preview img{width:76px;height:76px;object-fit:cover;border-radius:8px;border:2px solid var(--turquoise)}
.photo-file{grid-column:1/-1;margin:0;font-size:12px;font-weight:600;color:#345853;text-align:center;text-decoration:underline;cursor:pointer}
.photo-file input{position:absolute;width:1px;height:1px;opacity:0}
.photo-status{grid-column:1/-1;margin:0;font-size:12px;color:#8a2b1d;text-align:center}.photo-status:empty{display:none}
#recorder.flash::after{content:'';position:fixed;inset:0;background:#fff;opacity:.85;z-index:50;pointer-events:none}
.place-field{background:#f4f8f7;border:2px solid #54cec5;border-radius:10px;padding:8px 10px;margin:10px 0}
.place-field label{margin:0 0 6px;font-size:14px}.req{font-size:11px;font-weight:700;color:#fff;background:#e0483a;border-radius:10px;padding:1px 7px;margin-left:4px;vertical-align:middle}
.place-input{position:relative}.place-input input{padding-right:70px;font-size:15px;font-weight:600}
.auto-tag{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;background:var(--pale);color:#1d5a54;border-radius:10px;padding:2px 7px}
.place-field .field-note{margin:6px 0 0;font-size:11px!important}
#useLocation.following{background:var(--pale);border-color:#047a9d}
.photo-check{display:flex;align-items:center;gap:8px;font-size:12px!important;font-weight:700;color:#1e6b34;margin:6px 0}
.photo-check img{width:40px;height:40px;object-fit:cover;border-radius:6px}.photo-check.missing{color:#a0281b}
.obs-photo{margin:10px 0}.obs-photo img{display:block;width:100%;max-height:340px;object-fit:cover;border-radius:10px}.obs-photo small{display:block;color:#5c6b67;margin-top:4px}

/* ---- Step 5 layout: the map stays fully visible and usable ---- */
/* Desktop: the panel sits beside the map (not over it), so the zoom buttons stay reachable. */
.locating #explore{grid-template-columns:1fr 380px}
.map{touch-action:none;cursor:grab}.map:active{cursor:grabbing}.locating .map{cursor:crosshair}
.map-controls button{touch-action:manipulation}
/* Narrow windows and phones: map on top, form below. */
@media(max-width:1000px){
 .locating #explore{display:block;height:min(52dvh,440px)}
 .locating .map-shell{height:100%;min-height:300px}
 .locating #browse{display:none}
 .locating #recorder{position:relative;inset:auto;width:100%;overflow:visible;background:#fffffff2}
 .locating #recorder .record-content{max-width:520px}
 .locating .round-action{display:none}
 .locating .map-controls{top:10px;right:10px}.locating .map-controls button{width:44px;height:44px}
}

/* ================= Version 5.5: civic places, Your city, open data ================= */
.city-card{background:#fff;border:1px solid #dbe7e4;border-top:4px solid #2b4c7e;border-radius:14px;padding:12px 14px;margin-bottom:14px;box-shadow:0 6px 18px #1d4a4410}
.city-eyebrow{margin:0!important;font-size:10px!important;letter-spacing:2px;text-transform:uppercase;color:#2b4c7e!important;font-weight:700}
.city-card h3{margin:2px 0 10px;font-size:17px}
.city-links{display:grid;gap:6px}
.city-link{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:center;text-decoration:none;color:#14202b;border:1px solid #dfe6ee;border-radius:10px;padding:8px 10px;background:#f8fafc}
.city-link:hover{border-color:#2b4c7e;background:#eef3fa}.city-link>span:first-child{font-size:20px}
.city-link b{display:block;font-size:13px}.city-link small{display:block;font-size:11px;color:#5e6b78;margin-top:1px}
.city-link.main{background:#2b4c7e;border-color:#2b4c7e;color:#fff}.city-link.main small{color:#d6e1f2}.city-link.main:hover{background:#223e68}
.city-card .link{background:none;border:0;color:#2b4c7e;font-weight:600;font-size:12px;padding:6px 0 0;text-decoration:underline;cursor:pointer}
.city-done{margin-top:8px}.city-done:empty{display:none}
.city-done-title{margin:6px 0 4px!important;font-size:12px!important;font-weight:700;color:#14202b!important}.city-done-title b{background:#dff3e4;color:#1e6b34;border-radius:10px;padding:0 7px;margin-left:4px}
.city-done-item{display:flex;gap:8px;align-items:flex-start;width:100%;text-align:left;background:#f6faf7;border:0;border-radius:8px;padding:6px 8px;margin-top:4px;font-size:12px}
.city-done-item:hover{background:#e9f5ec}.city-done-item small{display:block;color:#5e6b78;margin-top:2px}
.city-note{margin:10px 0 0!important;font-size:11px!important;color:#5e6b78!important;background:#fff7e6;border-radius:8px;padding:6px 8px;line-height:1.45}
.open-data{margin:16px 2px 0;font-size:12px!important;color:#53635f}.open-data a{color:#2b4c7e;font-weight:600}.open-data small{display:block;margin-top:2px;font-size:11px}
.share-link{display:block;margin-top:10px;background:none;border:0;padding:0;color:#2b4c7e;font-weight:600;font-size:13px;text-decoration:underline;cursor:pointer}

/* Language switch (French / English) */
.lang-btn{font:inherit;font-size:.82rem;font-weight:600;padding:.35rem .7rem;border-radius:999px;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;opacity:.85}
.lang-btn:hover,.lang-btn:focus-visible{opacity:1}
.lang-slot{display:block;margin-bottom:.5rem}
.lang-short{display:none}
@media (max-width:600px){.lang-btn .lang-long{display:none}.lang-btn .lang-short{display:inline}}

/* ---- Version 6.1: app header in the moderator style (dark bar, brand tile, live place) ---- */
:root{--head:64px}
header.app-head{height:var(--head);padding:0 22px;background:#0f1b2d;color:#e8eef5;border-bottom:0;gap:16px;position:relative;z-index:5;box-shadow:0 2px 10px #0f1b2d33}
header.app-head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#54cec5,#2b8a83 40%,#e7b04b 70%,#e0483a)}
.app-head .brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;flex-shrink:0}
.app-head .brand-mark{width:38px;height:38px;border-radius:11px;display:grid;place-content:center;font-size:21px;background:linear-gradient(135deg,#54cec5,#2b8a83);box-shadow:inset 0 0 0 1px #ffffff2a}
.app-head .brand-text b{display:block;font-size:16px;letter-spacing:.2px}
.app-head .brand-text small{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#8fb3c9;margin-top:1px}
.head-place{display:flex;align-items:center;gap:9px;margin:0 auto;background:#ffffff0f;border:1px solid #ffffff1f;color:#fff;border-radius:12px;padding:6px 14px 6px 12px;max-width:42vw;text-align:left;transition:background .15s}
.head-place:hover,.head-place:focus-visible{background:#ffffff1c}
.head-place-text{min-width:0}.head-place-text small{display:block;font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:#8fb3c9}
.head-place-text b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-dot{width:9px;height:9px;border-radius:50%;background:#54cec5;flex-shrink:0;box-shadow:0 0 0 0 #54cec580;animation:livepulse 2.2s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 #54cec580}70%{box-shadow:0 0 0 9px #54cec500}100%{box-shadow:0 0 0 0 #54cec500}}
@media(prefers-reduced-motion:reduce){.live-dot{animation:none}}
.app-head .header-actions{gap:10px;flex-shrink:0}
.head-btn{display:flex;align-items:center;gap:7px;background:transparent;border:0;color:#c8d3df;padding:6px 8px;border-radius:9px;font-size:14px}
.head-btn:hover,.head-btn:focus-visible{background:#ffffff14;color:#fff}
.head-ico{width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-content:center;font-size:12px;font-weight:700}
.app-head .lang-btn{color:#e8eef5;border-color:#ffffff40;background:#ffffff0a}
.app-head .lang-btn:hover{background:#ffffff1c}
.app-head .profile-btn{background:#54cec5;border-color:#54cec5;color:#0f1b2d}
.app-head .profile-btn:hover{background:#7ddbd3}
.app-head .profile-btn.has-updates::after{border-color:#0f1b2d}
#explore{height:calc(100dvh - var(--head))}
.city-card.flash,#cityCard.flash{animation:cardflash 1.2s}
@keyframes cardflash{0%,40%{box-shadow:0 0 0 3px #54cec5}100%{box-shadow:0 0 0 0 #54cec500}}
@media(max-width:700px){
 :root{--head:58px}
 header.app-head{height:var(--head);padding:0 12px;gap:8px}
 .app-head .brand-text small{display:none}.app-head .brand-text b{font-size:14px}
 .app-head .brand-mark{width:34px;height:34px;font-size:18px}
 .head-lbl{display:none}.head-btn{padding:4px}
 .head-place{padding:5px 10px;max-width:none;flex:1;min-width:0}.head-place-text small{display:none}.head-place-text b{font-size:12.5px}
 .map-shell{height:calc(78dvh - var(--head))}
}
@media(max-width:430px){.app-head .brand-text{display:none}}
#recorder{top:var(--head)}
@media(max-width:700px){.locating #recorder{top:auto}}

/* ---- Version 6.2: side panel with tabs (Observations / Questions / Your city), shorter lists ---- */
aside#browse{background:#f6f8fa;padding:20px 18px}
.side-intro{padding:0 2px 12px}
.side-intro h2{font-size:21px;line-height:1.2;margin:4px 0 6px;color:#0f1b2d}
.side-intro>p:last-child{font-size:12.5px;margin:0;color:#5e6b78}
.side-tabs{position:sticky;top:-20px;z-index:3;display:flex;gap:4px;padding:4px;margin:0 0 14px;background:#e8edf2;border-radius:12px;box-shadow:0 0 0 6px #f6f8fa}
.side-tabs button{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;color:#4a5866;font-size:13px;font-weight:600;padding:8px 6px;border-radius:9px;white-space:nowrap}
.side-tabs button[hidden]{display:none}
.side-tabs button:hover{color:#0f1b2d;background:#ffffff80}
.side-tabs button[aria-selected="true"]{background:#fff;color:#0f1b2d;box-shadow:0 1px 3px #0f1b2d22}
.side-tabs .tab-lbl{overflow:hidden;text-overflow:ellipsis}
.tab-count{font-size:11px;font-weight:700;background:#dfe6ed;color:#334;border-radius:999px;padding:1px 7px;min-width:20px;text-align:center}
.tab-count:empty{display:none}
.tab-count.hot{background:#ffd24a;color:#1f2a44}
[aria-selected="true"] .tab-count{background:#0f1b2d;color:#fff}
[aria-selected="true"] .tab-count.hot{background:#ffd24a;color:#1f2a44}
.side-panel[hidden]{display:none}
.side-panel>section:last-child,.side-panel .mission-card,.side-panel .city-card{margin-bottom:0}
.side-panel .city-card,.side-panel .filter-card{box-shadow:0 1px 2px #0f1b2d10;border-color:#e2e8ee}
.side-panel .mission-card{box-shadow:none}
.mission .mission-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0;font-size:inherit;color:inherit}.mission .mission-top b{flex:1;min-width:0}
.mission-dist{font-style:normal;font-size:11px;color:#c9d3e6;white-space:nowrap;flex-shrink:0}
.mission-more{display:block;width:100%;margin-top:8px;background:transparent;border:1px dashed #ffd24a77;color:#ffd24a;border-radius:9px;padding:7px;font-size:12.5px;font-weight:600}
.mission-more:hover{background:#ffffff12}
.show-more{display:block;width:100%;margin:10px 0 4px;background:#fff;border:1px solid #d6dee6;color:#0f1b2d;border-radius:10px;padding:9px;font-size:13px;font-weight:600}
.show-more:hover{background:#eef3f7}
.list-head{margin:6px 2px 2px}
@media(max-width:700px){aside#browse{padding:16px 14px}.side-tabs{top:0}.side-tabs button{font-size:12.5px;padding:8px 4px}}
.side-tabs [data-tab] > span[aria-hidden]{display:none}
@media(max-width:360px){.side-tabs .tab-count{display:none}}
/* 6.2: wider side panel on desktop, compact observation cards */
@media(min-width:701px){#explore{grid-template-columns:1fr 384px}}
.side-tabs button{font-size:12.5px;padding:8px 8px}
#records{gap:8px}
#browse .record-card{padding:9px 10px 9px 12px;gap:10px;border-left-width:4px;box-shadow:none}
#browse .record-card:hover{box-shadow:0 4px 12px #0f1b2d14}
#browse .words{gap:3px}
#browse .word{font-size:12px;padding:2px 7px;background:#f1f4f7}
#browse .word em{font-size:14px}
#browse .card-body{display:grid;gap:5px;min-width:0}
#browse .meta{font-size:10.5px}
#browse .record-card .place{font-size:11.5px}
#browse .tags:empty{display:none}

/* 6.4: sort the list (Nearby / Newest / To check); answered city questions */
.list-sort{display:flex;gap:4px;margin:4px 0 6px}
.list-sort button{flex:1;border:1px solid #d6dee6;background:#fff;color:#4a5866;border-radius:999px;padding:5px 8px;font-size:12px;font-weight:600;white-space:nowrap}
.list-sort button.on{background:#0f1b2d;border-color:#0f1b2d;color:#fff}
.list-sort button:hover:not(.on){background:#eef3f7}
.mission.done{opacity:.62;border-style:dashed}
.mission.done .mission-dist{color:#9fe0c0}

/* 6.5: reports */
.report-box{margin-top:10px;border-top:1px solid #e2e8ee;padding-top:8px}
.report-box summary{cursor:pointer;font-size:12.5px;color:#7a8794;list-style:none}
.report-box summary::-webkit-details-marker{display:none}
.report-box summary:hover{color:#b3261e}
.report-box[open] summary{color:#b3261e;font-weight:600}
.report-reasons{display:grid;gap:5px;margin:6px 0}
.report-reasons button{text-align:left;background:#fff;border:1px solid #e2e8ee;border-radius:9px;padding:7px 10px;font-size:13px}
.report-reasons button:hover{background:#fdf1f0;border-color:#f3c5c1}
.report-reasons button.on{background:#fdf1f0;border-color:#b3261e;font-weight:600}
.report-status{font-size:12.5px;color:#0f766e;margin:2px 0 0}
.tag.hidden-tag{background:#fdecea;color:#8a1c14}

/* Version 6.6: email confirmation in the profile form */
.email-step{background:#f3fbfa;border:1px solid var(--pale);border-radius:10px;padding:2px 14px 6px;margin:6px 0 10px}.email-step label{margin-top:12px}.email-row{display:flex;gap:8px;margin:6px 0}.email-row input{flex:1;min-width:0}.email-row button{flex:none;padding:10px 14px}#emailCode:not(:placeholder-shown){letter-spacing:4px;font-size:18px}#emailStatus:empty{display:none}#accountSignOut{margin-right:8px}

/* Version 6.7: on phones, the side panel is a bottom sheet over the map (public/prototype/sheet.mjs).
   Down: only the handle and tabs show. Half. Up: covers 80% of the screen. */
.sheet-grip{display:none}
@media(max-width:700px){
 body:not(.locating) #explore{position:relative;display:block;height:calc(100dvh - var(--head));overflow:hidden}
 body:not(.locating) .map-shell{height:calc(100% - 78px);min-height:0}
 body:not(.locating) #browse{position:absolute;left:0;right:0;bottom:0;height:80%;z-index:15;display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:contain;
  padding-top:0;border:0;border-radius:18px 18px 0 0;box-shadow:0 -6px 24px #0000003d;transform:translateY(calc(100% - 96px));transition:transform .28s cubic-bezier(.2,.8,.2,1);will-change:transform}
 body:not(.locating) #browse>*{flex-shrink:0}
 body:not(.locating) #browse[data-sheet=full]{overflow-y:auto}
 #browse.dragging{transition:none;user-select:none}
 body:not(.locating) .sheet-grip{display:block;position:sticky;top:0;z-index:5;order:-2;width:auto;height:26px;margin:0 -14px;padding:0;border:0;border-radius:18px 18px 0 0;background:#f6f8fa;touch-action:none;cursor:grab}
 .sheet-grip span{display:block;width:44px;height:5px;border-radius:3px;background:#a9b6b3;margin:9px auto 0}
 body:not(.locating) #browse .side-tabs{order:-1;top:26px}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){#browse{transition:none!important}}

/* Version 6.8: the photo is its own step (5), with the live camera full screen and the controls at the bottom. */
.photo-full{display:none}
.privacy:empty{display:none}
.shooting #recorder{background:#111;overflow:hidden}
.shooting .camera-shade{display:none}
.shooting #camera,.shooting .photo-full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.shooting .photo-full:not([hidden]){display:block;z-index:1}
.shooting .record-heading{position:absolute;top:0;left:0;right:0;z-index:3;max-width:none;padding:10px 12px}
.shooting .record-content{position:absolute;left:0;right:0;bottom:0;z-index:2;max-width:none;max-height:100%;overflow:auto;padding:48px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(#0000,#000000b0 38%)}
.shooting .record-content>*{max-width:440px;margin-left:auto;margin-right:auto}
.shooting #question{font-size:18px;padding:10px 14px;margin:0 auto 8px}
.shooting #puzzlePreview{display:none}
.shooting .photo-bar{margin:6px auto}
.shooting .photo-preview img{display:none}
.shooting #cameraInfo{margin-bottom:6px}
.shooting .privacy{font-size:9.5px;line-height:1.35;padding:5px 8px;margin:6px auto 0;background:#ffffffc4}
.shooting #cameraInfo.live{display:none}
@media(max-height:700px){.shooting #question{font-size:16px;padding:8px 12px;margin-bottom:6px}.shooting .photo-bar{padding:6px 8px}.shooting .photo-status{font-size:11px}}
/* While recording, messages show at the top so they never cover Back / Continue / Submit. */
body:has(#recorder:not([hidden])) #toast{top:calc(var(--head,88px) + 60px);bottom:auto}
/* Messages: a readable width (left:50% alone squeezed long messages into a thin column on phones). */
#toast{width:max-content;max-width:min(92vw,520px);box-sizing:border-box;text-align:center;line-height:1.4}
/* Back / Continue / Submit stay at the bottom of the screen while recording, even on small phones. */
.record-nav{position:sticky;bottom:0;z-index:4;padding:12px 0 calc(10px + env(safe-area-inset-bottom));margin-top:6px;background:linear-gradient(#d9ddd800,#d9ddd8 28%)}
.locating .record-nav{background:linear-gradient(#ffffff00,#fffffff2 28%)}
.editing .record-nav{background:linear-gradient(#eef4f200,#eef4f2 28%)}
.shooting .record-nav{position:static;background:none;padding:0;margin-top:0}
.ledger li.held .pts{color:#5a6f9a}.ledger li.removed .pts{color:#999;text-decoration:line-through}.ledger li.removed b{color:#888}
/* ---------- Version 7: game profile (level, XP, streak, weekly challenge, leaderboard) ---------- */
.profile-hero{display:flex;gap:16px;align-items:center;margin:-6px -6px 0;padding:16px;border-radius:16px;background:linear-gradient(135deg,#0f1b2d,#1d4e57 60%,#2a8f86);color:#fff}
.hero-avatar{position:relative;flex:none}
.profile-hero .profile-avatar{background:#ffffff1f;border:3px solid #7ef0e4;box-shadow:0 0 0 4px #7ef0e433;border-radius:50%}
.level-badge{position:absolute;right:-6px;bottom:-6px;min-width:30px;height:30px;padding:0 6px;display:grid;place-content:center;border-radius:15px;background:linear-gradient(#ffd75e,#f2a516);color:#3d2500;font-size:15px;font-weight:900;border:2px solid #0f1b2d;box-shadow:0 2px 6px #0005}
.hero-text{min-width:0}
.profile-hero h2{margin:0;color:#fff;font-size:24px;overflow-wrap:anywhere}
.level-title{margin:2px 0 0;font-weight:800;color:#ffd75e;font-size:14px;letter-spacing:.2px}
.hero-stats{margin:2px 0 0;font-size:12px;color:#cfe8e5}
.xp{margin:12px 0 0}
.xp-bar{position:relative;height:14px;border-radius:7px;background:#e6ecef;overflow:hidden;box-shadow:inset 0 1px 2px #0002}
.xp-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:7px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.xp-fill{background:linear-gradient(90deg,#2ec4b6,#7ef0e4)}
.xp-pending{background:repeating-linear-gradient(45deg,#f2c14e88 0 6px,#f2c14e44 6px 12px)}
.xp-text{margin:5px 0 0;font-size:12px;color:#5c6b67;font-weight:600}
.stat-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.stat-chip{display:grid;justify-items:center;gap:1px;padding:9px 4px;border:1px solid #e1e8ea;border-radius:12px;background:#fafcfc;text-align:center}
.stat-chip>span{font-size:20px;line-height:1}
.stat-chip b{font-size:20px;line-height:1.2;color:#0f1b2d}
.stat-chip small{font-size:10.5px;color:#5c6b67;line-height:1.2}
.challenge-card{margin-top:16px;padding:12px 14px;border-radius:14px;border:2px solid #f2c14e;background:linear-gradient(180deg,#fffaf0,#fff3d6)}
.challenge-card.done{border-color:#2ec4b6;background:linear-gradient(180deg,#f0fffd,#d9f7f3)}
.ch-head{display:flex;gap:10px;align-items:center}
.ch-icon{font-size:28px;flex:none}
.ch-head>div{flex:1;min-width:0}
.ch-head small{display:block;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#9a6b00}
.challenge-card.done .ch-head small{color:#1d7a70}
.ch-head b{display:block;font-size:15px;line-height:1.3}
.ch-bonus{flex:none;font-weight:900;font-size:15px;color:#3d2500;background:linear-gradient(#ffd75e,#f2a516);border-radius:20px;padding:4px 10px}
.ch-bar{height:10px;border-radius:5px;background:#0000001a;margin-top:10px;overflow:hidden}
.ch-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#f2a516,#ffd75e);transition:width .6s}
.challenge-card.done .ch-bar i{background:linear-gradient(90deg,#2ec4b6,#7ef0e4)}
.ch-text{margin:6px 0 0;font-size:12px;font-weight:700;color:#5c4a1a}
.challenge-card.done .ch-text{color:#1d6b62}
.board{margin-top:16px;border:1px solid #e1e8ea;border-radius:14px;padding:4px 12px 10px}
.board-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
#profileDialog .board-head h3{margin:10px 0}
.seg{display:flex;background:#eef2f4;border-radius:10px;padding:3px;gap:2px}
.seg button{border:0;background:none;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:700;color:#5c6b67}
.seg button[aria-pressed=true]{background:#fff;color:#0f1b2d;box-shadow:0 1px 3px #0002}
.board-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.board-list li{display:grid;grid-template-columns:34px 32px 1fr auto;gap:8px;align-items:center;padding:6px 8px;border-radius:10px;font-size:13px}
.board-list li.is-top{background:#fffbea}
.board-list li.is-me{background:#d9f7f3;outline:2px solid #2ec4b6}
.board-list .rank{font-weight:900;text-align:center;font-size:15px;color:#5c6b67}
.board-list li.is-top .rank{font-size:20px}
.who-face{font-size:20px;width:32px;height:32px;display:grid;place-content:center;border-radius:50%;background:#eef2f4}
.who{min-width:0}
.who b{display:inline;overflow-wrap:anywhere}
.who em{font-style:normal;font-size:10px;font-weight:800;background:#2ec4b6;color:#fff;border-radius:8px;padding:1px 6px;vertical-align:middle}
.who small{display:block;font-size:11px;color:#6b7a77}
.score{font-weight:900;font-size:15px;color:#0f1b2d;white-space:nowrap}
.score small{font-size:10px;font-weight:600;color:#6b7a77}
.board-gap{text-align:center;color:#9aa6a3;padding:0!important;display:block!important}
.board-empty{display:block!important;color:#6b7a77;font-size:13px;text-align:center}
.board-note{margin:8px 0 4px}
.board-opt{font-size:12px;margin:6px 0 0}
.badge-prog{display:block;height:5px;border-radius:3px;background:#e2e2e2;margin:6px 6px 0;overflow:hidden}
.badge-prog i{display:block;height:100%;background:#9edcd5}
.badge-count{font-weight:700;color:#6b7a77}
@media(max-width:430px){.profile-hero{gap:12px;padding:14px}.profile-hero h2{font-size:21px}.board-list li{grid-template-columns:30px 28px 1fr auto;gap:6px;padding:6px}.who-face{width:28px;height:28px;font-size:17px}}
/* ---------- Version 7.1: profile form in the game style ---------- */
#accountDialog.acct{max-width:560px;padding:0;overflow:auto}
#accountDialog.acct .close{position:absolute;right:12px;top:12px;z-index:3;color:#fff;font-size:28px}
#accountDialog.acct form{padding:0 18px}
.acct-hero{display:flex;gap:14px;align-items:center;margin:0 -18px 14px;padding:22px 52px 20px 20px;background:linear-gradient(135deg,#0f1b2d,#1d4e57 60%,#2a8f86);color:#fff}
.acct-avatar{flex:none;width:68px;height:68px;border-radius:50%;display:grid;place-content:center;font-size:38px;background:#ffffff1f;border:3px solid #7ef0e4;box-shadow:0 0 0 4px #7ef0e433;transition:transform .2s}
.acct-avatar.picked{animation:acctPop .25s ease}
@keyframes acctPop{50%{transform:scale(1.12)}}
.acct-hero h2{margin:0;color:#fff;font-size:22px}
.acct-hero p{margin:4px 0 0;color:#cfe8e5;font-size:13px;line-height:1.45}
.acct-card{border:1px solid #e1e8ea!important;border-radius:14px!important;padding:12px 14px!important;margin:0 0 12px!important;background:#fff}
.acct-card.about{background:#f7faf9}
.acct-h{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:15px;font-weight:800;color:#0f1b2d}
legend.acct-h{padding:0 6px!important;font-size:15px!important}
legend.acct-h>span:last-child{font-weight:600;font-size:11px;color:#1d6b62;background:#d9f7f3;border-radius:10px;padding:2px 8px;margin-left:4px}
#accountDialog.acct label{font-size:13px}
#accountDialog.acct input:not([type=checkbox]):not([type=radio]),#accountDialog.acct select{border:1.5px solid #cfd8db;border-radius:10px;background:#fbfcfc;transition:border-color .15s,box-shadow .15s}
#accountDialog.acct input:not([type=checkbox]):not([type=radio]):focus,#accountDialog.acct select:focus{border-color:#2ec4b6;box-shadow:0 0 0 3px #2ec4b633;outline:none;background:#fff}
.acct-avatars{border:0!important;padding:0!important;margin:12px 0 4px!important}
.acct-avatars legend{font-size:13px;font-weight:700;padding:0!important;margin-bottom:8px}
.acct .avatar-option span{border-radius:50%;border:2px solid #e1e8ea;background:#f6f8f9;font-size:30px;transition:transform .15s,border-color .15s}
.acct .avatar-option span:hover{transform:translateY(-2px);border-color:#9edcd5}
.acct .avatar-option input:checked+span{border-color:#2ec4b6;background:#d9f7f3;box-shadow:0 0 0 3px #2ec4b655;transform:scale(1.06)}
.acct .chip{border-color:#cfd8db;border-radius:20px;padding:6px 11px}
.acct .chip:has(input:checked){background:#d9f7f3;border-color:#2ec4b6;color:#0f1b2d;font-weight:700}
.acct-consent{background:#fffaf0;border:1px solid #f2c14e;border-radius:12px;padding:10px 12px;margin:0 0 12px}
.acct-account{margin:4px 0 12px;border:1px solid #e1e8ea;border-radius:12px;padding:0 12px}
.acct-account summary{cursor:pointer;padding:11px 0;font-size:13px;font-weight:700;color:#5c6b67}
.acct-account[open]{padding-bottom:12px}
.acct-account .secondary,.acct-account .danger{width:100%;margin:6px 0 0}
#accountDialog.acct .acct-account .danger{font-size:13px;padding:8px}
.acct-actions{position:sticky;bottom:0;z-index:2;margin:0 -18px;padding:10px 18px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(#fff0,#fff 22%)}
.acct-actions #accountSave{margin-top:4px;padding:14px;font-size:16px;border:0;color:#fff;background:linear-gradient(135deg,#1d4e57,#2a8f86);box-shadow:0 4px 14px #1d4e5740}
.acct-actions #accountSave:hover{filter:brightness(1.08)}
#accountDialog.acct .email-step{background:#f3fbfa}
.board-city{display:block;font-size:11px;font-weight:700;color:#1d6b62;margin-top:1px}
.city-scope{margin:0 0 8px;padding:6px 10px;border-radius:10px;background:#eef7f6;color:#1d4e57;font-size:12px;font-weight:600}
/* Version 7.1: zoomed out, the most repeated negative / positive type of each area. */
.heat .type-chips{position:absolute;top:calc(100% - 10px);left:50%;transform:translateX(-50%);display:grid;gap:3px;justify-items:center;pointer-events:none}
.type-chip{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;font-style:normal;font-size:11px;font-weight:800;border-radius:12px;padding:3px 8px 3px 5px;box-shadow:0 2px 6px #0004}
.type-chip i{font-style:normal;font-size:12px}
.type-chip.neg{background:#c0392b;color:#fff;border:1.5px solid #ffd4cc}
.type-chip.pos{background:#1e7d4f;color:#fff;border:1.5px solid #c9f2dc}
.heat:has(.type-chip.neg)>b{box-shadow:0 0 0 3px #c0392b}
.cluster-name.neg{color:#a0281b}
.cluster-name.pos{color:#1e6b34}
.type-chip small{font-size:11px;font-weight:800}
/* ---------- Version 7.2: recording steps in the game style ---------- */
#recorder:not([hidden]){background:linear-gradient(180deg,#e9f1f1,#dfe8e8)}
.editing #recorder{background:linear-gradient(180deg,#eef4f2,#e4ecea)}
.record-heading{gap:10px}
.record-heading #cancel,.record-heading #discard{background:#fff;border:1px solid #d5dfe0;border-radius:20px;padding:7px 14px;font-weight:700;color:#1d4e57;box-shadow:0 1px 3px #0001}
.step-bar{flex:1;height:8px;border-radius:4px;background:#ffffffb0;overflow:hidden;box-shadow:inset 0 1px 2px #0002;min-width:40px}
.step-bar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#2ec4b6,#7ef0e4);transition:width .35s cubic-bezier(.2,.8,.2,1)}
.record-heading>#stepLabel{background:#0f1b2d;color:#fff;font-weight:800;font-size:13px;padding:6px 12px;border-radius:20px}
#recorder #question{background:linear-gradient(135deg,#0f1b2d,#1d4e57 60%,#2a8f86);color:#fff;border-radius:16px;padding:16px 18px;font-size:22px;line-height:1.3;box-shadow:0 6px 18px #0f1b2d33}
#recorder .choice-heading{background:none;color:#1d6b62;padding:4px 2px}
#recorder #choices{display:grid;gap:6px;padding:6px 2px 10px;max-height:300px;scrollbar-width:thin;
 -webkit-mask-image:linear-gradient(#000 88%,#0000);mask-image:linear-gradient(#000 88%,#0000)}
#recorder .choice{justify-content:flex-start;gap:12px;min-height:52px;padding:6px 14px 6px 8px;background:#fff;border:1.5px solid #e1e8ea;border-radius:14px;font-size:17px;font-weight:700;color:#0f1b2d;box-shadow:0 1px 3px #0f1b2d14;transition:border-color .15s,background .15s,transform .1s;text-align:left}
#recorder .choice span:first-child{flex:none;width:38px;height:38px;display:grid;place-content:center;border-radius:50%;background:#eef4f4;font-size:22px}
#recorder .choice:hover{border-color:#9edcd5}
#recorder .choice:active{transform:scale(.99)}
#recorder .choice.selected{background:#d9f7f3;border-color:#2ec4b6;box-shadow:0 0 0 3px #2ec4b633}
#recorder .choice.selected::after{content:'✓';margin-left:auto;width:26px;height:26px;display:grid;place-content:center;border-radius:50%;background:#2ec4b6;color:#fff;font-size:15px;font-weight:900}
#recorder #search{border:1.5px solid #cfd8db;border-radius:12px;padding:12px 14px;background:#fff}
#recorder #search:focus{border-color:#2ec4b6;box-shadow:0 0 0 3px #2ec4b633;outline:none}
#recorder #appreciation{background:#fff;border-radius:16px;box-shadow:0 2px 10px #0f1b2d14}
#recorder #puzzlePreview{background:#fff;border-radius:16px;box-shadow:0 2px 10px #0f1b2d14;padding:2px 0 4px}
#recorder .puzzle .avatar{border-radius:50%;border:3px solid #7ef0e4;background:#0f1b2d;box-shadow:0 0 0 3px #7ef0e433}
#recorder .puzzle .im{color:#0f1b2d}
#recorder .record-nav #back{background:#fff;border:1.5px solid #cfd8db;color:#1d4e57;border-radius:12px}
#recorder .record-nav #next{border:0;border-radius:12px;color:#fff;background:linear-gradient(135deg,#1d4e57,#2a8f86);box-shadow:0 4px 14px #1d4e5740}
#recorder .record-nav #next:disabled{background:#b9cfcd;box-shadow:none;opacity:1;color:#eef4f4}
.shooting #recorder:not([hidden]){background:#111}
.shooting .record-heading>#stepLabel{background:#ffffffe6;color:#0f1b2d}
.locating #recorder:not([hidden]){background:#fffffff2}
.city-scope.zoom-in{background:#fff7e0;color:#6b5100}
.record-heading>.step-bar{padding:0;background:#ffffffb0;border-radius:4px}
/* ---------- Version 8: news (🔔), install, notifications ---------- */
.news-btn{position:relative}
.news-dot{position:absolute;top:0;right:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#e0483a;color:#fff;font-size:10px;font-weight:900;display:grid;place-content:center;border:2px solid #0f1b2d}
#newsDialog.news{max-width:520px;padding:0;overflow:auto}
#newsDialog .close{position:absolute;right:12px;top:12px;color:#fff;font-size:28px;z-index:2}
.news-hero{display:flex;gap:14px;align-items:center;padding:22px 52px 18px 20px;background:linear-gradient(135deg,#0f1b2d,#1d4e57 60%,#2a8f86);color:#fff}
.news-hero-ico{font-size:30px;width:56px;height:56px;border-radius:50%;display:grid;place-content:center;background:#ffffff1f;border:3px solid #7ef0e4;flex:none}
.news-hero h2{margin:0;color:#fff;font-size:22px}.news-hero p{margin:3px 0 0;color:#cfe8e5;font-size:13px}
.news-list{list-style:none;margin:0;padding:10px 14px;display:grid;gap:6px}
.news-list button{width:100%;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;text-align:left;background:#fff;border:1px solid #e1e8ea;border-radius:12px;padding:10px 12px}
.news-list li.unread button{background:#f0fbf9;border-color:#9edcd5;box-shadow:inset 3px 0 0 #2ec4b6}
.news-text b{display:block;font-size:14px;color:#0f1b2d}.news-text small{display:block;font-size:12px;color:#5c6b67;margin-top:2px}
.news-list time{font-size:11px;color:#8a9794;white-space:nowrap}
.news-empty{padding:16px;text-align:center;color:#6b7a77;font-size:13px}
.news-phone{margin:4px 14px 16px;padding:12px 14px;border:1px solid #e1e8ea;border-radius:14px;background:#fafcfc}
.install-btn{width:100%;margin:6px 0 4px;padding:12px;border:0;border-radius:12px;color:#fff;font-weight:800;font-size:15px;background:linear-gradient(135deg,#1d4e57,#2a8f86);box-shadow:0 4px 14px #1d4e5740}
.push-opt{margin-top:10px;font-size:13px}
.tag.stale-tag{background:#fff3d6;color:#7a5a00}
.come-back{margin:0 0 10px;padding:10px 12px;border-radius:14px;background:linear-gradient(135deg,#0f1b2d,#1d4e57 70%,#2a8f86);color:#fff}
.cb-head{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.cb-head>span{font-size:22px}
.cb-head>div{flex:1;min-width:0}
.cb-head b{display:block;font-size:14px}
.cb-head small{display:block;font-size:11.5px;color:#cfe8e5}
.cb-head em{font-style:normal;font-weight:900;color:#3d2500;background:linear-gradient(#ffd75e,#f2a516);border-radius:10px;padding:0 6px;margin-left:4px}
.cb-close{background:none;border:0;color:#cfe8e5;font-size:20px;padding:0 4px}
.cb-item{width:100%;display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;text-align:left;margin-top:5px;padding:7px 9px;border:0;border-radius:10px;background:#ffffff1a;color:#fff}
.cb-item:hover{background:#ffffff29}
.cb-ico{width:34px;height:34px;border-radius:50%;display:grid;place-content:center;background:#ffffff26;font-size:18px}
.cb-text b{display:block;font-size:13px}.cb-text small{display:block;font-size:11px;color:#cfe8e5}
.cb-go{font-size:11px;font-weight:800;color:#7ef0e4;white-space:nowrap}
/* Version 8: city report and "What changed" */
.city-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.city-action{border:1.5px solid #9edcd5;background:#f0fbf9;color:#1d4e57;border-radius:12px;padding:10px 8px;font-weight:800;font-size:13px}
.city-action:hover{background:#d9f7f3}
#reportDialog.report{max-width:560px;padding:0;overflow:auto}
#reportDialog .close{position:absolute;right:12px;top:12px;color:#fff;font-size:28px;z-index:2}
.report-body{padding:12px 16px 18px}
.report-seg{width:max-content;margin:0 auto 12px}
.report-stats{margin-top:0}
.report-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;margin:14px 0 6px}
.report-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;font-size:12px;color:#5c6b67}
.report-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:-1px}
#reportDialog h3{margin:18px 0 8px;font-size:15px;color:#0f1b2d}
.report-spots,.report-changes{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.report-spot,.report-changes button{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;text-align:left;background:#fff;border:1px solid #e1e8ea;border-radius:12px;padding:8px 10px}
.report-spot b,.report-changes b{font-size:13px}.report-spot small,.report-changes small{display:block;font-size:11.5px;color:#5c6b67}
.rs-n{min-width:30px;height:30px;border-radius:50%;display:grid;place-content:center;font-weight:900;color:#fff;background:#c0392b}
.report-spot.pos .rs-n{background:#1e7d4f}
.rs-go{color:#9aa6a3;font-size:20px}
.report-chips{display:flex;flex-wrap:wrap;gap:6px}
.report-chips .type-chip{box-shadow:none}
.report-status{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.report-changes button{grid-template-columns:auto 1fr}
.rc-ico{width:30px;height:30px;border-radius:50%;display:grid;place-content:center;background:#eef4f4;font-size:16px}
/* Version 8: teams, trophies, event badges, event banner */
.board-kind{width:max-content;margin:0 0 8px}
.team-card{margin-top:16px;border:1px solid #e1e8ea;border-radius:14px;padding:2px 12px 10px}
#profileDialog .team-card h3{margin:10px 0 4px}
.team-name{margin:4px 0;font-size:15px}.team-name small{color:#6b7a77;font-size:12px}
#teamEmoji{font-size:22px;vertical-align:-3px}
.link-btn{background:none;border:0;padding:0;color:#5c6b67;text-decoration:underline;font-size:12px}
#teamCode{text-transform:uppercase;letter-spacing:2px;font-weight:700}
.trophy-list{display:flex;flex-wrap:wrap;gap:8px}
.trophy{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:8px 12px;border-radius:12px;border:2px solid #f2c14e;background:linear-gradient(180deg,#fffaf0,#fff0c8)}
.trophy>span{grid-row:span 2;font-size:26px}.trophy b{font-size:13px}.trophy small{font-size:11px;color:#6b5a2a}
.trophy.r2{border-color:#c4ccd4;background:linear-gradient(180deg,#f8fafb,#e8edf1)}.trophy.r3{border-color:#d9a273;background:linear-gradient(180deg,#fff8f1,#f6e2cf)}
.badge.special{background:linear-gradient(180deg,#f0fbf9,#d9f7f3);border-color:#2ec4b6}
.event-banner{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin:0 0 10px;padding:10px 12px;border-radius:14px;border:2px solid #f2c14e;background:linear-gradient(135deg,#fffaf0,#fff0c8)}
.eb-ico{font-size:26px}.eb-text b{display:block;font-size:14px;color:#0f1b2d}.eb-text small{display:block;font-size:11.5px;color:#6b5a2a}
.eb-bonus{font-weight:900;color:#3d2500;background:linear-gradient(#ffd75e,#f2a516);border-radius:14px;padding:4px 10px}