:root {
  --tlk-blue: #0b2a5b;
  --tlk-blue-2: #123f82;
  --tlk-blue-3: #1d5faf;
  --tlk-blue-soft: #8dbbe8;

  --bg: #06142a;
  --bg2: #0a2144;

  --panel: rgba(10, 35, 72, .90);
  --panel2: rgba(7, 27, 57, .96);

  --line: rgba(255,255,255,.10);

  --text: #f7fbff;
  --muted: #a9bfd8;

  --accent: #6eb5ff;
  --accent2: #d6ebff;

  --warm: #f5cf73;
  --danger: #ffaaa4;

  --radius: 22px;
  --shadow: 0 24px 70px rgba(0,0,0,.35);

  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;

  font-family:
          Inter,
          ui-sans-serif,
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;

  color: var(--text);

  background:
          radial-gradient(
                  circle at 82% -8%,
                  rgba(29,95,175,.28),
                  transparent 36rem
          ),
          radial-gradient(
                  circle at -10% 28%,
                  rgba(110,181,255,.12),
                  transparent 30rem
          ),
          linear-gradient(
                  145deg,
                  var(--bg),
                  var(--bg2)
          );
}

body::before {
  content: "";

  position: fixed;
  inset: 0;

  pointer-events: none;

  opacity: .20;

  background-image:
          linear-gradient(
                  rgba(255,255,255,.025) 1px,
                  transparent 1px
          ),
          linear-gradient(
                  90deg,
                  rgba(255,255,255,.025) 1px,
                  transparent 1px
          );

  background-size: 46px 46px;

  mask-image:
          linear-gradient(
                  to bottom,
                  black,
                  transparent 74%
          );
}

.dashboard {
  width: min(
          1560px,
          calc(100% - 48px)
  );

  margin: 0 auto;

  padding:
          34px 0
          28px;
}


/* --------------------------------------------------
   Header
   -------------------------------------------------- */

.topbar {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 24px;

  padding:
          6px 2px
          14px;

  border-bottom:
          2px solid
          rgba(110,181,255,.45);
}

.brand {
  display: flex;
  align-items: center;

  gap: 16px;

  min-width: 0;
}

.brand > div,
.brand > span {
  min-width: 0;
}

.tlklogo {
  width: 80px;
  height: auto;

  flex: 0 0 auto;
}

.brand-mark {
  width: 58px;
  height: 58px;

  border-radius: 50%;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  font-weight: 950;

  letter-spacing: -.02em;

  color: white;

  border:
          2px solid
          rgba(255,255,255,.85);

  background:
          linear-gradient(
                  145deg,
                  var(--tlk-blue-3),
                  var(--tlk-blue)
          );

  box-shadow:
          0 8px 30px
          rgba(0,0,0,.28),
          inset 0 0 0 4px
          rgba(255,255,255,.05);
}

h1 {
  margin: 0;

  font-size:
          clamp(
                  2.2rem,
                  5vw,
                  4.5rem
          );

  line-height: .95;

  letter-spacing: -.03em;
}

h2 {
  margin:
          4px 0 0;

  font-size:
          clamp(
                  1.2rem,
                  2vw,
                  1.7rem
          );

  letter-spacing: -.035em;
}

.eyebrow,
.kicker {
  margin: 0;

  text-transform: uppercase;

  letter-spacing: .16em;

  color: var(--accent);

  font-size: .74rem;

  font-weight: 850;
}

.clock-wrap {
  text-align: right;

  flex: 0 0 auto;
}

.clock {
  font-variant-numeric:
          tabular-nums;

  font-size:
          clamp(
                  2rem,
                  4vw,
                  3.4rem
          );

  font-weight: 850;

  letter-spacing: -.055em;

  line-height: 1;
}

.date {
  color: var(--muted);

  margin-top: 6px;

  font-weight: 650;
}


/* --------------------------------------------------
   Generic panels
   -------------------------------------------------- */

.panel {
  border:
          1px solid
          var(--line);

  background:
          linear-gradient(
                  180deg,
                  rgba(255,255,255,.045),
                  transparent 42%
          ),
          var(--panel);

  border-radius:
          var(--radius);

  box-shadow:
          var(--shadow);

  overflow: hidden;

  backdrop-filter:
          blur(16px);
}

.panel-heading {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding:
          22px 24px
          18px;
}


/* --------------------------------------------------
   Main hero grid
   -------------------------------------------------- */

.hero-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(320px, .8fr);

  gap: 20px;

  margin-bottom: 20px;
}


/* --------------------------------------------------
   Camera
   -------------------------------------------------- */

.camera-card {
  min-width: 0;
}

.camera-frame {
  position: relative;

  isolation: isolate;

  aspect-ratio:
          16 / 8.4;

  overflow: hidden;

  background:
          #020813;

  border-top:
          1px solid
          var(--line);
}

.camera-frame img {
  position: relative;

  z-index: 1;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.camera-vignette {
  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
          linear-gradient(
                  180deg,
                  transparent 58%,
                  rgba(1,8,18,.48)
          ),
          linear-gradient(
                  90deg,
                  rgba(6,20,42,.15),
                  transparent 20%,
                  transparent 80%,
                  rgba(6,20,42,.15)
          );
}

.camera-placeholder {
  height: 100%;

  display: grid;

  place-content: center;

  text-align: center;

  gap: 8px;

  color: var(--muted);
}

.camera-placeholder strong {
  color: var(--text);

  font-size: 1.15rem;
}

.camera-placeholder code {
  color: var(--accent2);
}


/* --------------------------------------------------
   Privacy overlay
   -------------------------------------------------- */

.privacy-overlay {
  position: absolute;

  inset: 0;

  z-index: 100;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 24px;

  text-align: center;

  background:
          radial-gradient(
                  circle at center,
                  rgba(18,63,130,.78),
                  rgba(4,17,38,.72)
          );

  text-shadow:
          0 2px 18px
          #000;

  pointer-events: none;
}

.privacy-overlay[hidden] {
  display: none !important;
}

.privacy-overlay strong {
  display: block;

  font-size:
          clamp(
                  1.2rem,
                  4vw,
                  2rem
          );

  line-height: 1.1;
}

.privacy-overlay small {
  display: block;

  max-width: 32rem;

  color: #dceafb;

  font-size:
          clamp(
                  .75rem,
                  2vw,
                  1rem
          );

  line-height: 1.4;
}

.privacy-icon {
  font-size:
          clamp(
                  1.6rem,
                  5vw,
                  2.8rem
          );

  color: var(--warm);
}


/* --------------------------------------------------
   Status pills
   -------------------------------------------------- */

.status,
.count-pill {
  display: inline-flex;

  align-items: center;

  min-height: 30px;

  padding:
          0 11px;

  border-radius: 999px;

  font-size: .75rem;

  font-weight: 850;

  border:
          1px solid
          var(--line);

  background:
          rgba(255,255,255,.05);

  white-space: nowrap;
}

.status-open {
  color: #cce7ff;

  border-color:
          rgba(110,181,255,.38);

  background:
          rgba(29,95,175,.22);
}

.status-private {
  color: var(--warm);

  border-color:
          rgba(245,207,115,.30);

  background:
          rgba(245,207,115,.08);
}

.status-error {
  color: var(--danger);
}

.status-loading {
  color: var(--muted);
}


/* --------------------------------------------------
   Current / next event
   -------------------------------------------------- */

.now-card {
  padding-bottom: 22px;

  display: flex;

  flex-direction: column;
}

.now-card > .kicker {
  padding:
          24px 24px 0;
}

.current-event,
.next-event {
  padding:
          14px 24px 0;
}

.current-event .event-title {
  font-size:
          clamp(
                  1.8rem,
                  3vw,
                  3.2rem
          );

  line-height: 1;
}

.event-title {
  margin: 0;

  font-weight: 820;

  letter-spacing: -.045em;
}

.event-time-large {
  margin-top: 10px;

  color: var(--accent2);

  font-size: 1.15rem;

  font-weight: 750;
}

.event-location {
  margin-top: 8px;

  color: var(--muted);

  font-size: .9rem;
}

.mini-rule {
  height: 1px;

  min-height: 1px;

  background:
          var(--line);

  margin:
          auto 24px
          18px;
}

.next-event .event-title {
  font-size: 1.2rem;
}


/* --------------------------------------------------
   Calendars
   -------------------------------------------------- */

.calendar-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 20px;
}

.calendar-panel {
  min-height: 430px;

  position: relative;
}


/* --------------------------------------------------
   Event list
   -------------------------------------------------- */

.event-list {
  display: grid;

  gap: 1px;

  border-top:
          1px solid
          var(--line);

  background:
          var(--line);
}
.event-row {
  display: grid;

  grid-template-columns:
    78px
    minmax(0, 1fr)
    auto;

  gap: 16px;

  align-items: center;

  padding:
          17px 24px;

  background:
          linear-gradient(
                  90deg,
                  rgba(24, 78, 145, .38),
                  rgba(10, 37, 78, .24)
          ),
          var(--panel2);

  border-left: 3px solid rgba(92, 163, 235, .75);

  transition:
          background .16s ease,
          border-color .16s ease,
          transform .16s ease;
}

.event-row:hover {
  background:
          linear-gradient(
                  90deg,
                  rgba(31, 93, 172, .48),
                  rgba(13, 45, 92, .32)
          ),
          var(--panel2);

  border-left-color: var(--accent);
}


/* Date badge for normal/public events */

.event-row .event-day {
  border-color: rgba(110, 181, 255, .35);

  background:
          rgba(29, 95, 175, .16);
}

.event-row .event-day span {
  color: #8dc9ff;
}


/* --------------------------------------------------
   Private events
   -------------------------------------------------- */

.event-row.event-private {
  background:
          linear-gradient(
                  90deg,
                  rgba(125, 28, 38, .50),
                  rgba(65, 22, 35, .35)
          ),
          var(--panel2);

  border-left-color: #d95c65;
}

.event-row.event-private:hover {
  background:
          linear-gradient(
                  90deg,
                  rgba(145, 32, 43, .58),
                  rgba(75, 24, 38, .42)
          ),
          var(--panel2);

  border-left-color: #ff7d86;
}

.event-row.event-private .event-day {
  border-color: rgba(255, 130, 140, .38);

  background:
          rgba(170, 45, 55, .18);
}

.event-row.event-private .event-day span {
  color: #ff9da5;
}
.event-row:hover {
  background:
          rgba(15,50,98,.98);
}

.event-day {
  width: 60px;

  text-align: center;

  border:
          1px solid
          rgba(110,181,255,.18);

  border-radius: 14px;

  padding:
          7px 4px;

  background:
          rgba(110,181,255,.06);
}

.event-day strong {
  display: block;

  font-size: 1.35rem;

  line-height: 1.05;
}

.event-day span {
  color: var(--accent);

  font-size: .67rem;

  font-weight: 850;

  letter-spacing: .13em;

  text-transform: uppercase;
}

.event-main {
  min-width: 0;
}

.event-main .event-title {
  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  font-size: 1.25rem;
}

.event-meta {
  margin-top: 5px;

  color: var(--muted);

  font-size: .82rem;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.event-time {
  color: #e4f1ff;

  font-size: .96rem;

  font-weight: 750;

  font-variant-numeric:
          tabular-nums;
}

.empty,
.error {
  padding:
          34px 24px;

  color: var(--muted);

  background:
          var(--panel2);
}

.error {
  color: var(--danger);
}


/* --------------------------------------------------
   Footer
   -------------------------------------------------- */

footer {
  display: flex;

  justify-content: center;

  gap: 10px;

  color: #7793b4;

  font-size: .75rem;

  padding:
          18px 8px 0;
}

.dot {
  opacity: .5;
}


/* --------------------------------------------------
   Tablet
   -------------------------------------------------- */

@media (max-width: 980px) {

  .dashboard {
    width:
            min(
                    calc(100% - 28px),
                    900px
            );

    padding-top: 22px;
  }

  .hero-grid,
  .calendar-grid {
    grid-template-columns:
      1fr;
  }

  .camera-frame {
    aspect-ratio:
            16 / 9;
  }

  .now-card {
    min-height: 260px;
  }
}


/* --------------------------------------------------
   Mobile
   -------------------------------------------------- */

@media (max-width: 620px) {

  .dashboard {
    width:
            calc(100% - 20px);

    padding-top: 14px;
  }

  .topbar {
    flex-direction: column;

    align-items: stretch;

    gap: 14px;

    margin-bottom: 16px;
  }

  .brand {
    gap: 12px;
  }

  .tlklogo {
    width: 58px;
  }

  .brand-mark {
    width: 48px;
    height: 48px;
  }

  h1 {
    font-size:
            clamp(
                    2rem,
                    11vw,
                    3.2rem
            );
  }

  .eyebrow {
    font-size: .62rem;

    letter-spacing: .11em;

    line-height: 1.35;
  }

  .clock-wrap {
    width: 100%;

    display: none;

    align-items: baseline;
    justify-content: space-between;

    gap: 12px;

    padding-top: 0;

    text-align: left;
  }

  .clock {
    font-size: 2rem;

    flex: 0 0 auto;
  }

  .date {
    max-width: none;

    margin-top: 0;

    text-align: right;

    font-size: .8rem;
  }

  .panel-heading {
    padding: 16px;

    gap: 10px;
  }

  .panel-heading h2 {
    min-width: 0;
  }

  .hero-grid {
    gap: 14px;
  }

  .camera-frame {
    aspect-ratio:
            16 / 10;
  }

  .privacy-overlay {
    padding: 14px;

    gap: 5px;
  }

  .privacy-overlay strong {
    font-size:
            clamp(
                    1.05rem,
                    5vw,
                    1.45rem
            );
  }

  .privacy-overlay small {
    font-size:
            clamp(
                    .68rem,
                    3vw,
                    .9rem
            );
  }

  .current-event,
  .next-event {
    padding-left: 18px;
    padding-right: 18px;
  }

  .now-card > .kicker {
    padding-left: 18px;
    padding-right: 18px;
  }

  .mini-rule {
    margin-left: 18px;
    margin-right: 18px;
  }

  .event-row {
    grid-template-columns:
      54px
      minmax(0, 1fr);

    grid-template-rows:
      auto
      auto;

    column-gap: 10px;
    row-gap: 4px;

    padding: 13px 14px;

    align-items: start;
  }

  .event-day {
    width: 52px;

    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .event-main {
    grid-column: 2;
    grid-row: 1;
  }

  .event-time {
    grid-column: 2;
    grid-row: 2;

    margin-top: 0;

    align-self: start;
  }

  .event-title,
  .event-meta {
    white-space: normal;

    overflow: visible;

    text-overflow: unset;

    overflow-wrap: anywhere;
  }

  footer {
    flex-wrap: wrap;

    text-align: center;
  }

  footer .dot,
  footer span:last-child {
    display: none;
  }
}


/* --------------------------------------------------
   Very narrow phones
   -------------------------------------------------- */

@media (max-width: 400px) {

  .dashboard {
    width:
            calc(100% - 12px);
  }

  .panel {
    border-radius: 16px;
  }

  .panel-heading {
    align-items: flex-start;

    flex-direction: column;
  }

  .status,
  .count-pill {
    align-self: flex-start;
  }

  .clock-wrap {
    display: none;
    flex-direction: column;

    align-items: flex-end;

    gap: 3px;
  }

  .date {
    text-align: left;
  }

  .camera-frame {
    aspect-ratio:
            4 / 3;
  }

  .privacy-overlay {
    padding: 10px;
  }

  .privacy-overlay strong {
    font-size: 1.1rem;
  }

  .privacy-overlay small {
    font-size: .7rem;

    line-height: 1.25;
  }

  .privacy-icon {
    font-size: 1.5rem;
  }

  .current-event .event-title {
    font-size: 1.7rem;
  }

  .event-time-large {
    font-size: 1rem;
  }
}

/* --------------------------------------------------
   Eastereggs and stuff
   -------------------------------------------------- */