/* /atmospheres — the Atmosphere editor. Uses the shared editor-screen shell (editor-screen.css .es-screen)
   + the shared ListPanel (LC). MC = the editor (name + weather controls) with a fixed Save/Delete footer;
   RC = the live preview stage (map picker + canvas + preview-only time/season). */

/* column widths: MC (the editor) commands the majority; RC holds the preview at a usable size. */
.at-es { --es-lc: 16.5rem; --es-mc: 1.2fr; --es-rc: minmax(23.75rem, 1fr); }

/* RC preview column */
.at-rc { padding: var(--sp-7); }
.at-prevbar { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: 0.5625rem; flex: none; }
.at-prevlbl { font-size: var(--fs-xs); color: var(--muted, #9a8f78); }
.at-mapsel { background: var(--panel-2, #201b12); border: 0.0625rem solid var(--border, #2c2519); color: var(--text, #ece3cf);
  border-radius: var(--r-md); padding: 0.3125rem var(--sp-5); font-size: var(--fs-sm); cursor: pointer; max-width: 15rem; }
.at-mapsel:hover { border-color: var(--accent, #e0a83c); }
.at-maplink { font-size: var(--fs-xs); color: var(--accent, #e0a83c); text-decoration: none; opacity: .85; }
.at-maplink:hover { opacity: 1; text-decoration: underline; }
.at-prevwrap { position: relative; flex: 1; border-radius: var(--r-lg); overflow: hidden; background: var(--bg); min-height: 0; }
.at-prevcanvas { width: 100%; height: 100%; display: block; }
.at-prevhint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  color: rgba(220,210,185,.6); font-size: var(--fs-base); padding: var(--sp-10); pointer-events: none; }
.at-prevenv { padding-top: 0.6875rem; display: flex; flex-direction: column; gap: 0.4375rem; flex: none; }

/* roster cards (rendered by the ListPanel) */
.at-muted { color: var(--muted, #9a8f78); font-size: var(--fs-sm); }
.at-card { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  background: var(--panel-2, #201b12); border: 0.0625rem solid var(--border, #2c2519); color: var(--text, #ece3cf);
  border-radius: var(--r-lg); padding: 0.4375rem var(--sp-6); font-size: var(--fs-base); cursor: pointer; }
.at-card:hover { border-color: var(--accent, #e0a83c); }
.at-card.on { border-color: var(--accent, #e0a83c); background: var(--chip-bg); }
.at-cname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-shared { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #9a8f78);
  border: 0.0625rem solid var(--border, #2c2519); border-radius: var(--r-sm); padding: 0.0625rem var(--sp-3); flex: none; }

/* editor (MC) */
.at-edempty { color: var(--muted, #9a8f78); text-align: center; padding: 2.5rem var(--sp-8); font-size: var(--fs-base); }
.at-edempty span { font-size: var(--fs-hero); display: block; opacity: .5; margin-bottom: var(--sp-5); }
.at-name { width: 100%; box-sizing: border-box; background: var(--panel-2, #201b12); border: 0.0625rem solid var(--border, #2c2519);
  color: var(--text, #ece3cf); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); font-size: var(--fs-md); margin-bottom: var(--sp-7); }
.at-name:focus { border-color: var(--accent, #e0a83c); }
.at-controls { margin-bottom: var(--sp-3); }

/* footer buttons: shared with the Encounters twin — see editor-screen.css */

/* ── shared controls (_atmo-controls.js) ── */
.ac-groups { display: flex; flex-direction: column; gap: 0.5625rem; }
.ac-grp { border: 0.0625rem solid var(--border, #2c2519); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); background: rgba(0,0,0,.12);
  transition: border-color .15s, background .15s; }
.ac-grphd { font-size: var(--fs-sm); font-weight: 600; color: var(--text, #ece3cf); margin-bottom: var(--sp-4); }
.ac-grp .ac-grphd { color: var(--muted, #b3a98f); }
.ac-grp.on { border-color: rgba(var(--accent-rgb, 224,121,44), .5); background: rgba(var(--accent-rgb, 224,121,44), .05); }
.ac-grp.on .ac-grphd { color: var(--accent, #e0792c); }
.ac-row { display: flex; align-items: center; gap: var(--sp-5); margin: var(--sp-3) 0; font-size: var(--fs-xs); color: var(--muted, #b3a98f); }
.ac-rlbl { width: 4rem; flex: none; }
.ac-row input[type=range] { flex: 1; accent-color: var(--accent, #e0a83c); min-width: 0; }
.ac-rval { width: 2.625rem; text-align: right; flex: none; font-variant-numeric: tabular-nums; color: var(--text, #d8cdb3); }
.ac-row input[type=color] { width: 1.875rem; height: 1.375rem; border: 0.0625rem solid var(--border, #2c2519); border-radius: var(--r-sm); background: none; padding: 0; cursor: pointer; }
.ac-clear { background: none; border: 0.0625rem solid var(--border, #2c2519); color: var(--muted, #9a8f78); border-radius: var(--r-sm); font-size: var(--fs-2xs); padding: var(--sp-1) var(--sp-4); cursor: pointer; }
.ac-base { display: flex; flex-direction: column; gap: var(--sp-5); }
.ac-time { width: 100%; accent-color: var(--accent, #e0a83c); }
.ac-presets { display: flex; flex-wrap: wrap; gap: 0.3125rem; }
.ac-pbtn { background: var(--panel-2, #201b12); border: 0.0625rem solid var(--border, #2c2519); color: var(--text, #ece3cf);
  border-radius: var(--r-md); padding: 0.3125rem 0.5625rem; font-size: var(--fs-xs); cursor: pointer; }
.ac-pbtn:hover { border-color: var(--accent, #e0a83c); }
.ac-pbtn.on { background: var(--chip-bg); border-color: var(--accent, #e0a83c); color: var(--accent, #e0a83c); }
.ac-env { display: flex; flex-wrap: wrap; gap: var(--sp-6) 1.375rem; }
.ac-envgrp { flex: 1 1 13.125rem; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }