/* Create By Asking: weather simulator (projects/weather-simulator.html).
   Loaded after style.css, tools.css and advanced.css; reuses .adv-shell, .adv-label, .adv-group, .adv-range and .chip-dark.
   Same visual language as gravity.css. */

.ws { gap: 12px; }

/* tools */
.ws-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ws-pill { border: 0; cursor: pointer; border-radius: 999px; padding: 8px 13px; background: rgba(255, 255, 255, 0.08); color: #E2DAFA; font: 600 var(--step--1)/1 var(--body); white-space: nowrap; transition: background 0.15s, transform 0.1s; }
.ws-pill:hover { background: rgba(255, 255, 255, 0.16); }
.ws-pill:active { transform: scale(0.97); }
.ws-pill[aria-pressed="true"] { background: #FFC93C; color: #1C0F3F; }
.ws-pill:focus-visible { outline: 2px solid #FFC93C; outline-offset: 2px; }

/* the map: a world is twice as wide as it is tall */
.ws-stage { position: relative; aspect-ratio: 2 / 1; border-radius: 14px; overflow: hidden; background: #061226; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 40px -18px rgba(0, 0, 0, 0.7); touch-action: none; user-select: none; -webkit-user-select: none; }
.ws-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; -webkit-tap-highlight-color: transparent; }
.ws-stage canvas.ws-fx { cursor: crosshair; outline: none; }
.ws-stage canvas.ws-fx:focus-visible { box-shadow: inset 0 0 0 3px #FFC93C; }

.ws-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); font: 700 0.85rem/1.25 var(--body); color: #fff; background: rgba(12, 6, 30, 0.75); padding: 8px 14px; border-radius: 99px; pointer-events: none; text-align: center; transition: opacity 0.6s; }
.ws-readout { position: absolute; left: 10px; top: 10px; font: 600 0.72rem/1.5 var(--mono); color: rgba(255, 255, 255, 0.9); background: rgba(12, 6, 30, 0.6); padding: 5px 9px; border-radius: 8px; pointer-events: none; white-space: pre; }
.ws-legend { position: absolute; right: 10px; top: 10px; display: grid; gap: 4px; width: 150px; font: 600 0.66rem/1 var(--mono); color: #fff; background: rgba(12, 6, 30, 0.6); padding: 6px 9px; border-radius: 8px; pointer-events: none; }
.ws-legend[hidden] { display: none; }
.ws-legend i { display: block; height: 7px; border-radius: 3px; }
.ws-legend span { display: flex; justify-content: space-between; }

/* what the chosen tool does */
.ws-info { display: grid; gap: 3px; background: rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 10px 14px; font-size: var(--step--1); color: #CBBFE8; }
.ws-info b { font: 800 0.95rem/1.2 var(--body); color: #fff; }
.ws-info .ws-watch { color: #FFC93C; font-weight: 600; }

.ws-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.ws-bar .adv-group { gap: 5px; }
.ws .chip-dark { padding: 8px 12px; white-space: nowrap; }
.ws .chip-dark:hover { background: rgba(255, 255, 255, 0.16); }
.ws .chip-dark[aria-pressed="true"]:hover { background: #FFD766; }
.ws .adv-range output { min-width: 3.6em; }
.ws-sep { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.1); }

@media (max-width: 560px) {
  .ws-stage { border-radius: 10px; }
  .ws-tools .adv-label { display: none; }
  .ws-pill { padding: 7px 10px; }
  .ws-hint { font-size: 0.7rem; padding: 5px 10px; bottom: 6px; }
  .ws-readout { font-size: 0.6rem; left: 6px; top: 6px; padding: 3px 6px; }
  .ws-legend { width: 110px; font-size: 0.56rem; right: 6px; top: 6px; }
  .ws-sep { display: none; }
}