:root {
  --zoom: 1;               /* set by script.js (0.7 - 1.5) */
  --bg: #000000;
  --text: #ffffff;
  --muted: #888888;
  --border: #333333;       /* the grid lines */
  --line: 2px;
  color-scheme: dark;
}

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

html,
body {
  height: 100%;
}

body {
  background: #111;        /* dark backdrop outside the widget */
  color: var(--text);
  font-family: "Segoe UI", "Helvetica Neue", Tahoma, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* =========================================
   THE WIDGET: a real 2 x 2 grid, so the
   horizontal line is shared by both columns
   ========================================= */
.widget {
  /* Everything inside is sized from the widget's own size (cqw / cqh),
     so text can never outgrow its box. */
  container-type: size;

  display: grid;
  grid-template-columns: 5fr 2fr;   /* left wider, right narrower */
  grid-template-rows: 1fr 1fr;

  width: min(calc(480px * var(--zoom)), 96vw);
  aspect-ratio: 8 / 3;
  max-height: 96vh;

  background: var(--bg);
  border: var(--line) solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.cell {
  display: flex;
  align-items: center;
  min-width: 0;                     /* lets text shrink instead of overflowing */
  min-height: 0;
  padding: 0 6cqw;
  overflow: hidden;
}

/* Grid lines */
.time-cell { border-right: var(--line) solid var(--border); border-bottom: var(--line) solid var(--border); }
.icon-cell { border-bottom: var(--line) solid var(--border); }
.date-cell { border-right: var(--line) solid var(--border); }

/* Right column is centred */
.icon-cell,
.temp-cell {
  justify-content: center;
  text-align: center;
  padding: 0 1cqw;
}

/* Time + AM/PM share a baseline; AM/PM is pushed to the right */
.time-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 2cqw;
}

/* =========================================
   TYPOGRAPHY
   (rem value first = fallback for browsers
    without container query units)
   ========================================= */
.time {
  font-size: calc(2.4rem * var(--fz, 1));
  font-size: calc(min(30cqh, 11cqw) * var(--fz, 1));
  font-weight: 200;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ampm {
  font-size: calc(0.9rem * var(--fz, 1));
  font-size: calc(min(11cqh, 3.6cqw) * var(--fz, 1));
  font-weight: 300;
  color: var(--muted);
  white-space: nowrap;
}

.date {
  font-size: calc(0.9rem * var(--fz, 1));
  font-size: calc(min(11cqh, 3.8cqw) * var(--fz, 1));
  font-weight: 300;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weather-icon {
  font-size: calc(1.6rem * var(--fz, 1));
  font-size: calc(min(20cqh, 7cqw) * var(--fz, 1));
  line-height: 1;
}

.temp {
  font-size: calc(1.1rem * var(--fz, 1));
  font-size: calc(min(14cqh, 4.4cqw) * var(--fz, 1));
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* =========================================
   BUTTONS
   ========================================= */
.controls,
.popout-btn {
  position: fixed;
  top: 1rem;
  z-index: 100;
  opacity: 0.3;
  transition: opacity 0.2s;
}
.controls   { left: 1rem; display: flex; gap: 0.5rem; }
.popout-btn { right: 1rem; }

.controls:hover,
.controls:focus-within,
.popout-btn:hover,
.popout-btn:focus-visible {
  opacity: 1;
}

button {
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.2;
  background: transparent;
  border: 1px solid #444;
  color: var(--text);
  cursor: pointer;
  border-radius: 4px;
  padding: 0.3rem 0.7rem;
  min-width: 2rem;
}
button:hover { background: #222; }
button:active { background: #333; }
button:focus-visible { outline: 2px solid #5b9dff; outline-offset: 2px; }

/* =========================================
   POP-OUT WINDOW: widget fills the whole window
   ========================================= */
body.popup {
  background: var(--bg);
  display: block;
  --fz: var(--zoom);   /* window size is fixed, so zoom scales the text here */
}

body.popup .widget {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border: none;
  border-radius: 0;
}

/* The pop-out has no room for permanent buttons: show them only on hover/focus,
   in the empty space to the right of the date so they never cover text. */
body.popup .popout-btn { display: none; }

body.popup .controls {
  top: auto;
  left: auto;
  right: calc(100% * 2 / 7 + 8px);   /* right edge of the left column */
  bottom: 6px;
  opacity: 0;
  gap: 4px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 6px;
}
body.popup:hover .controls,
body.popup .controls:focus-within { opacity: 1; }
body.popup .controls button { padding: 0.1rem 0.5rem; font-size: 0.8rem; }

/* Very small windows: thinner lines */
@media (max-height: 120px), (max-width: 300px) {
  :root { --line: 1px; }
}