/* Sodak skin - graphs page (shares tokens/tiles with sodak.css; chart styling follows home.css) */
.seg { display: inline-flex; background: var(--track); border-radius: 9px; padding: 2px; flex: none; }
.seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 500;
  padding: 4px 12px; border-radius: 7px; cursor: pointer; transition: all .15s; white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--tile-solid); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--border); }
.seg:empty { display: none; }

.chart-tile { display: flex; flex-direction: column; }
.chart-stats { display: flex; gap: 28px; margin-bottom: 6px; flex-wrap: wrap; min-height: 50px; }
.cs .k { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.cs .v { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.cs .v small { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 6px; letter-spacing: 0; }
.sw { width: 10px; height: 2px; border-radius: 2px; background: var(--accent); }
.sw.dew { background: var(--dew); }
.sw.band { height: 8px; border-radius: 3px; background: linear-gradient(90deg, #4fa9f5, #f2bd2c 55%, #ef6a3c); }

/* range picker: one row that scrolls inside its tile on small screens */
.picker { padding: 14px 20px; }
.rp { display: flex; gap: 8px; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  margin: -2px -20px; padding: 2px 20px; }
.custom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted); }
.custom label { display: inline-flex; align-items: center; gap: 8px; }
.custom input { font: inherit; font-size: 13px; color: var(--text); background: var(--tile-solid); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 5px 8px; color-scheme: inherit; }
.custom .go { font: inherit; font-size: 12.5px; font-weight: 500; border: 0; border-radius: 8px; padding: 6px 14px; cursor: pointer;
  background: var(--accent); color: #fff; }
:root[data-theme="dark"] .custom .go { color: #0d1020; }
.custom .hint { color: var(--faint); }

.gchart { flex: 1; min-height: 380px; margin: 0 -6px -8px -4px; }
.gchart.small { min-height: 260px; }
.gchart.tall { min-height: 400px; }
.yoy-meta { margin: -6px 0 6px; white-space: normal; }
.chart-tile .t-head .meta { white-space: normal; text-align: right; }
.gmsg { display: grid; place-items: center; height: 100%; min-height: 240px; color: var(--muted); text-align: center; padding: 20px; }

@media (max-width: 760px) {
  .picker { padding: 12px 16px; }
  .rp { margin: -2px -16px; padding: 2px 16px; }
  .chart-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .cs .v { font-size: 19px; white-space: normal; min-width: 0; }
  .cs .v small { display: block; margin: 2px 0 0; }
  .cs { min-width: 0; }
  .gchart { min-height: 300px; }
  .gchart.small { min-height: 220px; }
  .gchart.tall { min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) { .seg button { transition: none; } }