/*
  Build Bros Alerts, app.css

  Colours are the build-bros.co.uk brand tokens (--color-bb-* in the site's
  stylesheet), so the app reads as part of the same business. Dark only: the
  site has no light theme, and a black app opened at night does not light up
  the room.

  System fonts rather than the site's Inter: the page's Content Security Policy
  allows nothing from another origin, and on an iPhone San Francisco is
  already the closest match.
*/
:root {
  --bb-bg: #121212;
  --bb-surface: #1a1a1a;
  --bb-surface-2: #232323;
  --bb-line: #2c2c2c;
  --bb-blue: #1b7fe5;
  --bb-accent: #3d93ef;
  --bb-accent-hover: #7cbaf7;
  --bb-text: #f2f2f2;
  --bb-muted: #9a9a9a;
  --bb-danger: #ff6b6b;
  --bb-warn: #f2b84b;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bb-bg);
  color: var(--bb-text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* The hidden attribute must win over the display rules below, or a screen
   meant to be hidden would show through. */
[hidden] { display: none !important; }

/* Safe-area padding keeps content clear of the notch and the home bar when
   the app runs full screen from the Home Screen. */
.screen {
  min-height: 100vh;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right))
           env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left));
}

/* ---- splash ---- */
.splash { display: grid; place-items: center; }
.splash-logo { width: 140px; height: auto; opacity: .9; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

/* ---- sign in ---- */
.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.login-logo { width: 180px; height: auto; margin-bottom: 4px; }
.login h1 {
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--bb-muted);
}
#login-form { width: 100%; max-width: 360px; display: flex; flex-direction: column; }
label { font-size: 14px; color: var(--bb-muted); margin: 12px 0 6px; }
input {
  width: 100%;
  /* 16px or larger stops iOS zooming the page when a field is focused */
  font-size: 17px;
  padding: 13px 14px;
  color: var(--bb-text);
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: 10px;
  outline: none;
}
input:focus { border-color: var(--bb-accent); box-shadow: 0 0 0 3px rgba(61, 147, 239, .25); }

button { font: inherit; cursor: pointer; }
.primary {
  margin-top: 20px;
  padding: 14px;
  width: 100%;
  font-weight: 600;
  color: #fff;
  background: var(--bb-blue);
  border: 0;
  border-radius: 10px;
}
.primary:active { background: var(--bb-accent); }
.primary:disabled { opacity: .6; }
.link { background: none; border: 0; color: var(--bb-accent); padding: 8px 0 8px 12px; }

.error { color: var(--bb-danger); font-size: 14px; margin: 12px 0 0; }

/* ---- alerts ---- */
.bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 -16px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  margin-top: calc(-1 * env(safe-area-inset-top));
  background: rgba(18, 18, 18, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bb-line);
}
.bar-icon { border-radius: 8px; }
.bar-title { font-weight: 700; font-size: 19px; flex: 1; }
.live { font-size: 12px; color: var(--bb-muted); }
.live.on { color: var(--bb-accent); }
.live.on::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--bb-accent); vertical-align: 1px; }

.notice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 14px 0 0;
  padding: 14px;
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-left: 3px solid var(--bb-blue);
  border-radius: 10px;
  font-size: 15px;
}
.notice span { color: var(--bb-muted); }
.notice .primary { margin-top: 10px; }
.notice.warn { border-left-color: var(--bb-warn); }

.filters { display: flex; gap: 8px; margin: 16px 0 8px; }
.chip {
  padding: 7px 14px;
  font-size: 14px;
  color: var(--bb-muted);
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: 999px;
}
.chip.on { color: #fff; background: var(--bb-blue); border-color: var(--bb-blue); }

.list { list-style: none; margin: 0; padding: 0 0 24px; }
.day { margin: 18px 0 6px; font-size: 13px; font-weight: 600; color: var(--bb-muted); text-transform: uppercase; letter-spacing: .06em; }

.item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: start;
  width: 100%;
  margin: 0 0 8px;
  padding: 12px;
  text-align: left;
  color: inherit;
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: 12px;
}
.item:active { background: var(--bb-surface-2); }
.item.new { border-color: var(--bb-blue); }
/* The alert a tapped notification was about */
.item.focus { border-color: var(--bb-accent); box-shadow: 0 0 0 2px var(--bb-accent); background: var(--bb-surface-2); }
.icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(27, 127, 229, .15);
  color: var(--bb-accent);
}
.icon svg { width: 20px; height: 20px; }
.icon.call { background: rgba(255, 107, 107, .14); color: var(--bb-danger); }
.title { font-weight: 600; overflow-wrap: anywhere; }
.body { margin-top: 2px; color: var(--bb-muted); font-size: 15px; white-space: pre-line; overflow-wrap: anywhere; }
.time { font-size: 13px; color: var(--bb-muted); white-space: nowrap; }

.empty { margin: 40px 0; text-align: center; color: var(--bb-muted); }
.footer { margin: 0 0 24px; text-align: center; font-size: 12px; color: #5c5c5c; }