/* SiteCom Utilities — shared stylesheet for the landing page and /internal.
   Brand: Falkor employee playbook (May 2026). Palette p.50, typography
   p.52-55, logo p.42-48. Button behaviour follows falkor.com: square, white
   at rest, Primary Green on hover, Brand Black text throughout.
   tests/brand.test.js guards these choices. */

:root {
  /* Falkor palette, p.50 */
  --ink: #1E1E1E;       /* Brand Black — headings and text on light backgrounds */
  --accent: #D5FF5F;    /* Primary Green — sparingly: hover and key accents */
  --bg: #F7F7F7;        /* Grey 100 — page background */
  --surface: #FFFFFF;   /* Brand White — cards, masthead, buttons at rest */
  --border: #ABABAB;    /* Grey 300 */
  --muted: #595959;     /* Grey 600 — 7.0:1 on white keeps secondary text at AAA */
  /* Functional state colour, not part of the brand palette */
  --error: #da3a2f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* FK Grotesk is the brand face; Roboto Flex is the sanctioned web fallback
     (p.54) and what we load until the FK Grotesk webfont is licensed.
     Regular is the default weight for titles, body and small text (p.52). */
  font-family: 'Roboto Flex', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
}

.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.masthead-link {
  white-space: nowrap;
  font-size: 14px;
}

.masthead .brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Positive (black) logo on a light background, p.45. 28px clears the 24px
   minimum, p.46; the gap and rule give it clearspace from the site name. */
.masthead .brand img {
  display: block;
  height: 28px;
  width: auto;
}

.masthead .brand .site {
  padding-left: 14px;
  border-left: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.02em;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* Square corners throughout — falkor.com uses no border radius. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

h1 {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 8px 0 4px;
}

.tagline { color: var(--muted); }
.card .tagline { margin: 0 0 24px; }

/* Buttons: white at rest, Primary Green on hover, Brand Black text in both
   states (white on green is 1.15:1). The border carries the hierarchy —
   Brand Black for the primary action, Grey 300 for secondary. */
.btn {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--accent);
  border-color: var(--ink);
  outline: none;
}

.btn-primary { border-color: var(--ink); }
.btn-ghost { border-color: var(--border); }

.links {
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
}

.fineprint {
  color: var(--muted);
  font-size: 12px;
  margin-top: 20px;
}

.rows { list-style: none; margin: 0; padding: 0; }

.row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  margin-bottom: 10px;
  background: var(--surface);
}

.row .row-text { flex: 1; }
.row .row-actions { display: flex; align-items: center; gap: 18px; }
.row .row-title { font-size: 17px; }
.row .row-desc { color: var(--muted); font-size: 14px; }

@media (max-width: 37.5em) {
  .page { padding: 20px 16px 48px; }
  .card { padding: 20px; }
  h1 { font-size: 23px; }
  .masthead .brand .site { display: none; }
  .row { flex-direction: column; align-items: flex-start; }
}