/* The directory and its kinds. The given pages sit on a grey band, flat and labelled,
   so they read as the brain's bearings; the kinds are cards with a border, each saying
   how many pages it has and what is moving in it. Inside a kind, every page is one line. */

.directory .h,
.kind-page .h,
.recent-pages .h {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.directory .h h1,
.kind-page .h h1 {
  margin-top: 0;
}

.recent-pages .h h1 {
  margin-top: 0.3rem;
}

.kind-page .h h1 {
  margin-top: 0.3rem;
}

.directory .h .cta,
.kind-page .h .cta,
.recent-pages .h .cta {
  margin-left: auto;
  font-size: var(--text-sm);
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}

.directory .h .cta + .cta {
  margin-left: 0;
}

.directory .dot,
.kind-page .dot {
  width: 6px;
  height: 6px;
  margin-right: 0.4rem;
  background: var(--in);
  flex: none;
}

.directory .dot.calm {
  background: var(--line);
}

/* The given pages */

.directory .bearings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.directory .bearing {
  display: grid;
  gap: 0.2rem;
  align-content: start;
  padding: 0.8rem 0.95rem;
  background: var(--wash);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: var(--text-sm);
  text-decoration: none;
  min-width: 0;
}

.directory a.bearing:hover strong {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.directory .bearing small {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.directory .bearing strong {
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 600;
}

.directory .bearing > span {
  display: flex;
  align-items: center;
}

.directory .bearing .people {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  margin-top: 0.15rem;
}

.directory .bearing .people a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink);
  text-decoration: none;
}

.directory .bearing .people a:hover {
  text-decoration: underline;
}

.directory .bearing .avatar.tiny {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.5rem;
}

/* The sentence the workspace writes, its counts filled live */

.directory .sentence {
  max-width: 40em;
  margin: 1.8rem 0 0;
  font-size: 1.3rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.directory .sentence a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--line);
}

.directory .sentence a:hover {
  border-color: var(--ink);
}

/* The kinds */

.directory .group {
  margin-top: 1.6rem;
}

.directory .group h2 {
  margin: 0 0 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.directory .kinds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.7rem;
}

.directory .kind-card {
  display: grid;
  gap: 0.25rem;
  align-content: start;
  padding: 0.9rem 1rem 0.8rem;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

.directory .kind-card:hover {
  border-color: var(--muted);
}

.directory .kind-card strong {
  color: var(--ink);
  font-size: var(--text-lg);
  font-weight: 600;
}

.directory .kind-card .life {
  display: flex;
  align-items: center;
  margin-top: 0.3rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
}

/* A kind */

.kind-page .sub {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: var(--text-md);
}

.kind-page .controls,
.recent-pages .controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1rem;
  margin-top: 1.3rem;
}

.kind-page .seg,
.recent-pages .seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
  overflow: hidden;
}

.kind-page .seg a,
.recent-pages .seg a {
  padding: 0.3rem 0.75rem;
  border-right: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--text-sm);
  text-decoration: none;
}

.kind-page .seg a:last-child,
.recent-pages .seg a:last-child {
  border-right: 0;
}

.kind-page .seg a[aria-current],
.recent-pages .seg a[aria-current] {
  background: var(--wash);
  font-weight: 600;
}

.kind-page .controls .toggle {
  margin-left: auto;
  color: var(--muted);
  font-size: var(--text-sm);
}

.kind-page .controls .toggle[aria-current] {
  color: var(--ink);
  font-weight: 600;
}

/* The strip: the statuses, or the links that tell the pages apart. A cell filters. */
.kind-page .strip {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
  overflow: hidden;
}

.kind-page .strip a {
  flex: 1 1 5.5rem;
  display: grid;
  gap: 0.05rem;
  padding: 0.45rem 0.75rem;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-xs);
  text-decoration: none;
}

.kind-page .strip a:last-child {
  border-right: 0;
}

.kind-page .strip b {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kind-page .strip a.quiet b {
  color: var(--muted);
  font-weight: 400;
}

.kind-page .strip a:hover {
  background: var(--wash);
}

.kind-page .strip a[aria-current] {
  background: var(--wash);
  box-shadow: inset 0 -2px 0 var(--ink);
}

/* One line per page, in columns: what it hangs from, its title, its status when the
   grouping does not say it, the members it names, what is under it, what links to it,
   when it was written. */
.kind-page .lines {
  --columns: minmax(0, 1fr) 6.5rem 5rem 3.2rem 3.2rem 4.6rem;
  margin-top: 0.4rem;
}

.kind-page .lines.linked {
  --columns: minmax(6rem, 13rem) minmax(0, 1fr) 6.5rem 5rem 3.2rem 3.2rem 4.6rem;
}

.kind-page .colhead,
.kind-page .entry {
  display: grid;
  grid-template-columns: var(--columns);
  gap: 0.9rem;
  align-items: center;
}

.kind-page .colhead {
  padding: 0.9rem 0 0.25rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.kind-page .group h2 {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin: 1.1rem 0 0;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

.kind-page .entry {
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--text-md);
  text-decoration: none;
}

.kind-page .entry:hover {
  background: linear-gradient(to right, transparent, var(--wash) 6%, var(--wash) 94%, transparent);
}

.kind-page .entry > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kind-page .entry .lead {
  font-weight: 600;
}

.kind-page .r {
  text-align: right;
}

.kind-page .entry .n {
  color: var(--muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.kind-page .entry .n.old {
  color: var(--warn);
}

.kind-page .entry .faces {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
}

.kind-page .entry .status {
  font-size: var(--text-sm);
}

@media (max-width: 720px) {
  .kind-page .lines,
  .kind-page .lines.linked {
    --columns: minmax(0, 1fr) auto;
  }

  .kind-page .colhead {
    display: none;
  }

  .kind-page .entry > .r:not(:last-child) {
    display: none;
  }

  .kind-page .entry .lead {
    grid-column: 1 / -1;
    font-size: var(--text-sm);
  }

  .directory .sentence {
    font-size: 1.1rem;
  }
}

/* What is new: every page by the day its deciding version was written, a line each with
   what it sits under, and who wrote it when. The order is the segmented switch of a
   kind's page; the author and the kind are pills. */
.recent-pages .controls .facets,
.recent-pages .facets.kinds {
  margin-top: 0;
}

.recent-pages .facets.kinds {
  margin-top: 0.7rem;
}

.rows.recent .head,
.rows.recent .row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 13rem) 7rem;
}

.rows.recent .row .quiet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rows.recent .row .when {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
}

.rows.recent .since {
  margin-left: 0.4rem;
  color: var(--muted);
  font-size: var(--text-xs);
}

.rows.recent .new {
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-sm);
  background: var(--mark);
  font-size: var(--text-xs);
}

.rows.recent .agent {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--muted) 35%, var(--sheet));
  flex: none;
}

.recent-pages .more {
  margin-top: 1.2rem;
  color: var(--muted);
  font-size: var(--text-sm);
}

@media (max-width: 640px) {
  .rows.recent .head {
    display: none;
  }

  .rows.recent .row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.1rem;
  }

  .rows.recent .row .quiet {
    grid-row: 2;
  }

  .rows.recent .row .when {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}