/* JuFi Analytics' own pages, on top of Lijnennet (jufi-web, loaded first).
   The signed-in screens follow Paper (file "JuFi", page "Design": the
   boards "Analytics — …"); the shell starts below the sign-in pages. The
   sign-in and notice pages and the live bar are JuFi Signal's
   (jufi-signal, crates/signal-web/static/app.css at c03d6b9), with
   `.signal` renamed `.analytics`. */

body.analytics {
  --gutter: 72px;
  /* Wider than the boards (1440): the content stays in their width. */
  --inline: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter)));
  display: flex; flex-direction: column; min-height: 100vh;
}
body.analytics main { flex-grow: 1; max-width: none; margin: 0; padding: 0; }
body.analytics h1 {
  margin: 0; font-size: 80px; line-height: 80px; letter-spacing: -0.04em;
  overflow-wrap: break-word;
}
body.analytics p { margin: 0; }
.analytics .lead { color: var(--text-2); }
.analytics .status { gap: 8px; }
.analytics .status .icon { width: 16px; height: 16px; }

/* Top bar: the logo and the host. */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px var(--inline); border-bottom: 1px solid var(--line);
}
.top .logo { font-size: 26px; }

/* Sign in: what Analytics is on the left, JuFi ID on the right. */
.sign-in {
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 440px);
  column-gap: 96px; row-gap: 48px; align-items: start;
  padding: 112px var(--inline) 144px;
}
.intro { display: flex; flex-direction: column; gap: 20px; }
.intro .lead { max-width: 440px; padding-top: 12px; font-size: 15px; line-height: 22px; }

.step { display: flex; flex-direction: column; gap: 24px; margin: 0; }
.label.rule { padding-bottom: 12px; line-height: 16px; border-bottom: 2px solid var(--ink); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-top: 8px; }
.step .hint { font-size: 13px; line-height: 18px; }
.step .error {
  display: flex; align-items: flex-start; gap: 8px; margin: 0;
  font-size: 14px; line-height: 18px;
}
.step .error .icon { width: 16px; height: 16px; margin-top: 1px; }

/* A page that only tells something: the start page for now, refusals,
   errors and nothing found. */
.notice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  padding: 112px var(--inline) 144px;
}
body.analytics .notice h1 { max-width: 1056px; font-size: 64px; line-height: 66px; }
.notice .lead { max-width: 640px; font-size: 17px; line-height: 26px; }
.notice .actions { padding-top: 12px; }

/* Tablet. */
@media (max-width: 1100px) {
  body.analytics { --gutter: 40px; }
  .sign-in { column-gap: 56px; padding-block: 80px 96px; }
  body.analytics h1 { font-size: 64px; line-height: 64px; }
  .notice { padding-block: 80px 96px; }
  body.analytics .notice h1 { font-size: 56px; line-height: 60px; }
}
/* One column. */
@media (max-width: 900px) {
  .sign-in { grid-template-columns: minmax(0, 560px); padding-block: 64px 80px; }
}
/* Phone, as on JuFi ID's 390 boards. */
@media (max-width: 600px) {
  body.analytics { --gutter: 20px; }
  .top { padding-block: 16px; }
  .top .host { display: none; }
  body.analytics h1 { font-size: 48px; line-height: 50px; }
  .sign-in { row-gap: 28px; padding-block: 40px; }
  .intro { gap: 14px; }
  .notice { gap: 16px; padding-block: 48px 72px; }
  body.analytics .notice h1 { font-size: 40px; line-height: 44px; }
  .notice .lead { font-size: 16px; line-height: 24px; }
}

/* ------------------------------------------------------------------ */
/* The shell of signed-in pages (Paper "Analytics — All sites"): the live
   bar on top, the sidebar, the page. */
.live-bar {
  display: flex; align-items: center; gap: 22px; flex-shrink: 0;
  height: 40px; padding: 0 24px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-label); font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; line-height: 14px; text-transform: uppercase;
  white-space: nowrap; overflow: auto hidden; scrollbar-width: none;
}
.live-chip { flex-shrink: 0; padding: 3px 7px; font-weight: 700; color: var(--ink); background: var(--led-green); }
.live-bar .sep { color: #6e6e6e; }
.live-bar .fact { display: inline-flex; align-items: center; gap: 7px; }

main.page { gap: 48px; }
main.page p { margin: 0; }

/* The page head: a date line, the headline in display type, one
   sentence. */
.home-head { display: flex; flex-direction: column; gap: 14px; max-width: 1040px; }
.home-head h1 { font-size: 80px; line-height: 80px; letter-spacing: -0.045em; overflow-wrap: anywhere; }
.date-line { font-size: 15px; font-weight: 600; line-height: 20px; color: var(--text-2); }
.home-head .sentence {
  max-width: 880px; font-family: var(--font-display); font-size: 28px; font-weight: 800;
  line-height: 38px; letter-spacing: -0.03em;
}

/* Tablet (Paper "Analytics — Site (tablet)"): the sidebar is a row of
   icons under the live bar. */
@media (max-width: 900px) {
  .sidebar { gap: 4px; padding: 10px 40px; }
  .sidebar .logo { margin-right: 8px; }
  .sidebar .lockup { font-size: 20px; }
  .sidebar .lockup-service { display: none; }
  .sidebar .lockup-jufi { width: 44px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; }
  .nav { gap: 4px; }
  .nav a { min-width: 44px; height: 44px; justify-content: center; gap: 5px; padding: 0 10px; }
  .nav a .icon { width: 20px; height: 20px; }
  .nav a .name {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  main.page { gap: 44px; padding: 32px 40px 40px; }
  .home-head { gap: 10px; }
  .home-head h1 { font-size: 64px; line-height: 64px; letter-spacing: -0.04em; }
  .home-head .sentence { font-size: 21px; line-height: 30px; letter-spacing: -0.02em; }
}

/* Phone (Paper "Analytics — Site (phone)"). */
@media (max-width: 600px) {
  .sidebar { padding: 10px 16px; }
  main.page { gap: 36px; padding: 22px 20px 40px; }
  .home-head h1 { font-size: 44px; line-height: 44px; }
  .home-head .sentence { font-size: 19px; line-height: 26px; }
}