/*
 * Scout branding, shared by the admin and the leader-facing screens.
 *
 * Every colour here is a custom property set per organisation in the page head (see
 * kit/branding.py). Nothing in this file hardcodes a hex value, which is what lets a
 * district run navy and a group run teal from the same stylesheet.
 */

/* Nunito Sans, variable weight 200-900, SIL Open Font License 1.1. Served from our
   own domain rather than a font CDN: it is 31KB, it never changes, and a third-party
   request on every page view is a dependency and a privacy question we do not need. */
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-variable.e010923d59d4.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-body: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius-card: 12px;
  --radius-chip: 100px;
}

/* ---------------------------------------------------------------- the lockup
 *
 * Proportions measured from the official artwork, not eyeballed: at the same cap
 * height the name sits 24/612 of the logo's height below it, left-aligned with the
 * "S" of Scouts. The one number a caller sets is --lockup-height.
 */
.scout-lockup {
  --lockup-height: 34px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--lockup-height) * 0.039);
  line-height: 1;
  text-decoration: none;
}

.scout-lockup svg,
.scout-lockup img {
  height: var(--lockup-height);
  width: auto;
  display: block;
}

/* The inlined logo takes its colour from here, which is why there is one file
   rather than a white one and a purple one drifting apart. */
.scout-lockup svg {
  color: var(--lockup-ink, var(--on-brand));
}

.scout-lockup .lockup-name {
  /* Cap height is 0.2059 of the logo height; Nunito Sans' cap height is 0.7075em,
     so the font size that lands on it is height x 0.2059 / 0.7075.
     Floored at 13px: the measured ratio is faithful to the artwork, but the artwork
     is sized for a letterhead, and below about 45px of logo it puts the group's name
     under 12px, where it stops being readable on a phone. Legibility wins over a
     ratio, and the ratio still governs every size above that. */
  font-family: var(--font-body);
  font-size: max(13px, calc(var(--lockup-height) * 0.291));
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--lockup-ink, var(--on-brand));
  white-space: nowrap;
}

/* Artwork an organisation uploaded already contains its own name, so it is shown at
   a larger height and nothing is drawn under it. */
.scout-lockup--artwork img {
  height: calc(var(--lockup-height) * 1.45);
}

/* ------------------------------------------------------------------- status */

.status-chip {
  display: inline-block;
  padding: 0.15em 0.7em;
  border-radius: var(--radius-chip);
  font-weight: 700;
  font-size: 0.85em;
  white-space: nowrap;
}

.status-badly-overdue {
  background: var(--overdue-fill);
  color: #fff;
}
.status-overdue,
.status-due-today {
  background: var(--overdue-fill);
  color: #fff;
}
.status-coming-up {
  /* Yellow carries dark text. White on Scout Yellow is unreadable, and the brand
     guideline uses it as a wash rather than a fill behind white type. */
  background: var(--due-soon);
  color: var(--text);
}
.status-fine {
  background: var(--ok-fill);
  color: #fff;
}
.status-no-date {
  background: var(--border);
  color: var(--text);
}

/* Asset status, as printed in search results. Same fills as urgency, same meaning:
   green is usable, red needs someone, grey is no longer ours to lend. */
.status-available,
.status-inservice {
  background: var(--ok-fill);
  color: #fff;
}
.status-checkedout {
  background: var(--info-fill);
  color: #fff;
}
.status-undermaintenance {
  background: var(--due-soon);
  color: var(--text);
}
.status-missing {
  background: var(--overdue-fill);
  color: #fff;
}
.status-disposed,
.status-donated,
.status-sold,
.status-decommissioned {
  background: var(--border);
  color: var(--text);
}