/* Lijnennet, the style of the JuFi suite (jufi-send docs/dashboard-stijl.md;
   Paper file "JuFi", page "Design"). Shared through jufi-web: every app
   loads this first and its own app.css after it. Only what two or more
   apps use belongs here. Foundations: colour and type. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/static/jufi/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Overpass";
  src: url("/static/jufi/fonts/overpass.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Overpass Mono";
  src: url("/static/jufi/fonts/overpass-mono.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/static/jufi/fonts/martian-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Colour: one meaning per colour. */
  --ink: #121212;           /* text, rules, boards, the live bar */
  --text-2: #4f4f4b;        /* secondary text (8.2:1) */
  --line: #dadad6;          /* hairlines between rows */
  --surface: #f2f2ef;       /* value fields, the active row */
  --paper: #ffffff;
  --cobalt: #1f3fd1;        /* the line, primary actions, links */
  --cobalt-tint: #eef1fd;   /* explanations next to a value */
  --highlighter: #ffe800;   /* what you have to do now; with ink only */
  --highlighter-tint: #fff9c4; /* a row that asks for it */
  --red: #c8321b;           /* fails or blocked (5.4:1) */
  --green: #137a47;         /* in order (5.5:1) */
  --led-green: #46d483;     /* LED colours: only on ink */
  --led-amber: #ffb020;
  --led-red: #ff6b57;
  --riso-pink: #ff48b0;     /* accent only */
  --riso-blue: #0078bf;
  --ink-line: #2c2c2c;      /* hairlines on ink */
  --ink-text-2: #a6a6a6;    /* labels and quiet words on ink */
  --ink-text: #d6d6d6;      /* values on ink */
  --pass-tint: #8fc4a6;     /* a passed round in a strip */
  --open-line: #b5b5b0;     /* a round still running */

  /* Type: one family per job. */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-ui: "Overpass", system-ui, sans-serif;
  --font-mono: "Overpass Mono", ui-monospace, monospace;
  --font-label: "Martian Mono", ui-monospace, monospace;

  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  margin: 0;
}
h1 { font-size: 34px; line-height: 42px; letter-spacing: -0.03em; }
h2 { font-size: 28px; line-height: 34px; letter-spacing: -0.03em; }
h3 { font-size: 17px; line-height: 22px; }

code, .value { font-family: var(--font-mono); font-size: 14px; }
.value.muted { font-size: 12px; }
.label {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.muted, .hint { color: var(--text-2); }
a { color: var(--cobalt); }

label { display: block; margin: 0 0 16px; font-weight: 700; }
input[type=email], input[type=password], input[type=text], input[type=number], select {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  font-family: inherit; font-weight: 400; color: inherit; background: var(--surface);
  border: 1px solid var(--line); border-radius: 0;
}
/* Inputs are always 16px: smaller makes phones zoom in on focus. */
input, select, textarea, input[type=email], input[type=password], input[type=text], input[type=number] {
  font-size: 16px; line-height: 22px;
}
.error { color: var(--red); font-weight: 700; margin: 0 0 16px; }
table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
th {
  font-family: var(--font-label); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2);
}

/* Actions & status (Paper "Design", Components — Actions & status). */
.icon {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10.5px 16px;
  font-family: var(--font-ui); font-size: 15px; font-weight: 700; line-height: 18px;
  color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 0; box-shadow: none;
  text-decoration: none; cursor: pointer;
}
.button.primary {
  padding: 12px 18px;
  color: var(--paper); background: var(--cobalt); border: 0;
  box-shadow: 4px 4px 0 var(--riso-pink);
}
.button.now { background: var(--highlighter); }
.button.compact, .button.now { gap: 7px; padding: 8px 12px; font-size: 14px; }
.button:focus-visible, a:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.button.primary:focus-visible { outline-color: var(--ink); }
a.more { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--cobalt); text-decoration: none; }
a.more .icon { width: 14px; height: 14px; }

.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 14px; line-height: 18px;
}
.status .icon { width: 15px; height: 15px; }
.status.ok { color: var(--green); }
.status.fail { color: var(--red); }
.status.wait { color: var(--ink); }
.status.none { color: var(--text-2); font-weight: 500; }



/* Shell (Paper "Design", Components — Shell). */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
body.app { display: flex; flex-direction: column; min-height: 100vh; }

.frame { display: flex; flex-grow: 1; }
.sidebar {
  width: 248px; flex-shrink: 0; display: flex; flex-direction: column; gap: 28px;
  padding: 24px 16px; border-right: 1px solid var(--line);
}
.logo {
  display: flex; align-items: center; gap: 10px; padding: 0 8px;
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 26px; color: var(--ink); text-decoration: none;
  text-shadow: 2px 2px 0 var(--riso-pink);
}
.logo .mark {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  color: var(--paper); background: var(--cobalt);
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px;
  font-size: 15px; font-weight: 600; line-height: 18px; color: var(--ink); text-decoration: none;
}
.nav a .icon { width: 18px; height: 18px; stroke-width: 1.8; }
.nav a .name { flex-grow: 1; }
.nav a:hover { background: var(--surface); }
.nav a.active { font-weight: 800; background: var(--highlighter); }
.user {
  margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 0 10px; font-size: 13px; line-height: 16px;
}
.user strong { font-size: 14px; line-height: 18px; }

main.page {
  flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 40px;
  padding: 28px 48px 64px;
}

/* Page parts (Paper "Design", Components — Page parts). */
.page-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.page-head .date-line { font-size: 14px; font-weight: 600; line-height: 18px; color: var(--text-2); }
.page-head .headline { display: flex; align-items: baseline; gap: 16px; }
.page-head .sentence {
  margin: 4px 0 0; font-family: var(--font-display); font-size: 26px; font-weight: 700;
  line-height: 34px; letter-spacing: -0.02em;
}
.headline.title { font-size: 56px; line-height: 60px; letter-spacing: -0.04em; overflow-wrap: anywhere; }
mark, a.mark {
  color: var(--ink); background: var(--highlighter); padding: 0 8px; text-decoration: none;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.tag { display: inline-block; color: var(--ink); border: 1.5px solid var(--ink); }
.tag.now { padding: 6px 10px; font-size: 14px; font-weight: 700; background: var(--highlighter); }
.tag.small {
  padding: 1px 6px; font-family: var(--font-label); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; border-width: 1px;
}
.tag.small.live { color: var(--paper); background: var(--ink); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding-bottom: 14px; border-bottom: 2px solid var(--ink);
}
.caption { font-size: 14px; line-height: 18px; color: var(--text-2); }
.section-head h2 { flex-shrink: 0; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { border-bottom: 1px solid var(--line); }

.field { padding: 9px 12px; background: var(--surface); font-size: 13.5px; line-height: 18px; overflow-wrap: anywhere; }
.select { user-select: all; cursor: text; }
.table-scroll { overflow-x: auto; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.filters label { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.filters label.grow { flex: 1 1 260px; }
.filters input, .filters select { margin-top: 0; }
.filters .button { padding-block: 11px; }

/* A new secret, shown once. */
.secret {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 24px;
  background: var(--highlighter); border: 2px solid var(--ink);
}
.secret h2 { font-size: 22px; line-height: 28px; }
.secret p { margin: 0; }
.secret .field { background: var(--paper); font-size: 15px; }

/* Who did something: an icon for the kind of actor and the name. */
.who { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.who .icon { width: 15px; height: 15px; }
/* What an agent can never do. */
.never { margin-top: 24px; padding-top: 16px; border-top: 2px solid var(--ink); }
.never ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.never li { display: flex; align-items: center; gap: 10px; }
.never .icon { width: 15px; height: 15px; }

/* Suite bar (jufi-web, jufi docs/suitebalk.md): the suite at the foot of
   every page, on ink like Send's live bar. Fixed, so the page keeps room
   for it, plus the home indicator of phones. */
:root { --suite-bar: 40px; }
body { padding-bottom: calc(var(--suite-bar) + env(safe-area-inset-bottom)); }
.suite-bar {
  position: fixed; inset: auto 0 0; z-index: 10;
  display: flex; align-items: center; gap: 22px;
  height: calc(var(--suite-bar) + env(safe-area-inset-bottom));
  padding: 0 24px env(safe-area-inset-bottom);
  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;
}
.suite-bar a { color: inherit; text-decoration: none; }
.suite-bar a:focus-visible, .suite-bar button:focus-visible { outline: 2px solid var(--highlighter); outline-offset: 2px; }
.suite-bar .icon { width: 14px; height: 14px; stroke-width: 2; }
.suite-home {
  font-family: var(--font-display); font-size: 17px; font-weight: 800; line-height: 20px;
  letter-spacing: -0.03em; text-transform: none; text-shadow: 2px 2px 0 var(--riso-pink);
}
.suite-apps {
  display: flex; align-items: center; gap: 4px; margin: 0; padding: 0 0 0 22px;
  list-style: none; border-left: 1px solid var(--ink-line);
}
.suite-apps a, .suite-person button {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 8px; color: var(--ink-text);
}
.suite-apps a:hover { color: var(--paper); background: var(--ink-line); }
.suite-apps a[aria-current] { font-weight: 700; color: var(--ink); background: var(--highlighter); }
.suite-person { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.suite-person .who { gap: 8px; font-weight: 500; color: var(--paper); }
.suite-person .initial {
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: 0;
  color: var(--paper); background: var(--cobalt);
}
/* The LED says the session runs through JuFi ID. */
.suite-person .via { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-text-2); }
.suite-person .via::before { content: ""; width: 7px; height: 7px; background: var(--led-green); }
.suite-person.out .via::before { background: var(--ink-text-2); }
.suite-person form { margin: 0; }
.suite-person button {
  font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
  background: none; border: 1px solid var(--ink-line);
}
.suite-person button:hover { color: var(--paper); border-color: var(--ink-text-2); }
.suite-person a.sign-in {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 8px;
  font-weight: 700; color: var(--ink); background: var(--highlighter);
}

/* Micro-interactions: quick, square, never in the way. */
.button, .nav a, a.more .icon, .rows > li, tbody tr, a.mark,
.suite-apps a, .suite-person button {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.button:hover { background: var(--surface); }
.button.now:hover { background: var(--highlighter); box-shadow: 3px 3px 0 var(--ink); transform: translate(-1px, -1px); }
.button.primary:hover { background: var(--cobalt); box-shadow: 6px 6px 0 var(--riso-pink); transform: translate(-2px, -2px); }
.button:active, .button.primary:active, .button.now:active { box-shadow: none; transform: translate(2px, 2px); }
.button.primary:active { box-shadow: 2px 2px 0 var(--riso-pink); }
a.more:hover .icon { transform: translateX(3px); }
a.mark:hover { box-shadow: 0 3px 0 var(--ink); }
.nav a:active { transform: translateY(1px); }
.button .icon { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Responsive: tablet and phone. */
@media (max-width: 900px) {
  .frame { flex-direction: column; }
  .sidebar {
    width: auto; flex-direction: row; align-items: center; gap: 16px;
    padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }
  .logo { flex-shrink: 0; padding: 0; }
  .nav { flex-direction: row; }
  .nav a { white-space: nowrap; }
  .user { margin: 0 0 0 auto; flex-shrink: 0; align-items: flex-end; padding: 0; }
  .user .muted { display: none; }
  main.page { padding: 24px 20px 48px; gap: 32px; }
}
@media (max-width: 600px) {
  .sidebar .logo { font-size: 0; gap: 0; }
  .sidebar { gap: 8px; }
  /* Icons only; the names stay for screen readers. */
  .nav a { gap: 6px; padding: 9px; }
  .nav a .name, .suite-bar .name {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .user strong { display: none; }
  .page-head .sentence { font-size: 20px; line-height: 27px; }
  .headline.title { font-size: 34px; line-height: 38px; }
  .section-head { flex-direction: column; gap: 4px; }
  .filters { gap: 12px; }
  .filters label { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .filters label.grow { flex-basis: 100%; }
  .filters select { width: 100%; }
  .filters .button { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .suite-bar { gap: 12px; padding-inline: 12px; }
  .suite-apps { padding-left: 12px; }
  .suite-apps a, .suite-person button, .suite-person a.sign-in { padding: 6px; }
}