/* Hallway display: dark, large type, readable from across the room. */
:root {
  color-scheme: dark;
  --surface: #121211;
  --surface-2: #1a1a19;
  --border: #33332f;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --series-1: #3987e5;
  --series-3: #199e70;
  --grid: #33332f;
  --accent: #3f9e60;
  --urgent: #d03b3b;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; background: var(--surface); color: var(--text-primary);
  font-family: "Noto Kufi Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
  font-size: clamp(16px, 1.35vw, 36px); line-height: 1.45;
  display: grid; grid-template-rows: auto 1fr auto;
}
.head { display: flex; justify-content: space-between; align-items: center; padding: 0.8vh 3vw; border-bottom: 2px solid var(--border); }
.site { font-size: 1.8em; font-weight: 700; }
.clock { text-align: left; }
.time { font-size: 1.8em; font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; }
.date { color: var(--text-secondary); }

#panels { position: relative; overflow: hidden; }
.panel { position: absolute; inset: 0; padding: 3vh 4vw; opacity: 0; transition: opacity 0.8s; display: flex; flex-direction: column; gap: 1.8vh; overflow: hidden; }
.panel.active { opacity: 1; }
h1 { font-size: 1.9em; margin: 0; line-height: 1.3; }
h2 { font-size: 1.2em; margin: 1vh 0 0; color: var(--text-secondary); font-weight: 600; }

.news { display: grid; gap: 2vh; }
.news-item { background: var(--surface-2); border-inline-start: 0.4em solid var(--accent); border-radius: 0.4em; padding: 1.5vh 1.5vw; }
.news-item.urgent { border-color: var(--urgent); }
.news-item .tag { font-size: 0.8em; color: var(--text-secondary); }
.news-item.urgent .tag { color: var(--text-primary); font-weight: 700; }
.news-item .tag::before { content: "● "; color: var(--accent); }
.news-item.urgent .tag::before { content: "▲ "; color: var(--urgent); }
.news-item .title { font-size: 1.5em; font-weight: 700; }
.news-item .body { color: var(--text-secondary); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.empty { color: var(--text-secondary); font-size: 1.3em; }

.heroes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; }
.hero { background: var(--surface-2); border-radius: 0.5em; padding: 1.5vh 1.5vw; }
.hero-label { color: var(--text-secondary); }
.hero-value { font-size: 2.8em; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.hero-note { color: var(--text-secondary); font-size: 0.9em; }

.bars { display: grid; gap: 0.9vh; }
.bar-row { display: grid; grid-template-columns: 22vw 1fr; gap: 1.5vw; align-items: center; }
.bar-track { position: relative; height: 1.2em; }
.bar { height: 100%; max-height: 24px; background: var(--series-1); border-radius: 4px 0 0 4px; min-width: 2px; }
.bar-value { position: absolute; top: 50%; transform: translateY(-50%); padding-inline-start: 0.5em; font-variant-numeric: tabular-nums; white-space: nowrap; }

.cta { margin-top: auto; font-size: 1.1em; color: var(--text-primary); background: var(--surface-2); border-radius: 0.4em; padding: 1.2vh 1.5vw; }
.fine { color: var(--text-secondary); margin-top: auto; }

.foot { display: flex; justify-content: space-between; gap: 2vw; padding: 1vh 3vw; border-top: 2px solid var(--border); min-height: 5vh; }
.ticker { font-size: 1.1em; }
.status { color: var(--text-secondary); font-size: 0.8em; }

.site { display: flex; align-items: center; gap: 0.5em; }
.site img { width: 1.4em; height: 1.4em; border-radius: 0.25em; }

/* Bednayel 2030 panel: the illustration, full bleed. */
#panel-hero { padding: 0; }
.hero-art { position: absolute; inset: 0; background: #060e22 url("/static/img/bednayel-2030-wide.jpg") center / cover no-repeat; }
.hero-caption { position: absolute; inset: auto 0 0 0; padding: 4vh 4vw; background: linear-gradient(transparent, rgba(2, 8, 18, 0.88)); }
.hero-title { font-size: 3.4em; font-weight: 700; }
.hero-sub { font-size: 1.3em; color: #cfe8ff; }

/* Map and trend panels */
#panel-map .complaints-map { flex: 1; min-height: 0; border-radius: 0.5em; z-index: 0; }
.legend { display: flex; gap: 2vw; }
.legend-item { display: inline-flex; align-items: center; gap: 0.4em; font-size: 1.1em; }
.legend-dot { width: 0.9em; height: 0.9em; border-radius: 50%; border: 2px solid #fff; display: inline-block; }
.trend-box { position: relative; flex: 1; min-height: 0; }