/*
 * "Terminal" — a code-editor resume: dark editor chrome, a monospace for
 * everything structural, and syntax-highlight accents.
 *
 * Full bleed, so it ships zero page margins. The editor ground and its faint
 * grid live on `html`, which propagates to the page canvas and repeats on
 * every printed page.
 *
 * The monospace is the self-hosted JetBrains Mono in public/fonts, pulled in
 * by absolute URL because the preview and the PDF are both served over HTTP.
 */

@import url("/fonts/jetbrains-mono.css");

@font-face { font-family: "ClearSans"; src: url("fonts/ClearSans-Regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "ClearSans"; src: url("fonts/ClearSans-Medium.ttf")  format("truetype"); font-weight: 500; }
@font-face { font-family: "ClearSans"; src: url("fonts/ClearSans-Bold.ttf")    format("truetype"); font-weight: 700; }
@font-face { font-family: "Spartan";   src: url("fonts/LeagueSpartan-Bold.otf") format("opentype"); font-weight: 700; }

:root {
  /* Overridden per person + template by the injected font choice. */
  --font-body: "ClearSans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Spartan", "ClearSans", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --bg: #0d1117;
  --panel: #161b22;
  --line: #26303c;
  --ink: #e6edf3;
  --dim: #9198a1;
  --comment: #7d8590;
  --green: #7ee787;
  --blue: #79c0ff;
  --orange: #ffa657;
  --purple: #d2a8ff;
  --pink: #ff7b72;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,.022) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.022) 0 1px, transparent 1px 64px),
    var(--bg);
  background-color: var(--bg);
}

body {
  width: 816px;
  padding: 0 0 34px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11.7px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- editor chrome ----------------------------------------------- */
.chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--comment);
}
.chrome i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.chrome .r { background: #ff5f57; }
.chrome .y { background: #febc2e; }
.chrome .g { background: #28c840; }
.chrome b { margin-left: 8px; font-weight: 400; color: var(--dim); }

.wrap { padding: 26px 34px 0; }

/* ---------- header ------------------------------------------------------ */
.head { display: grid; grid-template-columns: 1fr 92px; gap: 22px; align-items: start; margin-bottom: 22px; }
.head img {
  width: 92px; height: 92px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.prompt { font-family: var(--mono); font-size: 11px; color: var(--comment); margin-bottom: 7px; }
.prompt em { font-style: normal; color: var(--green); }
.prompt s { text-decoration: none; color: var(--blue); }
h1 {
  font-family: var(--font-display);
  font-size: 33px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.05;
  margin-bottom: 5px;
}
.role { font-family: var(--mono); font-size: 12px; color: var(--orange); margin-bottom: 11px; }
.facts { display: flex; flex-wrap: wrap; gap: 5px 6px; font-family: var(--mono); }
.facts span, .facts a {
  font-size: 10.2px;
  color: var(--dim);
  text-decoration: none;
  padding: 3px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.facts a { color: var(--blue); }

/* ---------- layout ------------------------------------------------------ */
.cols { display: grid; grid-template-columns: 1fr 244px; gap: 22px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 19px; }

h2 {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--comment);
  margin-bottom: 11px;
}
h2::before { content: "// "; color: var(--line); }
h2 em { font-style: normal; color: var(--purple); }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.bio { font-size: 12.1px; color: #c3cbd4; }

/* ---------- entries ----------------------------------------------------- */
/* Long lists flow across pages; a single entry never splits. */
.entry { break-inside: avoid; page-break-inside: avoid; }
.entry + .entry { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.entry .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.entry .name { font-family: var(--mono); font-weight: 700; font-size: 12.2px; color: var(--blue); }
.entry .at { font-family: var(--mono); font-size: 10.8px; color: var(--green); }
.entry .when { flex: none; font-family: var(--mono); font-size: 10.2px; color: var(--comment); }
.entry .when::before { content: "// "; }
.entry p { margin-top: 5px; color: #b8c1cb; font-size: 11.5px; }
.entry a { font-family: var(--mono); color: var(--blue); text-decoration: none; font-size: 10.6px; }

/* ---------- rail -------------------------------------------------------- */
.rows { display: flex; flex-direction: column; gap: 8px; }
.row .lbl {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 10.8px; margin-bottom: 4px;
}
.row .lbl b { font-weight: 500; color: var(--ink); }
.row .lbl span { color: var(--orange); font-size: 10px; }
.meter { height: 3px; background: #21262d; border-radius: 2px; overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--blue)); }

.tags { display: flex; flex-wrap: wrap; gap: 4px; font-family: var(--mono); }
.tag {
  padding: 2.5px 7px;
  font-size: 10px;
  color: #b8c1cb;
  background: #1b222b;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.group + .group { margin-top: 10px; }
.group h3 { font-family: var(--mono); font-size: 10px; color: var(--pink); margin-bottom: 4px; }
.group h3::before { content: "const "; color: var(--comment); }
.group p { font-size: 11px; color: var(--dim); }

.note { font-family: var(--mono); font-size: 10.8px; color: var(--comment); }
.note b { color: var(--green); font-weight: 500; }
/* ---------- pagination ----------
 * `.entry` above already keeps one job or project whole. These two finish the
 * job: a heading is never left at the foot of a page with its content overleaf,
 * and a paragraph never leaves one or two lines stranded either side of a break.
 */
h1,
h2,
h3,
h4 {
  break-after: avoid;
  page-break-after: avoid;
}

p,
li {
  orphans: 3;
  widows: 3;
}