/* Top bar (also used by the uploads dashboard's nav) */

.p-top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.top-nav {
  display: flex;
  gap: 4px;
}

.top-nav a {
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.top-nav a:hover {
  background: var(--surface-2);
}

.top-nav a[aria-current='page'] {
  background: var(--surface-2);
  color: var(--ink);
}

.search {
  position: relative;
  flex: 1;
  max-width: 360px;
  margin-left: auto;
}

.search input {
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--surface-2);
  border-color: transparent;
}

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.search-results a {
  display: grid;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.search-results a:hover {
  background: var(--surface-2);
}

.search-results .none {
  padding: 8px 10px;
}

.sync {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.sync-text {
  max-width: 260px;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
}

/* Page */

.p-main {
  display: grid;
  gap: 22px;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 26px 24px 72px;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}

.crumbs a {
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: none;
}

.crumbs a:hover {
  text-decoration: underline;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: -8px;
}

.page-head h1 {
  font-size: clamp(24px, 3.4vw, 32px);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.row.wrap {
  flex-wrap: wrap;
}

.section {
  display: grid;
  gap: 10px;
}

.section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Folders */

.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.folder-grid.is-projects {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.folder-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.folder-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.is-projects .folder-card {
  padding: 20px;
}

.folder-icon {
  flex: none;
  width: 38px;
  height: 30px;
  margin-top: 2px;
  border-radius: 4px 9px 9px 9px;
  background: linear-gradient(to bottom, var(--accent) 0 5px, color-mix(in srgb, var(--accent) 78%, #fff) 5px);
  position: relative;
}

.folder-icon::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 16px;
  height: 7px;
  border-radius: 4px 4px 0 0;
  background: var(--accent);
}

.fc-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.fc-body strong {
  font-size: 16px;
  overflow-wrap: anywhere;
}

.is-projects .fc-body strong {
  font-size: 18px;
}

.fc-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.badge-open {
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* Documents list */

.doc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.doc-list li + li {
  border-top: 1px solid var(--line);
}

.doc-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto 90px;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  text-decoration: none;
}

.doc-row:hover {
  background: var(--surface-2);
}

.dr-name,
.dr-version {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.dr-name strong {
  overflow-wrap: anywhere;
}

.dr-version {
  justify-items: end;
}

.dr-notes {
  text-align: right;
}

.fmt {
  justify-self: start;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--ink-2);
}

.fmt-w { background: #dbe7fb; color: #1d4f9f; }
.fmt-p { background: #fbdcd8; color: #a3261a; }
.fmt-s { background: #fde7c7; color: #8f5200; }
.fmt-x { background: #d6f0dd; color: #1f6b35; }
.fmt-m { background: #e8e1f7; color: #5b3a9c; }
.fmt-i { background: #d8eef1; color: #13616d; }
.fmt-h { background: #efe3d6; color: #7a4a1d; }

@media (prefers-color-scheme: dark) {
  .fmt-w { background: #1e2f4d; color: #9cc0ff; }
  .fmt-p { background: #4a1f1b; color: #ffa99f; }
  .fmt-s { background: #45311a; color: #ffc97a; }
  .fmt-x { background: #1b3a25; color: #8fdca6; }
  .fmt-m { background: #33294a; color: #cdb8ff; }
  .fmt-i { background: #173a40; color: #8fd6e0; }
  .fmt-h { background: #3d2d1e; color: #e4b98c; }
}

.vchip {
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--bg);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vchip.big {
  padding: 3px 10px;
  font-size: 14px;
}

.other-files {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.other-files summary {
  cursor: pointer;
  font-weight: 600;
}

.other-files ul {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.other-files li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: baseline;
}

.other-files li span:first-child {
  overflow-wrap: anywhere;
}

/* Document page */

.doc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: start;
}

.timeline {
  display: grid;
  gap: 12px;
}

.timeline ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.version {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
}

.v-rail {
  position: relative;
  display: flex;
  justify-content: center;
}

.v-rail::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
}

.version:first-child .v-rail::before {
  top: 22px;
}

.version:last-child .v-rail::before {
  bottom: calc(100% - 22px);
}

.v-rail span {
  position: relative;
  width: 12px;
  height: 12px;
  margin-top: 17px;
  border: 2px solid var(--muted);
  border-radius: 50%;
  background: var(--surface);
}

.is-latest .v-rail span {
  border-color: var(--accent);
  background: var(--accent);
}

.v-card {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px 16px;
}

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

.tag {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 700;
}

.summary {
  display: grid;
  gap: 6px;
}

.s-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.s-headline {
  font-weight: 600;
  text-wrap: pretty;
}

.changes {
  display: grid;
  gap: 4px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--ink-2);
}

.changes li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 6px;
  overflow-wrap: anywhere;
}

.sign {
  font-weight: 800;
  text-align: center;
}

.added .sign { color: var(--ok); }
.changed .sign { color: #c77d00; }
.removed .sign { color: var(--danger); }
.points .sign { color: var(--muted); }

.s-error {
  margin-top: 4px;
}

.v-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.is-pending {
  grid-template-columns: 1fr;
}

.shimmer {
  display: block;
  height: 42px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-2) 0%, color-mix(in srgb, var(--surface-2) 40%, var(--surface)) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

.next-card {
  position: sticky;
  top: 76px;
  display: grid;
  gap: 10px;
  padding: 18px;
  border-top: 3px solid var(--accent);
}

.next-card h2 {
  font-size: 17px;
}

.next-items {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
}

.next-items li {
  padding-left: 2px;
}

.next-items li span {
  display: block;
}

.next-card #regenerate {
  justify-self: start;
  margin-left: -8px;
}

.ai-note {
  max-width: 720px;
}

/* Signing in */

.auth-card {
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  margin: 8vh auto 0;
  padding: 28px;
}

.auth-card h1 {
  font-size: 24px;
}

/* Header: account, worker status */

.me {
  position: relative;
}

.me-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.avatar.small {
  width: 26px;
  height: 26px;
  font-size: 12px;
}

.menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: grid;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.menu a,
.menu button {
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  text-align: left;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
}

.menu a:hover,
.menu button:hover {
  background: var(--surface-2);
}

.worker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 320px;
  overflow: hidden;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.worker-chip::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.worker-chip.is-online {
  color: var(--ink-2);
}

.worker-chip.is-online::before {
  background: var(--ok);
}

.drive-tag {
  vertical-align: middle;
  padding: 2px 9px;
  border-radius: 999px;
  background: #d6f0dd;
  color: #1f6b35;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.folder-icon.is-drive {
  background: linear-gradient(to bottom, #2b8a3e 0 5px, color-mix(in srgb, #2b8a3e 70%, #fff) 5px);
}

.folder-icon.is-drive::before {
  background: #2b8a3e;
}

/* Uploading */

.dropzone {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 28px 20px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
}

.dropzone:hover,
.is-dropping .dropzone {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.dropzone .icon {
  font-size: 26px;
  color: var(--accent-strong);
}

.dropzone .muted {
  max-width: 560px;
}

.is-dropping .p-main {
  outline: 3px dashed var(--accent);
  outline-offset: 6px;
  border-radius: var(--radius);
}

.busy-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow);
  transform: translateX(-50%);
}

.spinner {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Summaries: stand-ins and who wrote them */

.summary.is-standin .s-headline,
.summary.is-standin .changes {
  opacity: 0.75;
}

.s-waiting {
  display: flex;
  align-items: center;
  gap: 8px;
}

.s-waiting .spinner {
  width: 11px;
  height: 11px;
}

.s-by {
  font-size: 12px;
}

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

/* People */

.people ul,
.invites {
  margin: 0;
  padding: 6px 16px;
  list-style: none;
}

.people li,
.invites li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  flex-wrap: wrap;
}

.people li + li,
.invites li + li {
  border-top: 1px solid var(--line);
}

.p-body {
  display: grid;
  flex: 1;
  min-width: 0;
}

.invites code {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

/* Empty and setup states */

.empty-state {
  display: grid;
  gap: 10px;
  max-width: 640px;
  margin: 40px auto;
  text-align: center;
}

.empty-state.small {
  margin: 12px auto;
}

.empty-state.setup {
  text-align: left;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.empty-state ol {
  display: grid;
  gap: 8px;
  margin: 4px 0;
  padding-left: 22px;
}

.empty-state code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-2);
  font-size: 13px;
}

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

  .next-card {
    position: static;
    order: -1;
  }
}

@media (max-width: 640px) {
  .p-top {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 16px;
  }

  .search {
    order: 3;
    max-width: none;
    flex-basis: 100%;
  }

  .sync-text {
    display: none;
  }

  .p-main {
    padding: 18px 16px 56px;
  }

  .doc-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
  }

  .doc-row .fmt {
    display: none;
  }

  .dr-notes {
    grid-column: 1 / -1;
    text-align: left;
  }

  .dr-notes:empty {
    display: none;
  }
}

/* ——— Crossing to the board ——— */

/* The mirror of Dhwani's `.fab--switch`: same corner, same words, same shape.
   The two apps are one thing to the people using them and two addresses to a
   browser, and a door in the same place on both sides is the cheapest bridge
   over that gap. */
.board-switch {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 16px;
  border-radius: 23px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.5);
}

.board-switch:hover {
  border-color: var(--accent);
}

/* ——— Sending a document into a conversation ——— */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
}

.sheet-card {
  width: min(480px, 100%);
  max-height: min(80vh, 640px);
  padding: 16px;
  overflow-y: auto;
  /* The rows are full-width buttons with a border, and those three pixels
     bought a horizontal scrollbar across the whole sheet. Nothing in here is
     ever meant to scroll sideways. */
  overflow-x: hidden;
}

.sheet-card .page-head {
  margin-top: 0;
}

.sheet-card .field {
  margin-bottom: 12px;
}

.share-targets {
  display: grid;
  gap: 8px;
}

/* A row that is a button. Left-aligned and stacked, because a name and what it
   means are two lines and a centred button label is one. */
.share-targets .btn.wide {
  width: 100%;
  box-sizing: border-box;
  /* `.btn` is nowrap, which is right for a button with two words on it and
     wrong for a row carrying a sentence: the notice-board line about who can
     open the document could not wrap, so the row grew to fit it and every row
     with it, 50px past the edge of the sheet. Found by measuring rather than
     by looking — the text ran under the panel edge and read as if it had
     simply been written short. */
  white-space: normal;
  min-width: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}