/* Neutral building blocks for the right-bar layout: map on the left, a lateral bar on the right.
   A design sets the variables below and adds its own flourishes. */
:root{--bg:#fff;--panel:#fff;--text:#16241b;--muted:#64746a;--accent:#1f8a4c;--accent-text:#fff;--line:#d9e2dc;--r:12px;--fb:system-ui,-apple-system,"Segoe UI",sans-serif;--fh:var(--fb);--side:30vw}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--fb)}
button,input,select,textarea{font-family:var(--fb)}

/* map | lateral bar */
.split{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,var(--side),580px);height:100vh;overflow:hidden}
.mappane{position:relative;min-width:0;height:100vh}
.mappane .critish-map{position:absolute;inset:0;height:100%;border-radius:0}
.side{display:flex;flex-direction:column;min-height:0;height:100vh;background:var(--panel);position:relative}
.scroller{flex:1;overflow:auto;padding:28px clamp(18px,2.4vw,34px) 20px}
.foot{padding:11px 20px;display:flex;justify-content:space-between;gap:10px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line)}
@media(max-width:820px){.split{grid-template-columns:1fr;grid-template-rows:42vh auto;height:auto;overflow:visible}.mappane{height:42vh}.side{height:auto;min-height:58vh}}

/* title block */
.title h1{margin:0;font:700 clamp(2.2rem,3.6vw,3.3rem)/1 var(--fh)}
.slogan{margin:6px 0 0;color:var(--muted)}
h1.mini{margin:0;font:700 1.5rem/1 var(--fh)}

/* tabs, fields, buttons */
.tabs{display:flex;gap:8px;margin:20px 0 4px}
.tabs button{flex:1;padding:10px;border:1px solid var(--line);background:none;color:var(--muted);font-weight:700;cursor:pointer;border-radius:var(--r)}
.tabs button.is-active{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 5px}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r);background:color-mix(in srgb,var(--panel) 92%,var(--text));color:var(--text);font-size:1rem}
select option{background:var(--panel);color:var(--text)}
input:focus,select:focus,textarea:focus,button:focus-visible,summary:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:1px}
select:disabled{opacity:.5}
textarea{resize:vertical}
fieldset{border:1px solid var(--line);border-radius:var(--r);margin:18px 0 0;padding:0 14px 14px}
legend{padding:0 8px;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink,var(--accent))}
.btn{margin-top:18px;width:100%;padding:13px;border:0;border-radius:var(--r);background:var(--accent);color:var(--accent-text);font-weight:800;letter-spacing:.04em;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.ghost{background:none;border:1px solid var(--line);color:var(--text);border-radius:99px;padding:6px 14px;font-size:.8rem;cursor:pointer}
.msg{min-height:1.3em;margin:12px 0 0;font-size:.9rem;font-weight:600}
.msg[data-state=error]{color:#d33a3a}.msg[data-state=ok]{color:var(--accent-ink,var(--accent))}

/* city view */
.who{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0;font-size:.9rem;color:var(--muted)}
.city{padding:14px 0;border-block:1px solid var(--line);margin:12px 0}
.city small{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink,var(--accent))}
.city h2{margin:2px 0;font:700 clamp(2rem,3.2vw,2.8rem)/1.05 var(--fh)}
.city p{margin:0;color:var(--muted)}
.nums{display:flex;gap:26px;margin-top:12px}.nums b{display:block;font:700 1.6rem/1.1 var(--fh)}.nums span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
details.write{border:1px solid var(--line);border-radius:var(--r);padding:0 16px;margin:14px 0}
details.write summary{padding:13px 0;cursor:pointer;font-weight:800;color:var(--accent-ink,var(--accent))}
details.write form{padding-bottom:16px}
.review{border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:14px 0}
.review-head{display:flex;justify-content:space-between;gap:12px}
.review-place{margin:0;font:700 1.2rem/1.2 var(--fh)}
.review-meta{margin:2px 0 0;color:var(--muted);font-size:.8rem}
.tag{border:1px solid var(--line);padding:0 7px;border-radius:99px;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em}
.review-score{text-align:right;flex:none}.review-score strong{display:block;font:700 1.8rem/1 var(--fh);color:var(--accent-ink,var(--accent))}
.stars-static{color:var(--star,#f5a524);white-space:nowrap;letter-spacing:.06em}
.review-aspects{list-style:none;margin:10px 0;padding:10px 0;border-block:1px solid var(--line);display:grid;gap:3px;font-size:.8rem;color:var(--muted)}
.review-aspects li{display:flex;justify-content:space-between}
.review-body{margin:0}
.aspect{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:.86rem}
.stars button{background:none;border:0;font-size:1.5rem;line-height:1;color:var(--line);cursor:pointer;padding:0 1px}
.stars button.on{color:var(--star,#f5a524)}
.empty{color:var(--muted)}