/* Salience Engine — Frame surface.
   Portrait, dark, photo-dominant, calm. Glassmorphism overlays on right third
   and top corners. Sized in vh/vw. Tizen-safe: no container queries, no :has(). */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0C0E12;
  --fg: #F4F2EC;
  --fg-dim: #9AA0A8;
  --fg-faint: #6b727b;
  --green: #1D9E75; --green-bg: rgba(17,36,27,0.85); --green-fg: #5DCAA5;
  --amber: #EF9F27; --amber-bg: rgba(44,34,7,0.85);  --amber-fg: #EF9F27;
  --red:   #E24B4A; --red-bg:   rgba(44,16,16,0.85); --red-fg:   #F09595;
  --blue-fg: #7FB7E8;
  --grey: #5F5E5A;  --grey-bg: rgba(27,30,36,0.75);
  --line:       rgba(255,255,255,0.10);
  --glass-bg:   rgba(0,0,0,0.22);
  --glass-bdr:  rgba(255,255,255,0.14);
  --mono: "SF Mono", ui-monospace, "Cascadia Code", "Fira Code", "Consolas", "Courier New", monospace;
}

html, body { height: 100%; background: var(--bg); }
body {
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ── Root screen ── */
#screen {
  position: relative;
  width: 100vw; height: 100vh;
  overflow: hidden;
}

/* ── Photo background (top 75 vh) ── */
#photo {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%; /* full bleed — bottom strip blurs it with backdrop-filter */
  background: #111;
  overflow: hidden;
}
#photo-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 1.2s ease;
}
#photo-img.shown { opacity: 1; }
#photo-cap {
  position: absolute; left: 2vw; bottom: 27vh; /* keep inside visible photo, above the strip */
  font-size: 1.8vh; color: #E8EBEF;
  background: rgba(0,0,0,0.52);
  padding: 0.5vh 1.2vh; border-radius: 6px;
  max-width: 60%;
}

/* ── Glass helper — transparent, no blur so photo shows through ── */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-bdr);
  border-radius: 14px;
}

/* ── Clock / date — top-left overlay ── */
#overlay-tl {
  position: absolute;
  top: 2.2vh; left: 2vw;
  padding: 1.6vh 2.4vw;
  z-index: 2;
}
#time {
  font-size: 5.4vh; font-weight: 200; line-height: 1;
  letter-spacing: -0.02em;
}
#date {
  font-size: 2vh; color: var(--fg-dim);
  margin-top: 0.5vh;
}
#context-badge {
  display: inline-flex; align-items: center; gap: 0.7vh;
  margin-top: 1.1vh;
  font-size: 1.7vh; color: var(--fg-dim);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 0.45vh 1.1vh;
  width: fit-content;
  letter-spacing: 0.02vh;
}

/* ── Right column — weather + panels ── */
#right-col {
  position: absolute;
  top: 2.2vh; right: 1.5vw;
  width: 34vw;
  z-index: 2;
  display: flex; flex-direction: column;
  gap: 1.2vh;
  overflow: hidden;
}

/* ── Current weather card ── */
#wx-current { padding: 1.6vh 1.8vw; }

#wx-main {
  display: flex; align-items: center;
  gap: 1.4vw; margin-bottom: 1.2vh;
}
#wx-icon { font-size: 5.2vh; line-height: 1; }
#wx-temp { font-size: 6.2vh; font-weight: 200; line-height: 1; white-space: nowrap; }

.wx-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.45vh 0;
  border-top: 1px solid var(--line);
  font-size: 1.85vh;
}
.wx-lbl { color: var(--fg-dim); }
.wx-val { font-weight: 500; }

/* ── Salience + Radiator panels ── */
#salience-panel,
#radiator-panel {
  padding: 1.4vh 1.8vw;
  overflow: hidden;
}
#salience-panel { max-height: 38vh; }

/* Terminal/nerd font for the cluster status panel */
#radiator-panel,
#radiator-panel .p-title,
#radiator-panel .pill .lbl,
#radiator-panel .pill .val {
  font-family: var(--mono);
  letter-spacing: 0;
}
/* Monospace is wider per glyph — step down to fit labels + values */
#radiator-panel .pill .lbl { font-size: 1.25vh; }
#radiator-panel .pill .val { font-size: 1.25vh; }

.p-title {
  font-size: 1.5vh; font-weight: 600;
  letter-spacing: 0.22vh; color: var(--blue-fg);
  margin-bottom: 1.2vh;
}

/* salience items */
.s-item { display: flex; gap: 1vh; margin-bottom: 1.2vh; align-items: flex-start; }
.chip {
  flex: none; font-size: 1.15vh; font-weight: 700;
  letter-spacing: 0.08vh; text-transform: uppercase;
  padding: 0.4vh 0.8vh; border-radius: 4px;
  border-left: 3px solid;
}
.chip.confirmed { background: var(--green-bg); color: var(--green-fg); border-color: var(--green); }
.chip.plausible { background: var(--amber-bg); color: var(--amber-fg); border-color: var(--amber); }
.chip.drift     { background: var(--red-bg);   color: var(--red-fg);   border-color: var(--red);   }
.s-body    { flex: 1; min-width: 0; } /* must have this or text collapses to 0-width */
.s-text {
  display: -webkit-box;
  font-size: 1.75vh; line-height: 1.4;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.s-confirm {
  display: -webkit-box;
  font-size: 1.4vh; color: var(--fg-dim); font-style: italic;
  margin-top: 0.3vh;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* radiator pills — stacked vertically in right col */
.pills { display: flex; flex-direction: column; gap: 0.8vh; }
.pill {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--grey-bg);
  border-radius: 8px; border: 1px solid var(--line);
  padding: 0.9vh 1.2vh;
  min-width: 0; overflow: hidden;
}
.pill .lbl {
  display: flex; align-items: center; gap: 0.7vh;
  font-size: 1.5vh; color: var(--fg-dim);
  overflow: hidden; white-space: nowrap;
  flex: 1 1 auto; min-width: 0;
}
.pill .lbl span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pill .val {
  font-size: 1.5vh; font-weight: 500;
  white-space: nowrap; flex: 0 0 auto;
  margin-left: 0.8vh;
}
.dot { width: 1.1vh; height: 1.1vh; border-radius: 50%; background: var(--grey); flex: none; }
.dot.ok    { background: var(--green); }
.dot.warn  { background: var(--amber); }
.dot.crit  { background: var(--red);   }
.dot.stale { background: var(--grey);  }

/* ── Bottom strip (25 vh) — liquid glass over full-bleed photo ── */
#bottom {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 25vh;
  background: rgba(6,8,12,0.38);
  backdrop-filter: blur(48px) saturate(1.6) brightness(0.72);
  -webkit-backdrop-filter: blur(48px) saturate(1.6) brightness(0.72);
  border-top: 1px solid rgba(255,255,255,0.13);
  display: flex; align-items: stretch;
  z-index: 3;
}

/* 5-day forecast — left of bottom strip, true row grid */
#weekly-wx {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto auto auto auto;
  align-items: center;
  text-align: center;
  padding: 1.2vh 2.2vw;
  flex: 0 0 40vw;
  border-right: 1px solid rgba(255,255,255,0.07);
  row-gap: 0.5vh;
}
.fc-name   { font-size: 1.4vh; color: var(--fg-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05vh; }
.fc-icon   { font-size: 3vh; line-height: 1; }
.fc-hi     { font-size: 2.1vh; font-weight: 500; }
.fc-lo     { font-size: 1.7vh; color: var(--fg-dim); }
.fc-precip { font-size: 1.3vh; color: var(--blue-fg); min-height: 1.6vh; }

/* News story — right of bottom strip */
#news-story {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 1.6vh 2.8vw;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.5s ease;
}
#news-kicker {
  font-size: 1.4vh; font-weight: 700; letter-spacing: 0.18vh;
  color: var(--blue-fg); text-transform: uppercase;
  margin-bottom: 0.6vh;
}
#news-head {
  font-size: 2.1vh; font-weight: 600; line-height: 1.35;
  margin-bottom: 0.7vh;
}
#news-snip {
  font-size: 1.75vh; color: var(--fg-dim); line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Critical interrupt ── */
#interrupt {
  position: absolute;
  left: 5vw; right: 5vw; top: 10vh;
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-radius: 12px;
  padding: 2vh 2.8vw;
  z-index: 10;
}
#interrupt .ihead { font-size: 1.6vh; font-weight: 700; color: var(--red-fg); letter-spacing: 0.1vh; }
#interrupt .ibody { font-size: 2.2vh; margin-top: 0.6vh; }

.hidden { display: none !important; }