/* Layout and the app's own surfaces. Basecoat owns the controls - buttons,
   inputs, the accordion - and its stylesheet loads first; this file sets the
   brand on its tokens and then only describes things Basecoat has no opinion
   about: the frame, the tree, the diff and the board.

   Basecoat holds its tokens as complete colour values rather than channel
   triplets, so assigning our own hex to them works everywhere they are used. */
:root {
  --background: #f7f7f5;
  --foreground: #1c1c1a;
  --card: #ffffff;
  --popover: #ffffff;
  --popover-foreground: #1c1c1a;
  --muted: #efefe9;
  --muted-foreground: #6b6b66;
  --accent: #efefe9;
  --accent-foreground: #1c1c1a;
  --border: #e6e5e0;
  --input: #e6e5e0;
  --primary: #fa281f;
  --primary-foreground: #ffffff;
  --secondary: #efefe9;
  --secondary-foreground: #1c1c1a;
  --ring: #b9b8b1;
  --radius: 8px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --topbar-height: 56px;
  --statusbar-height: 30px;
  --add: #eaf7ee;
  --add-ink: #14532b;
  --del: #fdecea;
  --del-ink: #7f1a14;
}

/* Basecoat's CDN bundle only carries the utilities its own components use, so
   Tailwind's sr-only is not in it and label text meant for screen readers
   rendered on the page. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A class that sets `display` would otherwise beat the hidden attribute's own
   rule, leaving the element laid out and still taking clicks. */
[hidden] {
  display: none !important;
}

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

body {
  font-family: var(--sans);
  font-size: 15px;
  background: var(--background);
  color: var(--foreground);
}

/* -- sign in -------------------------------------------------------------- */

.signin {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  text-align: center;
}

.signin-logo {
  width: 168px;
}

.signin-error {
  margin: 0;
  color: var(--primary);
  max-width: 44ch;
}

/* -- frame ---------------------------------------------------------------- */

.app {
  height: 100%;
  display: grid;
  grid-template-rows: var(--topbar-height) 1fr var(--statusbar-height);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

/* The left cluster is the sidebar's width, so the picker and the Board button
   under it finish on the same edge. */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  /* The sidebar's width less the topbar's own left padding, so the picker
     finishes exactly where the Board button under it does. */
  width: 268px;
  padding-right: 12px;
  box-sizing: border-box;
  flex: none;
}

#scope-menu {
  flex: 1;
  min-width: 0;
}

#scope-trigger {
  width: 100%;
  justify-content: space-between;
}

#scope-popover {
  width: 100%;
  min-width: 0;
}

.topbar-spacer {
  flex: 1;
}

.avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--muted);
  color: var(--foreground);
  font: 600 11.5px/1 var(--sans);
  letter-spacing: 0.02em;
  cursor: default;
}

.nav-bars,
.nav-bars::before,
.nav-bars::after {
  display: block;
  width: 15px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}

.nav-bars::before,
.nav-bars::after {
  content: "";
  position: relative;
}

.nav-bars::before {
  top: -5px;
}

.nav-bars::after {
  top: 3.5px;
}

.body {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 0;
  transition: grid-template-columns 0.18s ease;
}

.body.nav-closed {
  grid-template-columns: 0 1fr;
}

.body.nav-closed .sidebar {
  border-right: 0;
  overflow: hidden;
}

.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  background: var(--card);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted-foreground);
}

.status[data-tone="error"] {
  color: var(--primary);
  font-weight: 500;
}

/* -- sidebar -------------------------------------------------------------- */

.sidebar {
  border-right: 1px solid var(--border);
  background: var(--card);
  display: grid;
  grid-template-rows: 1fr;
  min-height: 0;
}

.scope-body {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 0;
}

#filter {
  margin: 12px;
  width: calc(100% - 24px);
}

.board-row {
  display: flex;
  align-items: center;
  margin: 4px 12px 12px;
  padding: 0 12px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
}

.board-row:hover {
  background: var(--muted);
}

.board-row[aria-current="true"] {
  background: var(--muted);
  font-weight: 600;
}

/* Which pull requests, rather than fixed groups the reader cannot change. */
.diagram {
  margin: 1.2em 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  overflow-x: auto;
}

.diagram svg {
  max-width: 100%;
  height: auto;
}

.diagram-broken {
  font: 12.5px/1.5 var(--mono);
  color: var(--del-ink);
  background: var(--del);
}

/* Reading the file as it will be, rather than as a diff of how it got there. */
.review-preview {
  border-left: 0;
  background: var(--card);
  max-width: none;
}

.review-preview > * {
  max-width: 72ch;
}

.review-filters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-self: start;
  gap: 2px;
  margin: 0 12px 10px;
  padding: 2px;
  border-radius: var(--radius);
  background: var(--muted);
}

.review-filter {
  padding: 6px 2px;
  font-size: 11.5px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1.4;
  color: var(--muted-foreground);
  cursor: pointer;
}

.review-filter[aria-pressed="true"] {
  background: var(--card);
  color: var(--foreground);
}

.tree {
  overflow-y: auto;
  padding: 0 8px 16px;
}

.tree-heading {
  margin: 12px 8px 4px;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.tree-item {
  width: 100%;
  display: block;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: 14px/1.3 var(--sans);
  color: var(--foreground);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
}

.tree-item:hover {
  background: var(--muted);
}

/* Selected reads as weight and ground. An inset bar here was clipped by the
   row's own rounding into a bracket down the left edge. */
.tree-item[aria-current="true"] {
  background: var(--muted);
  font-weight: 600;
}

.tree-item-name,
.tree-item-folder {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-item-folder {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted-foreground);
}

.tree-item.dirty .tree-item-name::after {
  content: " \2022";
  color: var(--primary);
}

.tree-empty {
  padding: 12px 10px;
  color: var(--muted-foreground);
  font-size: 14px;
}

/* The landing document reads as a signpost, not as the first row of an
   unlabelled list. */
.tree-pinned {
  padding: 10px 8px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.tree-pinned .tree-item {
  padding: 9px 10px;
  border: 1px solid var(--border);
  background: var(--muted);
}

.tree-pinned .tree-item-name {
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.tree-pinned .tree-item[aria-current="true"] .tree-item-name {
  color: var(--foreground);
}

/* -- accordion trim ------------------------------------------------------- */

.accordion summary {
  gap: 8px;
}

.acc-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--muted);
  color: var(--muted-foreground);
  font: 500 11px/1 var(--sans);
}

.chev {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.15s ease;
}

details[open] > summary .chev {
  transform: rotate(180deg);
}

.pr-item > summary {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

/* The chevron sits at the right of the row, and the author and time run on
   from the title rather than under it. */
.pr-line {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* The author runs on from the title and wraps under it when there is no
     room, which at 280px is most titles. Truncating instead would cost the
     one thing that tells two pull requests apart. */
  gap: 2px 6px;
}

.pr-title {
  font-weight: 500;
}

.review-meta {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.pr-item > summary .chev {
  margin-top: 3px;
}

.review-files,
.pr-item > section {
  padding-left: 6px;
}

.review-file-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.review-file-text {
  min-width: 0;
  flex: 1;
}

.file-row-tick {
  width: 12px;
  flex: none;
  color: var(--add-ink);
  font-size: 11px;
  line-height: 1.4;
}

.review-file-row[data-viewed="true"] .tree-item-name {
  color: var(--muted-foreground);
  text-decoration: line-through;
  text-decoration-color: var(--border);
}

/* -- pane ----------------------------------------------------------------- */

.pane {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  background: var(--card);
  /* Basecoat offsets a bare <main> by its own sidebar width. This pane is
     already placed by the grid above it, so that offset is 256px of nothing
     down the left. */
  margin: 0;
}

.pane-body {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 0;
}

.pane.split .pane-body {
  grid-template-columns: 1fr 1fr;
}

.pane-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  min-height: 46px;
  flex-wrap: wrap;
}

.pane-title {
  font: 500 13px/1.3 var(--mono);
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
}

.pane-title.dirty::after {
  content: " \2022";
  color: var(--primary);
}

.pane-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 12px/1 var(--mono);
  color: var(--muted-foreground);
}

.pane-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.editor {
  min-width: 0;
  height: 100%;
}

.preview {
  min-width: 0;
  overflow-y: auto;
  padding: 28px 32px;
  border-left: 1px solid var(--border);
  background: var(--background);
}

.empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  color: var(--muted-foreground);
}

/* -- pill and menu -------------------------------------------------------- */

.pill {
  flex: none;
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--muted);
  color: var(--muted-foreground);
}

.pill-small {
  padding: 3px 6px;
  font-size: 10px;
}

.pill[data-state="draft"] {
  background: #fff4e5;
  color: #8a5300;
}

.pill[data-state="review"] {
  background: #e8f1fd;
  color: #14508c;
}

.pill[data-state="merged"] {
  background: #f0e9fb;
  color: #5b3ba5;
}

.pill[data-state="closed"] {
  background: var(--del);
  color: var(--del-ink);
}

#scope-menu-items [data-scope] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu {
  position: relative;
  display: inline-flex;
}

.menu-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  min-width: 210px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--popover);
  box-shadow: 0 8px 24px rgba(28, 28, 26, 0.12);
  display: none;
}

.menu-open .menu-popover {
  display: block;
}

.menu-item {
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: 13px/1.3 var(--sans);
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
}

.menu-item:hover {
  background: var(--muted);
}

.menu-popover hr {
  margin: 4px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

/* -- rendered markdown ---------------------------------------------------- */

.markdown {
  max-width: 72ch;
  line-height: 1.6;
}

.markdown h1,
.markdown h2,
.markdown h3 {
  line-height: 1.25;
  margin: 1.6em 0 0.5em;
  font-weight: 600;
}

.markdown h1 {
  font-size: 1.7rem;
}

.markdown h2 {
  font-size: 1.3rem;
}

.markdown h3 {
  font-size: 1.1rem;
}

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

.markdown a {
  color: var(--primary);
  text-decoration: underline;
}

.markdown ul,
.markdown ol {
  padding-left: 1.4em;
  list-style: revert;
}

.markdown code {
  font: 0.9em var(--mono);
  background: var(--muted);
  padding: 0.15em 0.35em;
  border-radius: 4px;
}

.markdown pre {
  background: var(--muted);
  padding: 14px 16px;
  border-radius: var(--radius);
  overflow-x: auto;
}

.markdown pre code {
  background: none;
  padding: 0;
}

.markdown blockquote {
  margin: 1em 0;
  padding-left: 14px;
  border-left: 3px solid var(--border);
  color: var(--muted-foreground);
}

.markdown img {
  max-width: 100%;
}

.markdown table {
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.markdown th,
.markdown td {
  border: 1px solid var(--border);
  padding: 7px 10px;
  text-align: left;
}

/* -- review detail -------------------------------------------------------- */

.review-detail {
  grid-column: 1 / -1;
  overflow-y: auto;
  padding: 22px 24px 40px;
  background: var(--background);
}

.review-detail > *:not(.lines) {
  max-width: 76ch;
}

.review-section-heading {
  margin: 22px 0 10px;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.reviewers .review-section-heading {
  margin-top: 0;
}

.review-body,
.comment-body {
  font-size: 14px;
}

.review-empty,
.review-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted-foreground);
}

.review-loading {
  color: var(--muted-foreground);
}

.review-progress {
  margin: 22px 0 10px;
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.review-progress[data-done="true"] {
  color: var(--add-ink);
}

.reviewers {
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.reviewer-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.reviewer-label {
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.reviewer-ask {
  margin-left: auto;
}

.reviewer-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-size: 12.5px;
}

.reviewer-drop {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--muted);
  color: var(--muted-foreground);
  font: 12px/1 var(--sans);
  cursor: pointer;
}

.reviewer-drop:hover {
  background: var(--primary);
  color: var(--primary-foreground);
}

.file-index {
  margin: 8px 0 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.file-index-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  font: 12.5px/1.4 var(--mono);
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
}

.file-index-row:last-child {
  border-bottom: 0;
}

.file-index-row:hover {
  background: var(--muted);
}

.file-index-row[data-viewed="true"] .file-index-path {
  color: var(--muted-foreground);
  text-decoration: line-through;
  text-decoration-color: var(--border);
}

.file-index-path {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.file-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 12px/1 var(--mono);
}

.file-status {
  font: 500 10px/1 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--muted);
  color: var(--muted-foreground);
}

.stat-add {
  color: var(--add-ink);
}

.stat-del {
  color: var(--del-ink);
}

.file-tick {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 var(--sans);
  color: var(--muted-foreground);
  cursor: pointer;
  user-select: none;
}

.file-tick input {
  accent-color: var(--primary);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* -- the numbered diff ---------------------------------------------------- */

.lines {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font: 12.5px/1.55 var(--mono);
  overflow-x: auto;
}

.line {
  display: grid;
  grid-template-columns: 48px 48px 1fr auto;
  align-items: start;
}

.line:hover {
  background: #fbfbf8;
}

.gutter {
  padding: 1px 8px;
  text-align: right;
  color: var(--muted-foreground);
  background: var(--card);
  border-right: 1px solid var(--border);
  user-select: none;
  font-size: 11.5px;
}

.line-text {
  padding: 1px 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.line-add {
  background: var(--add);
}

.line-add .line-text {
  color: var(--add-ink);
}

.line-remove {
  background: var(--del);
}

.line-remove .line-text {
  color: var(--del-ink);
}

.line-hunk {
  background: var(--muted);
  color: var(--muted-foreground);
}

.line-comment-add {
  align-self: center;
  margin-right: 6px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  color: var(--muted-foreground);
  font: 600 13px/1 var(--sans);
  cursor: pointer;
  opacity: 0;
}

.line:hover .line-comment-add {
  opacity: 1;
  border-color: var(--border);
  background: var(--card);
}

.line-comment-add:hover {
  color: var(--primary-foreground);
  background: var(--primary);
  border-color: var(--primary);
}

.line-comment,
.line-composer {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--background);
  font-family: var(--sans);
}

.line-composer .review-buttons {
  margin-top: 8px;
}

/* -- conversation and actions --------------------------------------------- */

.comment {
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}

.comment-who {
  margin: 0 0 4px;
  font-size: 12.5px;
  color: var(--muted-foreground);
}

.verdict {
  font-weight: 600;
}

.verdict[data-verdict="APPROVED"] {
  color: var(--add-ink);
}

.verdict[data-verdict="CHANGES_REQUESTED"] {
  color: var(--primary);
}

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

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

.review-actions {
  margin-top: 22px;
}

.comment-box {
  width: 100%;
  min-height: 72px;
  resize: vertical;
}

.review-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* -- the board ------------------------------------------------------------ */

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 20px;
  overflow-y: auto;
  background: var(--background);
  align-content: start;
  /* Each column is as tall as the cards it holds. Stretching them to a common
     height ties that height to the viewport rather than to the content, and
     the cards then spill out of the bottom of their own column. */
  align-items: start;
}

.column {
  display: flex;
  flex-direction: column;
  min-height: 160px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
}

.column[data-droppable="false"] {
  border-style: dashed;
}

.column-over {
  border-color: var(--primary);
  background: var(--del);
}

.column-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.column-head h2 {
  margin: 0;
  font: 600 13px/1 var(--sans);
}

.column-blurb {
  margin: 4px 0 12px;
  font-size: 11.5px;
  color: var(--muted-foreground);
}

.column-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Not `flex: 1`: that resolves to a zero flex-basis, so the cards stop
     counting towards the column's own height. */
  flex: 1 1 auto;
}

.column-empty {
  margin: 0;
  font-size: 12px;
  color: var(--muted-foreground);
}

.card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  cursor: grab;
}

.card-dragging {
  opacity: 0.5;
}

.card-title {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: 500 13.5px/1.35 var(--sans);
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
}

.card-title:hover {
  color: var(--primary);
}

.card-meta {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--muted-foreground);
}

/* Most cards carry no reviewer and no publish button, and an empty row still
   claimed its margin, leaving every card bottom-heavy. */
.card-actions:empty {
  display: none;
}

.card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.card-reviewers {
  font-size: 11.5px;
  color: var(--muted-foreground);
}

/* -- conflict ------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 28, 26, 0.4);
}

.modal-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 46ch;
  box-shadow: 0 12px 32px rgba(28, 28, 26, 0.2);
}

.modal-card h2 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 600;
}

.modal-card p {
  margin: 0 0 18px;
  color: var(--muted-foreground);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* -- narrow screens ------------------------------------------------------- */

@media (max-width: 900px) {
  .pane.split .pane-body {
    grid-template-columns: 1fr;
  }

  .pane.split .editor {
    display: none;
  }

  .board {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  /* The sidebar leaves the grid flow to sit over the page, so the pane must
     hold the single remaining column. Left as `0 1fr` it became the first
     item and rendered a few characters wide. */
  .body,
  .body.nav-closed {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: absolute;
    z-index: 20;
    top: var(--topbar-height);
    bottom: var(--statusbar-height);
    left: 0;
    width: 84vw;
    max-width: 320px;
    box-shadow: 0 12px 32px rgba(28, 28, 26, 0.18);
  }

  .body.nav-closed .sidebar {
    display: none;
  }

  .review-detail {
    padding: 16px 12px 32px;
  }

  .topbar-left {
    width: auto;
    flex: 1;
    padding-right: 0;
  }

  /* Three columns side by side do not survive a phone, and stacked cards
     lose the thing a board is for - seeing where everything sits. A grouped
     list keeps the grouping and drops the boxes. */
  .board {
    display: block;
    padding: 0;
  }

  .column,
  .column[data-droppable="false"] {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    min-height: 0;
  }

  .column-head {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 14px;
    background: var(--muted);
    border-block: 1px solid var(--border);
  }

  .column-blurb {
    display: none;
  }

  .column-cards {
    gap: 0;
  }

  .column-empty {
    padding: 12px 14px;
  }

  .card {
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: var(--card);
    cursor: default;
  }
}

/* -- managing documents --------------------------------------------------- */

/* Adding is the one dark action in the sidebar: ink rather than the brand
   red, which is kept for committing to something. */
.split-button {
  position: relative;
  display: flex;
  margin: 0 12px 10px;
}

.btn-ink {
  background: var(--foreground);
  border-color: var(--foreground);
  color: var(--card);
}

.btn-ink:hover {
  background: #33332f;
  border-color: #33332f;
}

#new-document {
  flex: 1;
  gap: 6px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.plus {
  font-size: 14px;
  line-height: 1;
}

.split-caret {
  width: 30px;
  padding-inline: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.22);
}

#new-popover {
  top: calc(100% + 4px);
  left: 0;
  right: auto;
  min-width: 100%;
}

.split-button.menu-open #new-popover {
  display: block;
}

.folder-menu {
  flex: none;
}

.folder-menu .btn,
#document-menu .btn {
  width: 26px;
  padding-inline: 0;
  font-size: 15px;
  line-height: 1;
}

/* The heading, its count, the chevron and the menu share one line. */
.accordion summary {
  flex-wrap: nowrap;
}

.accordion summary > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.accordion summary {
  align-items: center;
}

.field-label {
  display: block;
  margin: 14px 0 5px;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

#path-dialog .input {
  width: 100%;
}

#path-dialog .modal-card {
  width: min(460px, 92vw);
  max-width: none;
}

.path-preview {
  margin: 14px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--muted);
  font: 12.5px/1.4 var(--mono);
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
  min-height: 18px;
}

.nav-scrim {
  display: none;
}

@media (max-width: 720px) {
  .nav-scrim {
    display: block;
    position: absolute;
    z-index: 15;
    top: var(--topbar-height);
    bottom: var(--statusbar-height);
    left: 0;
    right: 0;
    background: rgba(28, 28, 26, 0.35);
  }

  .nav-scrim[hidden] {
    display: none;
  }
}