/*
  Team Board, the web app.

  The idea behind the look: the app is a board (deep chalkboard green) with
  one sheet of paper lying on it. You read on the paper. The knowledge graph
  is drawn straight on the board, in chalk colours.

  Yellow highlighter means exactly one thing everywhere: this is waiting for
  a person.

  Two typefaces. Atkinson Hyperlegible Next for the app itself: it was drawn
  so that letters are hard to mistake for each other. Literata, a face made
  for reading books, for the things people wrote about how they think.
*/

/* ------------------------------------------------------------------------
   Fonts (kept in the fonts/ folder, so nothing loads from another site)
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Literata";
  src: url("fonts/literata-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Literata";
  src: url("fonts/literata-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* ------------------------------------------------------------------------
   Colours and sizes used everywhere
   ------------------------------------------------------------------------ */

:root {
  --board: #1f3d33;
  --board-deep: #17302a;
  --board-line: rgba(238, 243, 234, 0.16);
  --chalk: #eef3ea;
  --chalk-soft: rgba(238, 243, 234, 0.68);

  --paper: #fdfdfb;
  --paper-shade: #f1f4ef;
  --ink: #17251f;
  --ink-soft: #55655c;
  --rule: #e2e7e1;
  --rule-strong: #c3ccc4;

  --highlighter: #ffe066;
  --link: #1c6549;
  --problem: #a3271c;

  --sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* The focus ring is yellow on the board and ink on paper. */
  --focus: var(--highlighter);

  /* These three are also read by project.js, to tell the graph how much of
     the board the sheet is lying on. */
  --sheet-gap: 12px;
  --sheet-width: 780px;
  --people-sheet-width: 440px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--board);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 2px;
}

.sheet,
.side-sheet,
.dialog {
  --focus: var(--ink);
}

[hidden] {
  display: none !important;
}

.noscript {
  color: var(--chalk);
  padding: 48px;
}

/* ------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  padding: 11px 18px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}

.button.is-small {
  font-size: 14.5px;
  padding: 8px 13px;
  border-radius: 8px;
}

.button:disabled {
  opacity: 0.55;
  cursor: default;
}

/* The main action on paper: board green. */
.button.is-go {
  background: var(--board);
  color: var(--chalk);
}

.button.is-go:hover:not(:disabled) {
  background: var(--board-deep);
}

/* A second, quieter action on paper. */
.button.is-plain {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}

.button.is-plain:hover:not(:disabled) {
  border-color: var(--ink);
}

/* On the board: filled chalk, and outlined chalk. */
.button.is-chalk {
  background: var(--chalk);
  color: var(--board-deep);
}

.button.is-chalk:hover {
  background: #fff;
}

.button.is-outline-chalk {
  background: transparent;
  color: var(--chalk);
  border-color: rgba(238, 243, 234, 0.42);
}

.button.is-outline-chalk:hover {
  border-color: var(--chalk);
}

/* ------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------ */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

label {
  font-size: 15px;
  font-weight: 650;
}

input[type="text"],
input[type="password"],
textarea,
select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--rule-strong);
  border-radius: 9px;
  padding: 10px 12px;
}

textarea {
  display: block;
  min-height: 84px;
  line-height: 1.5;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: #8a968e;
}

.field-hint {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.form-error {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 550;
  color: var(--problem);
}

.form-error:empty {
  display: none;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.inline-form {
  margin-top: 16px;
  /* Keeps a little air under the form when it is scrolled into view. */
  scroll-margin: 28px;
}

.inline-form textarea {
  margin-bottom: 10px;
}

.inline-form .field textarea {
  margin-bottom: 0;
}

.inline-form.is-boxed {
  margin: 0 0 28px;
  padding: 20px;
  background: var(--paper-shade);
  border-radius: 12px;
}

/* ------------------------------------------------------------------------
   The first screen: your projects
   ------------------------------------------------------------------------ */

.picker {
  position: relative;
  min-height: 100dvh;
  color: var(--chalk);
  overflow: hidden;
}

.picker-graph {
  position: absolute;
  top: 0;
  right: 0;
  width: 56%;
  height: 100%;
  pointer-events: none;
}

.picker-main {
  position: relative;
  max-width: 800px;
  padding: 44px clamp(24px, 7vw, 104px) 72px;
}

.wordmark {
  margin: 0 0 clamp(56px, 14vh, 132px);
  font-size: 17px;
  font-weight: 700;
}

.picker-title {
  margin: 0 0 20px;
  font-size: 19px;
  font-weight: 500;
  color: var(--chalk-soft);
}

/* With no projects yet, the title is the sentence that says what this is. */
.picker-title:has(+ .picker-intro) {
  max-width: 15em;
  font-size: clamp(32px, 4.4vw, 50px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--chalk);
}

.picker-intro {
  max-width: 32em;
  margin: 0 0 40px;
  font-size: 18px;
  color: var(--chalk-soft);
}

.project-list {
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  border-top: 1px solid var(--board-line);
}

.project-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--board-line);
}

.project-link {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 0 20px;
  color: inherit;
  text-decoration: none;
}

.project-status:empty {
  display: none;
}

.project-name {
  font-size: clamp(27px, 3.3vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.project-link:hover .project-name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

.project-status {
  font-size: 15px;
  color: var(--chalk-soft);
}

.project-status.is-waiting {
  font-weight: 650;
  color: var(--highlighter);
}

.project-forget {
  font: inherit;
  font-size: 14px;
  color: var(--chalk-soft);
  background: none;
  border: 0;
  padding: 6px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  opacity: 0;
}

.project-row:hover .project-forget,
.project-forget:focus-visible {
  opacity: 1;
}

.project-row.is-confirming {
  flex-wrap: wrap;
  padding: 18px 0;
}

.project-confirm-text {
  flex: 1 1 100%;
  font-size: 16px;
}

.picker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* The sheet for "Start a new project" and "Join with an invite". */
.picker-side {
  display: none;
}

.picker.has-side .picker-side {
  display: block;
  position: fixed;
  top: var(--sheet-gap);
  right: var(--sheet-gap);
  bottom: var(--sheet-gap);
  width: min(500px, calc(100% - 2 * var(--sheet-gap)));
  overflow-y: auto;
  color: var(--ink);
  background: var(--paper);
  border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgba(6, 20, 15, 0.7);
  animation: sheet-arrives 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes sheet-arrives {
  from {
    transform: translateX(28px);
    opacity: 0;
  }
}

.side-sheet {
  padding: 44px 40px 48px;
}

.side-sheet h2,
.dialog h2 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.side-sheet .form {
  margin-top: 28px;
}

.name-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ------------------------------------------------------------------------
   An open project: menu on the board, sheet beside it
   ------------------------------------------------------------------------ */

.shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  height: 100dvh;
}

.side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 26px 20px 24px 24px;
  color: var(--chalk);
}

.side-back {
  font-size: 14px;
  color: var(--chalk-soft);
  text-underline-offset: 3px;
}

.side-back:hover {
  color: var(--chalk);
}

.side-project {
  margin: 10px 0 30px;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-left: -12px;
  padding: 9px 12px;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--chalk);
  text-decoration: none;
  border-radius: 9px;
}

.menu-item:hover {
  background: rgba(238, 243, 234, 0.07);
}

.menu-item[aria-current="page"] {
  font-weight: 650;
  background: rgba(238, 243, 234, 0.14);
}

.badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  background: var(--highlighter);
  border-radius: 11px;
}

.side-foot {
  margin-top: auto;
  font-size: 14.5px;
  color: var(--chalk-soft);
}

.side-you {
  margin: 0 0 4px;
}

.side-you strong {
  color: var(--chalk);
  font-weight: 650;
}

.side-link {
  font: inherit;
  color: var(--chalk);
  background: none;
  border: 0;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

/* The sheet. It fills the board, except on a wide window, where it keeps
   the width of a page and the graph shows beside it. On "People" it slides
   to the right-hand side and narrows, uncovering the board. */
.sheet {
  position: absolute;
  top: var(--sheet-gap);
  bottom: var(--sheet-gap);
  left: 0;
  width: calc(100% - var(--sheet-gap));
  overflow-y: auto;
  background: var(--paper);
  border-radius: 14px;
  box-shadow: 0 24px 60px -30px rgba(6, 20, 15, 0.7);
  transition: left 0.55s cubic-bezier(0.22, 0.8, 0.24, 1), width 0.55s cubic-bezier(0.22, 0.8, 0.24, 1),
    top 0.55s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.shell.has-wide-board .sheet {
  width: var(--sheet-width);
}

.shell.is-people .sheet {
  left: calc(100% - var(--sheet-gap) - var(--people-sheet-width));
  width: var(--people-sheet-width);
}

.sheet-inner {
  max-width: 780px;
  padding: 52px 60px 104px;
}

.shell.is-people .sheet-inner {
  padding: 38px 32px 80px;
}

.offline-note {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 10px 64px;
  font-size: 15px;
  font-weight: 550;
  background: var(--highlighter);
}

/* ------------------------------------------------------------------------
   Text on the sheet
   ------------------------------------------------------------------------ */

.page-title {
  margin: 0 0 8px;
  font-size: 35px;
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.page-title.is-person {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-wrap: anywhere;
}

.page-title.is-person .person-mark {
  width: 34px;
  height: 34px;
  font-size: 17px;
}

.page-lede {
  max-width: 33em;
  margin: 0 0 30px;
  font-size: 17px;
  color: var(--ink-soft);
}

.section {
  margin-top: 52px;
}

/* The first section on a page sits right under the page's opening lines. */
.page-lede + .section {
  margin-top: 8px;
}

.section-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.soft {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--ink-soft);
}

/* What a screen says when there is nothing to show yet. */
.empty {
  max-width: 34em;
  margin: 14px 0;
  padding: 2px 0 2px 16px;
  color: var(--ink-soft);
  border-left: 3px solid var(--rule);
}

/* Highlighter pen over a line of text. */
.highlight {
  padding: 0 0.22em;
  margin: 0 -0.22em;
  font-weight: 650;
  background: linear-gradient(transparent 10%, var(--highlighter) 10%, var(--highlighter) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Who and when, above or below a piece of text. */
.byline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--ink-soft);
}

.byline strong {
  font-weight: 650;
  color: var(--ink);
}

.byline time {
  margin-left: auto;
  padding-left: 12px;
  font-size: 14px;
  white-space: nowrap;
}

.person-mark {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  background: var(--person, var(--rule-strong));
  border-radius: 50%;
}

/* Small switches and filters. */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.segments {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--paper-shade);
  border-radius: 10px;
}

.segment {
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}

.segment:hover {
  color: var(--ink);
}

.segment[aria-pressed="true"] {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 1px var(--rule-strong);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 550;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--rule-strong);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
}

.chip:has(.person-mark) {
  padding-left: 6px;
}

.chip:hover {
  border-color: var(--ink);
}

.chip[aria-pressed="true"] {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

/* ------------------------------------------------------------------------
   Rendered Markdown
   ------------------------------------------------------------------------ */

.prose {
  overflow-wrap: break-word;
}

.prose > :first-child {
  margin-top: 0;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose pre {
  margin: 0 0 0.8em;
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose li {
  margin: 0.25em 0;
}

.prose li.is-nested {
  margin-left: 1.3em;
}

.prose h3,
.prose h4,
.prose h5 {
  margin: 1.5em 0 0.4em;
  line-height: 1.25;
  font-weight: 650;
}

.prose h3 {
  font-size: 1.2em;
}

.prose h4 {
  font-size: 1.06em;
}

.prose h5 {
  font-family: var(--sans);
  font-size: 0.84em;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.prose blockquote {
  padding-left: 14px;
  color: var(--ink-soft);
  border-left: 3px solid var(--rule-strong);
}

.prose hr {
  margin: 1.4em 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

.prose code {
  font-family: var(--mono);
  font-size: 0.86em;
  padding: 0.1em 0.35em;
  background: var(--paper-shade);
  border-radius: 5px;
  overflow-wrap: anywhere;
}

.prose pre {
  padding: 12px 14px;
  overflow-x: auto;
  background: var(--paper-shade);
  border-radius: 10px;
}

.prose pre code {
  padding: 0;
  background: none;
  overflow-wrap: normal;
}

.prose a {
  color: inherit;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* A [[link to a note]]. */
.note-link {
  font: inherit;
  font-weight: 600;
  color: var(--link);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.note-link.is-plain {
  color: inherit;
  text-decoration: none;
  cursor: auto;
}

/* Things a person wrote about how they think are set like a book. */
.is-reading {
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.68;
}

.is-reading .prose code {
  font-size: 0.8em;
}

/* Long text folded to a few lines, with a button to open it. */
.is-folded {
  max-height: 8em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}

.unfold {
  margin-top: 4px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ------------------------------------------------------------------------
   Questions
   ------------------------------------------------------------------------ */

.thread {
  padding: 26px 0;
  border-top: 1px solid var(--rule);
}

.thread:first-child {
  border-top: 0;
  padding-top: 6px;
}

/* Text lines up with the name, clear of the coloured mark. */
.thread-question,
.thread-waiting,
.thread > .inline-form {
  margin-left: 30px;
}

.thread-question {
  font-size: 18px;
  line-height: 1.5;
}

/* The answer hangs off a rule, so it reads as a reply to what is above. */
.thread-answer {
  margin: 18px 0 0 30px;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--rule);
}

.thread-waiting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 14px;
}

.thread-waiting .soft {
  margin: 0;
}

/* ------------------------------------------------------------------------
   Decisions
   ------------------------------------------------------------------------ */

.request {
  padding: 28px 0 32px;
  border-top: 1px solid var(--rule);
}

.section-title + .request {
  border-top: 0;
  padding-top: 14px;
}

.request-question {
  max-width: 26em;
  margin: 0 0 14px;
  font-size: 23px;
  font-weight: 650;
  line-height: 1.42;
  letter-spacing: -0.01em;
}

.request-question .highlight {
  font-weight: inherit;
}

.request-proposal {
  margin-top: 16px;
  padding: 16px 20px 18px;
  font-size: 17px;
  background: var(--paper-shade);
  border-radius: 12px;
}

.request-proposal-label {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink-soft);
}

.request-details {
  margin-top: 14px;
}

.request-details summary {
  width: fit-content;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}

.request-details summary:hover {
  color: var(--ink);
}

.request-details .prose {
  margin-top: 10px;
  padding-left: 16px;
  border-left: 3px solid var(--rule);
}

.request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.decided {
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}

.section-title + .decided {
  border-top: 0;
  padding-top: 12px;
}

.decided-what {
  font-size: 17px;
  font-weight: 600;
}

.decided-why {
  margin: 4px 0 12px;
  font-size: 15.5px;
  color: var(--ink-soft);
}

.decided .byline {
  margin: 0;
}

/* ------------------------------------------------------------------------
   Change log
   ------------------------------------------------------------------------ */

.pinned {
  margin: 0 0 28px;
  padding: 22px 26px 18px;
  background: var(--paper-shade);
  border-radius: 12px;
}

.pinned-text {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
}

.pinned-by {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.day-title {
  margin: 38px 0 2px;
  font-size: 15px;
  font-weight: 650;
  color: var(--ink-soft);
}

.changes > .day-title:first-child {
  margin-top: 26px;
}

.change {
  padding: 16px 0 18px;
  border-top: 1px solid var(--rule);
}

.day-title + .change {
  border-top: 0;
}

.change-text,
.change > .unfold {
  margin-left: 30px;
}

.earlier {
  margin-top: 24px;
}

/* ------------------------------------------------------------------------
   People: the sheet
   ------------------------------------------------------------------------ */

.people-list,
.note-list,
.shared-list,
.backlinks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.people-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid var(--rule);
}

.people-name {
  font-size: 17px;
  font-weight: 650;
}

.people-row:hover .people-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.people-facts {
  margin-left: auto;
  font-size: 14.5px;
  color: var(--ink-soft);
  text-align: right;
}

.shared-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
}

.shared-list .soft {
  margin: 0;
}

.shared-title {
  font-weight: 600;
}

.person-body {
  margin-top: 26px;
}

.person-body > .soft {
  margin-top: 20px;
}

.note-row {
  display: block;
  padding: 12px 0;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid var(--rule);
}

.note-list li:first-child .note-row {
  border-top: 0;
  padding-top: 0;
}

.note-row-title {
  display: block;
  font-weight: 650;
}

.note-row:hover .note-row-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.note-row-preview {
  display: block;
  font-size: 14.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.back-link {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-underline-offset: 3px;
}

.back-link:hover {
  color: var(--ink);
}

.note-title {
  margin: 18px 0 6px;
  font-family: var(--serif);
  font-size: 31px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.note-title + .soft {
  margin-bottom: 26px;
}

.backlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
}

/* ------------------------------------------------------------------------
   People: the graph on the board
   ------------------------------------------------------------------------ */

/* The canvas covers the whole board and lies under the sheet. It only
   answers the pointer on "People". */
.graph-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  pointer-events: none;
}

.graph-canvas.is-hidden {
  visibility: hidden;
}

.shell.is-people .graph-canvas {
  pointer-events: auto;
  cursor: grab;
}

/* The names and the hint that "People" lays over the graph. The layer lets
   clicks through to the canvas; only the things in it catch them. */
.graph-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: calc(var(--people-sheet-width) + var(--sheet-gap));
  pointer-events: none;
}

.graph-overlay > * {
  pointer-events: auto;
}

.shell.is-people .graph-canvas.is-over-node {
  cursor: pointer;
}

.shell.is-people .graph-canvas.is-grabbing {
  cursor: grabbing;
}

.graph-whose {
  position: absolute;
  top: 24px;
  left: 4px;
  right: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chalk-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  font-size: 15px;
  font-weight: 550;
  color: var(--chalk);
  text-decoration: none;
  background: var(--board);
  border: 1.5px solid rgba(238, 243, 234, 0.3);
  border-radius: 999px;
}

.chalk-chip:hover {
  border-color: var(--chalk);
}

.chalk-chip[aria-current] {
  color: var(--board-deep);
  background: var(--chalk);
  border-color: var(--chalk);
}

.chalk-dot {
  width: 10px;
  height: 10px;
  background: var(--person);
  border-radius: 50%;
}

.graph-hint {
  position: absolute;
  left: 4px;
  bottom: 20px;
  max-width: 46ch;
  margin: 0;
  font-size: 13.5px;
  color: var(--chalk-soft);
  pointer-events: none;
}

.graph-empty {
  position: absolute;
  top: 42%;
  left: 50%;
  width: min(36ch, 82%);
  margin: 0;
  font-size: 17px;
  text-align: center;
  color: var(--chalk);
  transform: translate(-50%, -50%);
}

/* ------------------------------------------------------------------------
   Invite a teammate, and the small message after an action
   ------------------------------------------------------------------------ */

.dialog {
  width: min(580px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 36px 36px 28px;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  border-radius: 14px;
}

.dialog::backdrop {
  background: rgba(10, 26, 20, 0.6);
}

.invite-part {
  margin-top: 26px;
}

.invite-part h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 650;
}

.invite-part .soft {
  margin: 0;
}

.invite-part .button + .soft {
  margin-top: 18px;
}

.copy-box {
  margin: 8px 0 10px;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--paper-shade);
  border-radius: 10px;
  user-select: all;
}

.copy-box code {
  font: inherit;
}

.invite-warning {
  margin: 26px 0 20px;
  padding-left: 14px;
  font-size: 14.5px;
  border-left: 3px solid var(--highlighter);
}

#toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 10;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 550;
  color: var(--paper);
  background: var(--ink);
  border-radius: 10px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 0.18s, transform 0.18s;
}

#toast.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ------------------------------------------------------------------------
   Small screens: the menu moves to the bottom, the sheet fills the width,
   and on "People" the graph takes the top of the screen.
   ------------------------------------------------------------------------ */

@media (max-width: 860px) {
  .shell {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  /* The side's three parts become separate pieces of the grid. */
  .side {
    display: contents;
  }

  .side-top {
    grid-row: 1;
    grid-column: 1;
    min-width: 0;
    padding: 12px 16px 10px;
    color: var(--chalk);
  }

  .side-back {
    font-size: 13px;
  }

  .side-project {
    margin: 0;
    font-size: 18px;
  }

  .side-foot {
    grid-row: 1;
    grid-column: 2;
    margin: 0;
    padding: 12px 16px 10px;
    font-size: 13px;
    text-align: right;
  }

  .stage {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .menu {
    grid-row: 3;
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 4px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }

  .menu-item {
    flex: 1;
    justify-content: center;
    margin: 0;
    padding: 9px 4px;
    font-size: 14px;
    text-align: center;
  }

  .sheet {
    top: 0;
    bottom: 0;
    width: 100%;
    border-radius: 14px 14px 0 0;
  }

  .shell.is-people .sheet {
    top: 44%;
    left: 0;
    width: 100%;
  }

  .sheet-inner,
  .shell.is-people .sheet-inner {
    padding: 30px 20px 64px;
  }

  .offline-note {
    padding: 10px 20px;
  }

  .graph-overlay {
    right: 0;
    bottom: 56%;
  }

  .graph-whose {
    top: 4px;
    left: 12px;
    right: 12px;
  }

  .graph-hint {
    display: none;
  }

  .page-title {
    font-size: 29px;
  }

  .request-question {
    font-size: 20px;
  }

  /* No room for the picture beside the list, and behind it would only get
     in the way of reading. */
  .picker-graph {
    display: none;
  }

  .picker-main {
    padding-top: 28px;
  }

  .project-forget {
    opacity: 1;
  }

  .picker.has-side .picker-side {
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
  }

  .side-sheet {
    padding: 32px 20px 40px;
  }

  .dialog {
    padding: 28px 20px 20px;
  }

  #toast {
    bottom: 84px;
  }
}

/* People who ask their device for less motion get none of the sliding. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}