/* CPW Analytics launcher.
   Palette matches cpw_custom_styles.css so this page and the Shiny apps agree. */

:root {
  --midnight:  #07234C;
  --sky:       #0D67B8;
  --emerald:   #055A53;
  --sunshine:  #EAB11E;
  --terracotta:#AA5F40;
  --ink:       #333;
  --line:      #e3e6ea;
  --wash:      #FAFAFA;

  --sans:  'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--wash);
  -webkit-font-smoothing: antialiased;
}

/* --- Header --- */
header {
  background: linear-gradient(to right, var(--midnight), var(--emerald));
  border-bottom: 3px solid var(--sunshine);
  padding-top: env(safe-area-inset-top);
}
.bar {
  max-width: 1000px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* The seal and the title are one link home. Flex, with the bar's own gap, so
   wrapping two existing children in an anchor changes nothing about the
   header's layout -- .bar-actions still gets pushed right by its margin. */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.brand:hover, .brand:focus { text-decoration: none; }
.seal { width: 52px; height: 52px; flex: none; }
h1 {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: #fff;
  margin: 0;
  line-height: 1.15;
}
.org {
  margin: 2px 0 0;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.bar-actions {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.account { display: flex; align-items: center; gap: 8px; }
.acct-name {
  color: rgba(255,255,255,.75);
  font-size: .78rem;
  white-space: nowrap;
  margin-right: 2px;
}
.acct-btn {
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 6px;
  white-space: nowrap;
}
.acct-btn:hover { background: rgba(255,255,255,.14); }
.acct-primary { border-color: rgba(255,255,255,.6); }

/* --- Offline banner --- */
.offline {
  background: #fff8e3;
  border-bottom: 1px solid var(--sunshine);
  color: #5c4508;
  font-size: 0.85rem;
  padding: 10px 20px;
  text-align: center;
}

/* --- Tiles --- */
main { max-width: 1000px; margin: 0 auto; padding: 28px 20px 48px; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.tile {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--sky);
  border-radius: 10px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tile:hover, .tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(7,35,76,.12);
  outline: none;
}
.tile.public { border-top-color: var(--emerald); }

/* Tiles are created by app.js once /whoami answers, so there is nothing to
   hide here any more -- an empty grid renders as nothing at all, which is what
   a slow connection should look like. */
.tile-external .name { display: flex; align-items: baseline; gap: 6px; }
.ext-arrow { font-size: .8em; color: #6b7280; }

.empty-note {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  color: #6b7280;
  font-size: .92rem;
}

.name {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--midnight);
}
.blurb {
  display: block;
  margin-top: 6px;
  font-size: .87rem;
  color: #6b7280;
  line-height: 1.45;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.tag {
  display: inline-block;
  background: #e7f2e9;
  color: var(--emerald);
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: 999px;
}

footer {
  border-top: 1px solid var(--line);
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: .78rem;
  color: #8b9099;
}

@media (max-width: 480px) {
  .bar { padding: 14px 16px; }
  h1 { font-size: 1.15rem; }
  main { padding: 20px 16px 40px; }
}

/* Badge colours lifted from the portal's stylesheet on purpose: the same app
   shows the same pill on both front pages, and "Requires VPN" in particular
   has to look identical wherever somebody meets it. */
.badge-vpn     { background: #fff4e0; color: #8a5a00; }
.badge-novpn   { background: #e7f2e9; color: var(--emerald); }
.badge-desktop { background: #eef0f4; color: #4a5261; }
.badge-offline { background: #e7f2e9; color: var(--emerald); }
.badge-mobile  { background: #e6effa; color: var(--sky); }
.badge-beta    { background: #f3e8fb; color: #6b3f8f; }