/* Sumarhús — charts, legends, tooltips, the graph builder and the events list (owner: F3).
   Lifted from _mockup/parts/1-style.html; the look is the judged one. Tokens come from app.css. */

/* chart */
.legend{display:flex;gap:14px;color:var(--dim);font-size:12.5px;margin-bottom:4px;flex-wrap:wrap;align-items:center}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:16px;height:0;border-top:2px solid var(--accent)}
.legend i.s2{border-color:rgb(var(--text-rgb)/.6)}.legend i.s3{border-color:rgb(var(--text-rgb)/.5);border-top-style:dashed}
.legend i.s4{border-color:var(--accent-2)}.legend i.s5{border-color:var(--accent-2);border-top-style:dashed}.legend i.s6{border-color:rgb(var(--text-rgb)/.6);border-top-style:dotted}
.legend .nodata{color:var(--dim);font-style:italic}
.legend .hint{margin-left:auto;font-size:11.5px;color:var(--dim)}
.chartbox{position:relative;transition:opacity .2s}
.chartbox.fade{opacity:.35}
.chartbox svg{width:100%;height:220px;overflow:visible;touch-action:pan-y;display:block}
.chartbox .tip{position:absolute;pointer-events:none;display:none;padding:6px 9px;border-radius:8px;font-size:12px;
  background:rgb(var(--panel-rgb));border:1px solid rgb(var(--text-rgb)/.14);color:var(--text);white-space:nowrap;
  font-variant-numeric:tabular-nums;box-shadow:0 6px 20px rgb(var(--shadow-rgb)/.25)}
.tip b{font-weight:600}.tip .k{color:var(--dim)}
.chartbox .empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);font-size:13px;pointer-events:none}
.ranges{display:flex;gap:6px;flex-wrap:wrap}
.chip{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid rgb(var(--text-rgb)/.14);color:var(--dim);font-size:13px;font-weight:500;
  transition:background-color .12s,border-color .12s,color .12s}
.chip[aria-pressed="true"]{color:var(--text);border-color:var(--accent);background:rgb(var(--accent-rgb)/.12)}
.chip:hover{color:var(--text)}
.chip[aria-disabled="true"]{color:var(--dim);border-style:dashed;border-color:rgb(var(--text-rgb)/.14);cursor:default}
.chip[aria-disabled="true"] small{font-size:11px;margin-left:4px}

/* the big chart on Gröf: its own segmented range control (same look as app.css .seg) */
.chart-big .seg{display:inline-flex;gap:2px;border-radius:12px;background:rgb(var(--text-rgb)/.06);margin-bottom:10px;max-width:100%}
.chart-big .seg button{min-height:44px;padding:0 12px;border-radius:12px;color:var(--dim);font-size:13px;font-weight:500;transition:background-color .12s,color .12s}
.chart-big .seg button[aria-pressed="true"]{background:rgb(var(--panel-rgb));color:var(--text);box-shadow:0 1px 2px rgb(var(--shadow-rgb)/.18)}
@media (max-width:380px){.chart-big .seg button{padding:0 7px;font-size:12px;white-space:nowrap}}

/* lists (events page and the events widget share this markup) */
.evl{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.evl .day{color:var(--dim);font-size:12px;margin:8px 0 2px;font-weight:600;letter-spacing:.02em}
.evl .day:first-child{margin-top:0}
.ev{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid rgb(var(--text-rgb)/.06)}
.ev .ic{color:var(--dim);display:grid;place-items:center}
.ev .ic.warn{color:var(--warn)}.ev .ic.bad{color:var(--bad)}.ev .ic.good{color:var(--good)}
.ev .t{color:var(--dim);font-variant-numeric:tabular-nums;font-size:12.5px}
.ev .d{color:var(--dim);font-size:13px}
.evl .none{color:var(--dim);font-size:13px;padding:10px 0}

/* events page: filter chips above the list, "Fleiri" below */
.events-page{max-width:760px;width:100%;margin-inline:auto}   /* centred on wide screens instead of hugging the left edge */
.events-page .filters{margin:0 0 10px}
.events-page .filters .chip{min-height:40px;padding:0 12px}
.events-page .more-row{display:flex;justify-content:center;margin-top:10px}
.events-page .more-row .ibtn:disabled{opacity:.5;cursor:default}
.events-page .more-row .ibtn[hidden]{display:none}   /* .ibtn's display would otherwise beat the hidden attribute */

/* builder */
.builder{display:grid;gap:12px}
.builder h3{margin:0;color:var(--dim);font:500 12.5px/1 var(--font-body)}
.preview{display:grid;gap:8px;padding:12px;border-radius:var(--radius-sm);border:1px solid rgb(var(--text-rgb)/.12);color:var(--dim);font-size:12.5px}
.preview svg{width:100%}
.stack{display:grid;gap:12px;max-width:760px;align-content:start}

/* widget card: the chart fills the card's height on desktop */
.card.chart{display:flex;flex-direction:column}
.card.chart .chartbox{flex:1;display:flex;flex-direction:column}

@media (min-width: 900px){
  .chartbox svg{height:100%;min-height:200px}
  .chart-big .chartbox svg{height:360px}
  @media (min-width:1100px){.builder{grid-template-columns:1fr 1fr;align-items:start}.builder>.preview{grid-column:2;grid-row:1/5;align-self:stretch}.builder>.addGraph{grid-column:1}}
}
/* wide builder: the preview fills its column */
@media (min-width:1100px){.builder>.preview{display:flex;flex-direction:column;min-height:280px}.builder>.preview .chartbox{flex:1;display:flex;flex-direction:column}.builder>.preview svg{flex:1;height:auto;min-height:160px;width:100%}}
@media (prefers-reduced-motion: reduce){.chartbox,.chip{transition:none}}