/* barerepo. one stylesheet, no build step, every value lifted from the mockups in plans/. */

@font-face {
  font-family: "Space Mono";
  src: url("/static/fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("/static/fonts/SpaceMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-mono: "Space Mono", monospace;
  --surface-2: #ffffff;
  --surface-1: #f7f7f7;
  --text-primary: #000000;
  --text-secondary: #555555;
  --text-muted: #888888;
  --border: #dddddd;
  --border-strong: #999999;
  --radius: 0;
  --text-danger: #a32d2d;
  --text-success: #2f6b0f;
  --bg-danger: #fbe3e3;
  --bg-success: #e6f2d9;
}

html { height: 100%; }
body {
  margin: 0;
  padding: 12px;
  box-sizing: border-box;
  min-height: 100vh;
  background: var(--surface-2);
  color: var(--text-primary);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* the card. every page is one of these, and nothing sits outside it. */
.card {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  min-height: calc(100vh - 26px);
  display: flex;
  flex-direction: column;
}

/* links are underlined and keep the colour around them. there is no link blue in this design. */
a {
  color: inherit;
  text-decoration: underline;
  /* measured off a Space Mono H: a regular stem is 0.085em, a bold one 0.15em */
  text-decoration-thickness: 0.085em;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
}

/* bold only happens in rendered markdown, and the rule under it follows the stem it belongs to */
strong a, a strong, b a, a b,
.body h1 a, .body h2 a, .body h3 a, .body h4 a {
  text-decoration-thickness: 0.15em;
}
a:hover { color: var(--text-primary); }

/* bars: the top bar, the breadcrumb, the tab strip. all 9px 18px. */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 18px;
  border-bottom: 0.5px solid var(--border);
}
.bar .left, .bar .right { display: flex; gap: 20px; align-items: center; }
.bar .right { gap: 16px; color: var(--text-secondary); }
.brand { letter-spacing: -0.5px; }
.searchbox {
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 3px 10px;
  color: var(--text-muted);
}

.tabs {
  display: flex;
  gap: 22px;
  padding: 8px 18px;
  border-bottom: 0.5px solid var(--border);
  color: var(--text-secondary);
  font-size: 16px;
}
.tabs .on {
  color: var(--text-primary);
  border-bottom: 1.5px solid var(--text-primary);
  padding-bottom: 4px;
  text-decoration: none;
}
.tabs .end { margin-left: auto; color: var(--text-muted); }

/* rows: one record each, separated by a hairline. */
.row { padding: 12px 18px; border-bottom: 0.5px solid var(--border); }
.row.tall { padding: 13px 18px; }
.row.dim { color: var(--text-muted); }
.between { display: flex; justify-content: space-between; gap: 16px; }
.sub { color: var(--text-muted); font-size: 16px; }
.stack { line-height: 1.9; }

.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.danger { color: var(--text-danger); }
.success { color: var(--text-success); }
.small { font-size: 16px; }
.strike { text-decoration: line-through; }

/* a command. everything the interface can do is shown as one of these. */
.box {
  background: var(--surface-1);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text-secondary);
  font-size: 16px;
  word-break: break-all;
  white-space: pre-wrap;
  margin: 0;
  font-family: inherit;
}
.box.tall { padding: 11px 13px; line-height: 1.9; }

/* forms. one border weight up from the page, so a field reads as a field. */
.field { margin-bottom: 16px; }
.label { color: var(--text-muted); font-size: 16px; margin-bottom: 5px; }
.hint { color: var(--text-muted); font-size: 16px; margin-top: 4px; }
/* one webhook and what became of it, on the config page. */
.hook { margin-top: 9px; line-height: 1.7; }
input.text, textarea.text, select.text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 0.5px solid var(--border-strong);
  border-radius: 8px;
  padding: 7px 11px;
  word-break: break-all;
}
textarea.text { min-height: 80px; resize: vertical; word-break: normal; }
input.text::placeholder, textarea.text::placeholder { color: var(--text-muted); }
input.text:focus, textarea.text:focus, select.text:focus {
  outline: 1px solid var(--text-primary);
  outline-offset: -1px;
}

/* The browser draws the arrow, or the control reads as a text box that refuses text. */
select.text { appearance: auto; padding: 6px 11px; }

button.btn, .btn {
  font: inherit;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 0.5px solid var(--text-primary);
  border-radius: 8px;
  padding: 7px 16px;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

/* diffs. the log page is mostly this. */
.diff {
  border: 0.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 16px;
  margin-top: 8px;
}
.diff div { padding: 2px 11px; white-space: pre-wrap; word-break: break-word; }
.diff .hunk {
  padding: 3px 11px;
  color: var(--text-muted);
  background: var(--surface-1);
  border-bottom: 0.5px solid var(--border);
}
.diff .ctx { color: var(--text-secondary); }
.diff .add { background: var(--bg-success); color: var(--text-success); }
.diff .del { background: var(--bg-danger); color: var(--text-danger); }
.diff .more { color: var(--text-muted); text-align: center; }

/* the signature mark sits after the hash, so an unsigned row is not indented to make room. */
.sig {
  display: inline-block;
  width: 16px;
  margin-left: 5px;
  text-align: center;
  color: var(--text-muted);
}



/* file view. blame in the gutter on every line, always, per chapter 24. */
.filelines { padding: 12px 0; font-size: 16px; }
.fileline { display: flex; }
.fileline .blame {
  width: 150px;
  flex-shrink: 0;
  color: var(--text-muted);
  padding: 1px 10px 1px 18px;
  border-right: 0.5px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
}
.fileline .num {
  width: 34px;
  flex-shrink: 0;
  color: var(--text-muted);
  text-align: right;
  padding: 1px 8px;
}
.fileline .code { padding: 1px 10px; color: var(--text-primary); white-space: pre-wrap; }

/* the build log. plain text, all of it, so ctrl-F works. chapter 16. */
.log {
  padding: 12px 18px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-family: inherit;
}

/* the pane a form or a single statement sits in. */
.pane { padding: 22px 18px; max-width: 430px; }
.pane.wide { max-width: 560px; }
.pane.loose { padding: 26px 18px; }
.panetitle { margin-bottom: 20px; }

/* the mark in the inbox for where you were when you last looked. */
.lastvisit {
  padding: 5px 18px;
  border-bottom: 0.5px solid var(--border);
  border-top: 0.5px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 16px;
}

/* profile. */
.profile { display: flex; gap: 28px; padding: 20px 18px; }
.profile .side { width: 150px; flex-shrink: 0; }
.profile .main { flex: 1; min-width: 0; }
.avatar {
  width: 76px;
  height: 76px;
  border: 0.5px solid var(--border-strong);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.tag {
  color: var(--text-muted);
  font-size: 16px;
  border: 0.5px solid var(--border);
  border-radius: 4px;
  padding: 0 5px;
}

.foot {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  background: var(--surface-2);
  border-top: 0.5px solid var(--border);
  border-radius: 0 0 12px 12px;
  padding: 9px 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-muted);
  font-size: 16px;
}

@media (max-width: 620px) {
  .profile { display: block; }
  .profile .side { width: auto; margin-bottom: 20px; }
  .fileline .blame { width: 96px; padding-left: 10px; }
}

.here { color: var(--text-primary); }

/* compare. two refs, free text, because no dropdown expresses `master...refs/proposals/47`. */
.compare { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.compare input.rev {
  flex: 1;
  min-width: 150px;
  font: inherit;
  font-size: 16px;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
}
.compare input.rev:focus { outline: 1px solid var(--text-primary); outline-offset: -1px; }

/* The mockups' inline spacing, moved here, because chapter 42.7 makes a style attribute inert. */
.actions { margin-bottom: 18px; }       /* the row a form's button sits in */
.formerror { margin-bottom: 16px; }
.note { margin-top: 8px; }
.note-wide { margin-top: 14px; }
.title { margin-bottom: 6px; }
.name { margin-bottom: 2px; }
textarea.text.short { min-height: 60px; }
textarea.text.tall { min-height: 90px; }

/* profile: one repository per row */
.repo-row { padding: 11px 0; border-bottom: 0.5px solid var(--border); }
.repo-head { padding-bottom: 8px; border-bottom: 0.5px solid var(--border); }
.repo-meta { margin-top: 3px; }
/* the line under the last repository, which says how many of them the page held. */
.repo-more { padding-top: 11px; }

/* A control that reads as a link but is a form, because it changes something and links must not. */
form.inline { display: inline; }
button.linkbtn {
  font: inherit;
  color: var(--text-secondary);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}
button.linkbtn:hover { color: var(--text-primary); }

/* the block under a form that shows how to do the same thing without it */
.pane-top { padding: 16px 18px; border-top: 0.5px solid var(--border); }
.note-under { margin-bottom: 8px; }

/* A comment body, where markdown supplies the structure and this only stops doubled margins. */
.body { word-break: break-word; }
.body > :first-child { margin-top: 0; }
.body > :last-child { margin-bottom: 0; }
.body p { margin: 0 0 8px; }
.body ul, .body ol { margin: 0 0 8px; padding-left: 22px; }
/* a heading owns the text under it, so the space above each one is larger than the space below */
.body h1, .body h2, .body h3, .body h4, .body h5, .body h6 {
  font-weight: 700;
  line-height: 1.3;
}
.body h1 { font-size: 30px; margin: 40px 0 12px; }
.body h2 { font-size: 22px; margin: 36px 0 10px; }
.body h3 { font-size: 18px; margin: 28px 0 8px; }
.body h4, .body h5, .body h6 { font-size: 16px; margin: 20px 0 6px; }
.body h1 { padding-bottom: 8px; border-bottom: 0.5px solid var(--border); }
.body blockquote {
  margin: 0 0 8px;
  padding-left: 11px;
  border-left: 1.5px solid var(--border);
  color: var(--text-secondary);
}
.body pre {
  background: var(--surface-1);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 16px;
  overflow-x: auto;
  margin: 0 0 8px;
}
.body code { font-size: 16px; }
.body pre code { font-size: inherit; }
.body table { border-collapse: collapse; margin: 0 0 8px; }
.body th, .body td {
  border: 0.5px solid var(--border);
  padding: 3px 9px;
  text-align: left;
}
.body th { background: var(--surface-1); font-weight: normal; }
.body hr { border: 0; border-top: 0.5px solid var(--border); margin: 12px 0; }
.body img { max-width: 100%; }

/* The line a comment was written against, kept visible even once it is outdated. 43.4. */
.num-inline {
  display: inline-block;
  width: 34px;
  margin-right: 8px;
  color: var(--text-muted);
  text-align: right;
}

/* The line number in a diff, a link wherever a thread can hold the comment. Chapter 35.3. */
.dnum {
  display: inline-block;
  width: 30px;
  margin-right: 9px;
  text-align: right;
  color: var(--text-muted);
}
a.dnum:hover { color: var(--text-primary); }

.note-small { margin-top: 4px; }

/* a remote image a comment asked for, refused, and said so about. chapter 42.2. */
.blocked { color: var(--text-muted); font-size: 16px; }

/* the matched part of a search result */
.hit { background: var(--bg-success); color: var(--text-success); }