/* Measurements match the launcher: --u is one of its dp, on a screen as wide as the TV's 960 dp. */
:root {
  color-scheme: dark;
  --u: clamp(1px, calc(100vw / 960), 2px);
  --panel: #1a1d24f0;
  --sheet: #0d0f14;
  --tile: #1a1d24cc;
  --caption: #ffffffaa;
  --focus: #ffffff33;
  --danger: #ff9c94;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; overflow: hidden; background: #000; }

body {
  color: #fff;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

#wallpaper, #scrim { position: fixed; inset: 0; width: 100%; height: 100%; }
#wallpaper { object-fit: cover; }
#scrim { background: linear-gradient(#00000066, #00000033, #000000cc); }

#home {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(24 * var(--u)) 0 calc(32 * var(--u));
}

#time {
  padding: 0 calc(48 * var(--u));
  font-size: calc(64 * var(--u));
  font-weight: 300;
  line-height: 1.2;
}

#date { padding: 0 calc(48 * var(--u)); font-size: calc(18 * var(--u)); color: #ffffffdd; }
#spacer { flex: 1; }

#bar {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 calc(48 * var(--u));
  margin-bottom: 4px;
  color: var(--caption);
  font-size: 13px;
}

#actions { display: flex; flex-wrap: wrap; gap: 6px; }

#actions button {
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--panel);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

#actions button:hover:not(:disabled) { background: #3a3e47; }
#actions button:disabled { color: #ffffff55; cursor: default; }

#row {
  display: flex;
  list-style: none;
  margin: 0;
  padding: calc(8 * var(--u)) calc(48 * var(--u)) calc(4 * var(--u)) calc(40 * var(--u));
  overflow-x: auto;
  scrollbar-width: none;
  touch-action: pan-x;
  -webkit-user-select: none;
  user-select: none;
}

#row::-webkit-scrollbar { display: none; }

.column { flex: none; padding: 0 calc(8 * var(--u)); }
.column.dragging { position: relative; z-index: 2; }

.tile {
  display: block;
  width: calc(160 * var(--u));
  height: calc(90 * var(--u));
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: calc(8 * var(--u));
  background: var(--tile);
  color: #fff;
  font: inherit;
  font-size: calc(19 * var(--u));
  cursor: grab;
  transition: transform 90ms;
  -webkit-touch-callout: none;
}

.tile img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.tile.fixed { cursor: pointer; }

/* The launcher's focus look: slightly larger with a white ring. */
.tile:hover, .tile:focus-visible, .tile.selected {
  outline: calc(3 * var(--u)) solid #fff;
  outline-offset: calc(-3 * var(--u));
  transform: scale(1.07);
}

.column.dragging .tile { outline: calc(3 * var(--u)) solid #fff; outline-offset: calc(-3 * var(--u)); transform: scale(1.15); cursor: grabbing; transition: none; }

.caption {
  width: calc(160 * var(--u));
  padding: calc(5 * var(--u)) 0 0 calc(2 * var(--u));
  overflow: hidden;
  color: var(--caption);
  font-size: calc(13 * var(--u));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.column:hover .caption, .column:focus-within .caption { color: #fff; }

#gear {
  position: fixed;
  top: calc(24 * var(--u));
  right: calc(40 * var(--u));
  width: max(44px, calc(40 * var(--u)));
  height: max(44px, calc(40 * var(--u)));
  padding: calc(8 * var(--u));
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0.7;
}

#gear svg { display: block; width: 100%; height: 100%; fill: #fff; }
#gear:hover, #gear:focus-visible, #gear[aria-expanded="true"] { background: #ffffff55; opacity: 1; outline: 0; }

#menu {
  position: fixed;
  top: calc(calc(24 * var(--u)) + max(48px, calc(48 * var(--u))));
  right: calc(40 * var(--u));
  width: min(280px, calc(100vw - 32px));
  padding: 8px;
  border-radius: 12px;
  background: var(--panel);
}

#menu button {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#menu button:hover, #menu button:focus-visible { background: var(--focus); outline: 0; }
#contact { margin: 4px 12px 6px; color: var(--caption); font-size: 13px; }

#toast {
  position: fixed;
  top: calc(24 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  margin: 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--panel);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms;
}

#toast.visible { opacity: 1; }
#toast.error { color: var(--danger); }

#login {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 24px;
  border-radius: 12px;
  background: var(--panel);
}

#login h1 { margin: 0 0 8px; font-size: 28px; font-weight: 400; }
#login p { margin: 0 0 16px; font-size: 14px; color: #ffffffcc; }
#login p.error { color: var(--danger); }
#login label { display: block; margin-bottom: 12px; font-size: 14px; }

#login input {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  padding: 8px 12px;
  border: 1px solid #ffffff44;
  border-radius: 8px;
  background: #0d0f14;
  color: #fff;
  font: inherit;
}

#login button, .upload {
  display: inline-block;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #0d0f14;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

/* Full-screen pages, like the launcher's "Alle Apps" screen. */
.sheet {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  padding: calc(24 * var(--u)) max(16px, calc(40 * var(--u))) 32px;
  background: var(--sheet);
}

.sheet header { display: flex; align-items: center; justify-content: space-between; }
.sheet h2 { margin: 0; font-size: 28px; font-weight: 400; }

.close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.close:hover, .close:focus-visible { background: var(--focus); outline: 0; }
.note { margin: 4px 0 16px; color: var(--caption); font-size: 14px; }
#upload-status { min-height: 20px; margin-top: 12px; }
#upload-status.error { color: var(--danger); }
#file { position: absolute; width: 1px; height: 1px; opacity: 0; }
#file:focus-visible + #upload-status { outline: 2px solid #fff; }

#all-apps, #images {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

#all-apps { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px 12px; }
#images { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }

.app {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffffcc;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.app .art {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  margin-bottom: 4px;
  overflow: hidden;
  border-radius: 8px;
  background: #1a1d24;
  font-size: 15px;
  color: #fff;
}

.app img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app:hover .art, .app:focus-visible .art { outline: 3px solid #fff; outline-offset: -3px; }
.app:focus-visible { outline: 0; }
.app .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app .mark {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #0d0f14;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
}

.picture { overflow: hidden; border-radius: 8px; background: #1a1d24; }
.picture img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #252933; }
.picture div { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 2px 10px; color: var(--caption); font-size: 13px; }

.picture button {
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--danger);
  font: inherit;
  cursor: pointer;
}

.picture button:hover, .picture button:focus-visible { background: var(--focus); outline: 0; }

@media (prefers-reduced-motion: reduce) {
  .tile, #toast { transition: none; }
}