/* Know Your Site tool (start.html) */
.kys { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 1.2rem 1.3rem; margin: 1rem 0 1.5rem; }
.kys > h2 { margin-top: 0; }
.kys-intro { color: var(--muted); max-width: 760px; }
.kys-form { display: grid; grid-template-columns: 1fr auto auto; gap: 0.6rem; align-items: end; margin: 0.8rem 0 0.4rem; }
.kys-form .field { display: grid; gap: 0.3rem; margin: 0; }
.kys-form label { font-weight: 600; font-size: 0.95rem; color: var(--text); }
.kys-form input { font: inherit; font-size: 16px; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); min-height: 44px; width: 100%; }
.kys-form input:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.kys-form .btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; min-height: 44px; }
.kys-form .btn.secondary { border: 2px solid var(--fern); }
.kys-privacy, .kys-sources, .kys-small { font-size: 0.86rem; color: var(--muted); }
.kys-status { min-height: 1.4em; margin: 0.4rem 0; color: var(--muted); font-size: 0.95rem; }
.kys-status.kys-error { color: var(--clay); font-weight: 600; }
.kys-results h3 { margin-top: 0.6rem; color: var(--fern); }
.kys-results h3:focus { outline: none; }
.kys-coords { color: var(--muted); font-size: 0.92rem; }
.kys-flag { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--clay); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 999px; padding: 0.05rem 0.5rem; vertical-align: middle; }
.kys-others { margin: 0.4rem 0; font-size: 0.92rem; }
.kys-others ul { margin: 0.3rem 0 0 1.2rem; }
.kys-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin-top: 0.8rem; }
.kys-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 0.9rem 1rem; min-width: 0; }
.kys-card h4 { margin: 0 0 0.3rem; font-size: 1.05rem; color: var(--text); }
.kys-card p { color: var(--muted); margin: 0.35rem 0; }
.kys-wide { grid-column: 1 / -1; }
.kys-big { font-size: 1.35rem; font-weight: 600; color: var(--fern) !important; }
.kys-big span { font-size: 0.95rem; font-weight: 400; color: var(--muted); }
.kys-big .zone { font-size: 0.8rem; vertical-align: middle; }
.kys-mean { color: var(--text) !important; background: var(--canopy); border-radius: 6px; padding: 0.5rem 0.7rem; }
.kys-bars { width: 100%; max-width: 320px; height: auto; display: block; margin: 0.3rem 0; }
.kys-bars rect { fill: var(--sage); }
.kys-bars rect.kys-dry { fill: var(--clay); }
.kys-bars text { font-size: 10px; fill: var(--muted); }
.kys-sunwrap { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.kys-sun { width: 100%; max-width: 300px; height: auto; display: block; }
.kys-ring { fill: none; stroke: var(--border); stroke-width: 1; }
.kys-ringlab { font-size: 9px; fill: var(--muted); }
.kys-dir { font-size: 13px; font-weight: 700; fill: var(--text); }
.kys-path { fill: none; stroke-width: 2.5; }
.kys-jun { stroke: #c27a1a; fill: #c27a1a; }
.kys-eq { stroke: var(--sage); fill: var(--sage); }
.kys-dec { stroke: #3d6d8f; fill: #3d6d8f; }
polyline.kys-jun, polyline.kys-eq, polyline.kys-dec { fill: none; }
.kys-wind-sector { fill: #d9e6ef; opacity: 0.55; }
.kys-wind { stroke: #3d6d8f; stroke-width: 3; stroke-dasharray: 6 3; }
.kys-ahead { fill: #3d6d8f; }
.kys-you { fill: var(--soil); }
.kys-legend { list-style: none; margin: 0.4rem 0 0; padding: 0; font-size: 0.82rem; color: var(--muted); display: grid; gap: 0.15rem; }
.kys-swatch { display: inline-block; width: 18px; height: 4px; margin-right: 0.4rem; vertical-align: middle; border-radius: 2px; }
.kys-swatch.kys-jun { background: #c27a1a; } .kys-swatch.kys-eq { background: var(--sage); } .kys-swatch.kys-dec { background: #3d6d8f; }
.kys-swatch.kys-windsw { background: #d9e6ef; height: 10px; border: 1px dashed #3d6d8f; }
.kys-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.kys-table th, .kys-table td { text-align: left; padding: 0.35rem 0.45rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.kys-table td span { color: var(--muted); font-size: 0.8rem; }
.kys-share { font-size: 0.9rem; margin-top: 0.8rem; }
@media (max-width: 720px) {
  .kys { padding: 1rem; }
  .kys-form { grid-template-columns: 1fr 1fr; }
  .kys-form .field { grid-column: 1 / -1; }
  .kys-grid, .kys-sunwrap { grid-template-columns: minmax(0, 1fr); }
  .kys-sun { margin: 0 auto; }
}

/* Monthly rainfall bars: value on hover, tap or focus */
.kys-bars .kys-hit { fill: transparent; }
.kys-bars .kys-col { fill: var(--sage); transition: fill 0.15s; }
.kys-bars .kys-dry .kys-col { fill: var(--clay); }
.kys-bars .kys-mo { font-size: 10px; fill: var(--muted); }
.kys-bars .kys-val { font-size: 11px; font-weight: 700; fill: var(--fern); opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.kys-bars .kys-bar { cursor: pointer; outline: none; }
.kys-bars .kys-bar:hover .kys-val, .kys-bars .kys-bar:focus .kys-val { opacity: 1; }
.kys-bars .kys-bar:hover .kys-col, .kys-bars .kys-bar:focus .kys-col { fill: var(--fern); }
.kys-bars .kys-bar:focus-visible .kys-hit { stroke: var(--clay); stroke-width: 1.5; }
.kys-bars .kys-bar:hover .kys-mo, .kys-bars .kys-bar:focus .kys-mo { fill: var(--text); font-weight: 700; }
.kys-hint { margin-top: 0 !important; }