/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: #000;
  color: #fff;
}

:root {
  /* PiP sidebar width. Everything in the pane (clock, date, weather) is sized
     in cqw against this, so widening it grows the clock with it. */
  --pip-left-width: clamp(230px, 20vw, 400px);
}

body.hide-cursor,
body.hide-cursor * {
  cursor: none !important;
}

/* ── NAV BAR ── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: linear-gradient(to bottom, rgba(0,0,0,.85), transparent);
  transition: opacity .5s ease, transform .5s ease;
}

#navbar.hidden {
  opacity: 0;
  transform: translateY(-110%);
  pointer-events: none;
}

.brand {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .05em;
  margin-right: 8px;
  flex-shrink: 0;
}

.nav-buttons {
  display: flex;
  gap: 8px;
  flex: 1;
}

.nav-btn {
  padding: 7px 18px;
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: .9rem;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.nav-btn:hover  { background: rgba(255,255,255,.2); }
.nav-btn.active { background: rgba(255,255,255,.9); color: #000; border-color: #fff; font-weight: 600; }

#settings-toggle, #fs-btn {
  flex-shrink: 0;
  padding: 7px 12px;
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background .2s;
}
#settings-toggle:hover, #fs-btn:hover { background: rgba(255,255,255,.2); }

/* ── SETTINGS PANEL ── */
#settings-panel {
  position: fixed;
  top: 60px; right: 16px;
  z-index: 200;
  width: min(360px, 92vw);
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(20,20,30,.97);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 22px 24px 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: slideIn .2s ease;
}
#settings-panel[hidden] { display: none; }

/* Thin, low-contrast scrollbar for the dark panel */
#settings-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
}
#settings-panel::-webkit-scrollbar {
  width: 8px;
}
#settings-panel::-webkit-scrollbar-track {
  background: transparent;
}
#settings-panel::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,.25);
  border-radius: 4px;
}
#settings-panel::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255,255,255,.4);
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

#settings-panel h3 {
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .55;
}

#settings-panel section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#settings-panel label { font-size: .85rem; opacity: .8; }
#settings-panel small { opacity: .5; }
.settings-hint,
.hint {
  font-size: .78rem;
  opacity: .6;
  line-height: 1.4;
}

#settings-panel input,
#settings-panel select,
#settings-panel textarea {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: .9rem;
  outline: none;
  resize: vertical;
}
#settings-panel input:focus,
#settings-panel select:focus,
#settings-panel textarea:focus { border-color: rgba(255,255,255,.5); }

#settings-panel button {
  padding: 7px 14px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,.15);
  color: #fff;
  cursor: pointer;
  font-size: .85rem;
  transition: background .2s;
  align-self: flex-start;
}
#settings-panel button:hover { background: rgba(255,255,255,.28); }

#settings-panel #settings-close {
  align-self: flex-end;
  margin-top: -4px;
  position: sticky;
  bottom: -18px;
  z-index: 1;
  /* Match the panel's own bg + bottom padding so content can't show
     through while the button rides the sticky bottom edge. */
  background: rgba(20,20,30,.97);
  padding: 10px 14px 18px;
  margin-bottom: -18px;
  margin-right: -24px;
  width: calc(100% + 24px);
  text-align: right;
  border-radius: 0 0 14px 14px;
}

/* ── ANNOUNCEMENT BANNER ── */
:root { --banner-h: clamp(64px, 9vh, 130px); }
#banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--banner-h);
  z-index: 50;               /* above the views, below the auto-hiding navbar */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3vw;
  background: #f5b301;
  color: #111;
  font-weight: 700;
  font-size: clamp(1.3rem, 4vh, 3rem);   /* ~43px at 1080p, was ~35px */
  line-height: 1.1;
  text-align: center;
  overflow: hidden;
}
#banner[hidden] { display: none; }

/* Push the whole view area down instead of covering the top of it, so the
   weather box / slide are shrunk, not hidden. */
body.has-banner #views {
  position: absolute;
  top: var(--banner-h); left: 0; right: 0; bottom: 0;
  width: auto; height: auto;
}

/* ── VIEWS ── */
#views { width: 100%; height: 100%; position: relative; }

.view {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
}
.view.active { display: flex; }
#pip-view.view.active { display: grid; }

/* ── CLOCK VIEW ── */
#clock-view { background: #000; }

#image-view { background: #000; }
#slides-view { background: #111; }

#clock-wrapper {
  text-align: center;
  user-select: none;
}

#clock-time {
  font-size: clamp(3.5rem, 13vw, 11rem);
  font-weight: 200;
  letter-spacing: .04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
  transition: font-size .3s;
}

/* minimal style */
body.minimal #clock-time {
  font-weight: 100;
  color: rgba(255,255,255,.75);
  font-size: clamp(4rem, 16vw, 14rem);
}

#clock-date {
  margin-top: 1.2rem;
  font-size: clamp(.9rem, 2.8vw, 2rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
}

/* ── Shared stage ── */
#stage-layer {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #000;
  z-index: 1;
}
#stage-layer.active { display: flex; }
#stage-layer[data-media='slides'] { background: #111; }
/* The stage is a size container so the slides frame can be fitted with
   cqw/cqh (see #slides-iframe). Its own box never depends on its content. */
#stage-layer { container-type: size; }

body[data-view='pip'] #stage-layer {
  left: var(--pip-left-width);
  right: 0;
  top: 0;
  bottom: 0;
}

body:not([data-view='pip']) #stage-layer {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#display-image {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  display: none;
}
#stage-layer[data-media='image'] #display-image.loaded { display: block; }
#stage-layer.img-fit #display-image.loaded {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: contain;
  object-position: center;
}

/* Contain-fit a true 16:9 frame inside the stage, centred. The stage's own
   background (the clock gradient) shows on whichever axis has spare room, so
   ultrawide / 4:3 / 16:10 screens get colour bars instead of Google's black
   letterbox INSIDE the frame. Fallback first for browsers without cq units. */
#slides-iframe {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  max-width: 100%; max-height: 100%;
  border: none;
  display: none;
  flex: none;
}
@supports (width: 1cqw) {
  #slides-iframe {
    width: min(100cqw, 100cqh * 16 / 9);
    height: min(100cqh, 100cqw * 9 / 16);
    max-width: none; max-height: none;
  }
}
#stage-layer[data-media='slides'] #slides-iframe.loaded { display: block; }

#image-placeholder, #slides-placeholder {
  text-align: center;
  opacity: .45;
  font-size: 1.1rem;
  line-height: 1.8;
  padding: 24px;
  display: none;
}
#image-placeholder.visible,
#slides-placeholder.visible {
  display: block;
}

/* ── PiP layout ── */
#pip-view {
  grid-template-columns: var(--pip-left-width) 1fr;
  grid-template-rows: 1fr;
  align-items: stretch;
  justify-items: stretch;
  align-content: stretch;
  justify-content: stretch;
  z-index: 10;
  display: none;
}

#pip-notes-pane {
  background: rgba(0,0,0,.65);
  color: #fff;
}

#pip-notes-pane {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  --pip-text-scale: 1;
  container-type: inline-size;
}

#pip-weather {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  /* Own size container: every child below is sized in cqw of THIS box, so the
     text scales with the box instead of with the viewport, and can never be
     wider than the box it sits in. overflow:hidden is the last-resort clip. */
  container-type: inline-size;
  overflow: hidden;
  overflow-wrap: anywhere;
}
#pip-weather[hidden] { display: none; }

.pip-weather-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  font-size: .78em;
  font-size: clamp(.62rem, 6.4cqw, .8rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
}
#pip-weather-location:empty { display: none; }
#pip-weather-updated {
  opacity: .6;
  font-size: .72em;
  letter-spacing: .04em;
  text-transform: none;
}

.pip-weather-main {
  display: flex;
  align-items: center;
  gap: 5cqw;
  min-width: 0;
}

#pip-weather-icon { flex: none; }
#pip-weather-icon svg {
  width: 58px;
  height: 58px;
  width: clamp(34px, 25cqw, 64px);
  height: clamp(34px, 25cqw, 64px);
  display: block;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .9;
}

.pip-weather-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 0;
  gap: 4px;
}

/* 100 degrees is the widest realistic reading ("100°" ~ 2.4em). 22cqw keeps
   it inside the ~68cqw left after the icon and gap. */
#pip-weather-temp {
  font-size: clamp(2em, 4vw, 2.9em);
  font-size: min(22cqw, 3.2rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* Condition + range live BELOW the icon/temp row at full box width and are
   allowed to wrap; "Thunderstorm, Hail" wraps instead of spilling. */
#pip-weather-condition {
  font-size: .95em;
  font-size: clamp(.68rem, 7.6cqw, 1.05rem);
  letter-spacing: .06em;
  line-height: 1.25;
  text-transform: uppercase;
  opacity: .85;
  white-space: normal;
  overflow-wrap: anywhere;
}

#pip-weather-range {
  font-size: .9em;
  font-size: clamp(.68rem, 8cqw, 1.05rem);
  opacity: .7;
  white-space: normal;
  overflow-wrap: anywhere;
}

#pip-weather-placeholder {
  font-size: .85em;
  opacity: .65;
}

#pip-weather.has-data #pip-weather-placeholder {
  display: none;
}

#pip-weather.stale .pip-weather-top {
  color: rgba(255,255,255,.75);
}

#pip-notes-scroll {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
  font-size: calc(1em * var(--pip-text-scale));
}

#pip-notes-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}

#pip-notes-list li { margin: 0; }

/* Blank-line spacer: one interior blank line == one note-line-height of
   extra space. A plain empty <li> would add its own height PLUS a second
   12px flex gap (one before it, one after), overshooting by 12px. Sizing
   the spacer to (line-height - gap) cancels that: 12px(gap) + (1.33em-12px)
   + 12px(gap) = 1.33em + 12px total delta versus the single 12px gap that
   would otherwise separate the two neighbouring notes, i.e. a net add of
   exactly 1.33em (one .pip-note-label line-height) with no extra gap. */
.pip-note-spacer {
  height: calc(1.3em - 12px);
}

#pip-notes-empty {
  opacity: .5;
  line-height: 1.6;
  display: none;
}
#pip-notes-empty.visible { display: block; }

/* ── PiP text-scale control (under the weather box's right edge) ── */
#pip-text-scale-controls {
  display: none;
  z-index: 20;
  gap: 6px;
  align-self: flex-end;
}
#pip-view.view.active #pip-text-scale-controls { display: flex; }

#pip-text-scale-controls button {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 7px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s;
}
#pip-text-scale-controls button:hover { background: rgba(0,0,0,.75); }
#pip-text-scale-controls button:disabled {
  opacity: .35;
  cursor: default;
}

.pip-note {
  display: grid;
  grid-template-columns: 3.3em 1fr;   /* time column | label column */
  column-gap: .75em;
  align-items: baseline;
}
.pip-note-time {
  grid-column: 1;
  text-align: right;                  /* colons line up top to bottom */
  font-weight: 800;
  font-size: 1em;
  font-variant-numeric: tabular-nums;
}
.pip-note-label {
  grid-column: 2;
  font-size: 1em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
/* A line with no leading time uses the full row. */
.pip-note-label:only-child { grid-column: 1 / -1; }
.pip-note--past { opacity: .45; }

#pip-clock-pane {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  background: transparent;
  color: #fff;
}
#pip-clock-time {
  font-size: clamp(2.5rem, 4.2vw, 5rem);
  font-size: 34cqw;
  font-weight: 300;
  line-height: 1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* clock-seconds adds "HH:MM:SS" (8 chars, ~4.2em) which would overflow the
   238px content box at 34cqw/80.9px (4.2em x 80.9 = 340px). Shrink to
   21cqw = 50.0px so 4.2em x 50.0 = 210px, ~88% of the 238px box. */
body.pip-clock-seconds #pip-clock-time {
  font-size: clamp(1.54rem, 2.59vw, 3.09rem);
  font-size: 21cqw;
}
#pip-clock-date {
  margin-top: .4rem;
  font-size: clamp(.81rem, 1.36vw, 1.62rem);
  font-size: 11cqw;
  letter-spacing: .04em;
  opacity: .65;
  white-space: normal;
  overflow-wrap: break-word;
}
/* full-date toggle: the 29-char string doesn't need a nowrap fit like the
   time does — white-space stays normal/break-word above, so it just wraps. */
body.pip-clock-full-date #pip-clock-date {
  font-size: clamp(.62rem, .85vw, .72rem);
  font-size: 4.6cqw;
}

/*
 * Cursor hiding cannot reach inside the slides frame. docs.google.com is
 * cross-origin, so the cursor drawn over it is decided by *its* document -
 * the parent's `cursor: none` lands on the iframe element and is ignored
 * (devtools even reports cursor:none on the frame element, which is why this
 * looked fixed). The same boundary swallows mousemove, so hovering the frame
 * never reset the inactivity timer.
 *
 * While the UI is hidden, drop the frame out of hit-testing entirely: the
 * parent document then owns the cursor for that whole area, so `cursor: none`
 * really applies, and a mousemove over the slides reaches the parent and
 * brings the UI back.
 *
 * Kiosk semantics: the display is a passive sign, so the frame not receiving
 * clicks while the UI is hidden is acceptable - and it is self-correcting,
 * since any pointer movement over that area both restores the cursor and
 * re-enables the frame.
 */
body.hide-cursor #slides-iframe {
  pointer-events: none;
}

/* ── Settings sliders ── */
.hue-row, .slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slider-label {
  font-size: .78rem;
  opacity: .65;
  width: 68px;
  flex-shrink: 0;
}

.hue-row span, .slider-row span:last-child {
  font-size: .78rem;
  opacity: .7;
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

/* Rainbow hue slider track */
.hue-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(
    to right,
    hsl(0,80%,50%), hsl(30,80%,50%), hsl(60,80%,50%), hsl(90,80%,50%),
    hsl(120,80%,50%), hsl(150,80%,50%), hsl(180,80%,50%), hsl(210,80%,50%),
    hsl(240,80%,50%), hsl(270,80%,50%), hsl(300,80%,50%), hsl(330,80%,50%),
    hsl(360,80%,50%)
  );
  outline: none;
  border: none;
  cursor: pointer;
}
.hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,.4);
  box-shadow: 0 0 4px rgba(0,0,0,.5);
  cursor: pointer;
}
.hue-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,.4);
  box-shadow: 0 0 4px rgba(0,0,0,.5);
  cursor: pointer;
}

/* Generic range sliders */
#settings-panel input[type=range]:not(.hue-slider) {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.2);
  outline: none;
  border: none;
  cursor: pointer;
}
#settings-panel input[type=range]:not(.hue-slider)::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,.3);
  cursor: pointer;
}
#settings-panel input[type=range]:not(.hue-slider)::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,.3);
  cursor: pointer;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: .85rem;
  opacity: .85;
}
.toggle-row input[type=checkbox] {
  width: 16px; height: 16px;
  accent-color: #fff;
  cursor: pointer;
}

/* ── Responsive tweaks ── */
@media (max-width: 520px) {
  .nav-btn { padding: 6px 12px; font-size: .8rem; }
  .brand   { display: none; }
}