/* Type weight and size show hierarchy; spacing shows relatedness; rules mark only
   the boundaries between the site frame and the sections of a page. */

:root {
  --text: #1d2125;
  --muted: #5d6670;
  --faint: #8a939c;
  --rule: #d9dee3;
  --surface: #f5f7f9;
  --accent: #1f5fae;
  --warn-surface: #fff6e5;
  --warn: #8a5300;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --measure: 46rem;
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: #fff;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--accent); text-underline-offset: 0.15em; }
a:focus-visible, button:focus-visible, input:focus-visible, iframe:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
code, pre, .path { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.site-inner { max-width: 64rem; margin: 0 auto; padding: 0 var(--space-5); }

/* Site frame */
header.site { border-bottom: 1px solid var(--rule); }
header.site .site-inner {
  display: flex; align-items: center; gap: var(--space-5); min-height: 3.25rem; flex-wrap: wrap;
}
.brand { font-weight: 700; font-size: 1.125rem; color: var(--text); text-decoration: none; }
.site-nav { display: flex; gap: var(--space-4); }
.site-nav a { color: var(--text); text-decoration: none; font-size: 0.9375rem; }
.site-nav a:hover { text-decoration: underline; }
.account { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); font-size: 0.875rem; }
.audience .site-inner { display: block; }
.audience { margin: 0; background: var(--surface); color: var(--muted); font-size: 0.8125rem; line-height: 2; }
main.site-inner { padding-top: var(--space-5); padding-bottom: var(--space-6); }

/* Page and section headings */
h1 { font-size: 1.75rem; line-height: 1.35; margin: 0 0 var(--space-2); }
h2 { font-size: 1.125rem; line-height: 1.4; margin: 0 0 var(--space-3); }
.section { border-top: 1px solid var(--rule); padding-top: var(--space-5); margin-top: var(--space-6); }
main > .section:first-of-type, main > h1.visually-hidden + .section { border-top: 0; padding-top: 0; margin-top: 0; }
.section-note { color: var(--muted); font-size: 0.875rem; margin: 0 0 var(--space-3); }
.empty { color: var(--muted); }
.note { color: var(--warn); font-size: 0.875rem; margin: var(--space-1) 0 0; }
.loading { color: var(--muted); }

.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1); padding: 0; margin: 0 0 var(--space-3); font-size: 0.875rem; }
.breadcrumb li + li::before { content: "/"; color: var(--faint); margin-right: var(--space-1); }
.breadcrumb a { color: var(--muted); }
.breadcrumb [aria-current] { color: var(--text); }

/* Document header: identity, version, people */
.document-header { margin-bottom: var(--space-5); }
.document-header > .path { color: var(--muted); font-size: 0.875rem; margin: 0 0 var(--space-4); word-break: break-all; }
.notice { background: var(--surface); border-radius: 6px; padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); }
.notice p { margin: 0; }
.notice p + p { margin-top: var(--space-1); }
.notice-withdrawn { background: var(--warn-surface); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; font-size: 0.9375rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.person { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.person-id { color: var(--muted); font-size: 0.8125rem; }
.membership { font-size: 0.75rem; padding: 0 var(--space-2); border-radius: 999px; background: var(--surface); color: var(--muted); }
.membership-suspended, .membership-departed, .membership-unknown { background: var(--warn-surface); color: var(--warn); }

/* Lists: items are separated by space, not rules */
.documents, .places, .files, .history, .deletions { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.row-title { font-weight: 600; }
.row-meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); color: var(--muted); font-size: 0.8125rem; }
.files li .row-meta, .history li .row-meta { display: inline-flex; margin-left: var(--space-3); }
.directory-row { display: flex; align-items: baseline; gap: var(--space-3); }
.row-count { color: var(--muted); font-size: 0.8125rem; }
.moved-row { color: var(--muted); font-size: 0.9375rem; }
.tag { font-size: 0.75rem; margin-left: var(--space-2); padding: 0 var(--space-2); border-radius: 999px; background: var(--surface); color: var(--muted); }
.tag-withdrawn { background: var(--warn-surface); color: var(--warn); }
.tag-current { background: #e6eef8; color: var(--accent); }
.history li.current .row-title { color: var(--text); }
.deletions h2 { font-size: 1rem; font-family: ui-monospace, Menlo, monospace; }

/* Body */
.document-body { max-width: var(--measure); }
.viewer { width: 100%; max-width: none; height: 75vh; border: 1px solid var(--rule); border-radius: 6px; }
.document-body:has(.viewer) { max-width: none; }
/* The body is the document's own content: framed like the HTML viewer, with its
   headings demoted below the section headings by the server. */
.markdown, .document-body > .source {
  overflow-wrap: anywhere; border: 1px solid var(--rule); border-radius: 6px; padding: var(--space-5);
}
.document-body > .source { background: none; white-space: pre-wrap; }
.markdown h3 { font-size: 1.375rem; margin-top: var(--space-5); }
.markdown h4 { font-size: 1.1875rem; margin-top: var(--space-5); }
.markdown h5, .markdown h6 { font-size: 1.0625rem; margin-top: var(--space-4); }
.markdown > :first-child { margin-top: 0; }
.markdown table { border-collapse: collapse; display: block; overflow-x: auto; }
.markdown th, .markdown td { border: 1px solid var(--rule); padding: var(--space-1) var(--space-2); }
.markdown pre, .source { background: var(--surface); padding: var(--space-3); border-radius: 6px; overflow-x: auto; font-size: 0.875rem; line-height: 1.55; }
.source { white-space: pre-wrap; overflow-wrap: anywhere; }
.markdown code { font-size: 0.875em; }
.markdown .external::after { content: " ↗"; font-size: 0.8em; }
.unresolved-link { text-decoration: underline dotted; }

/* File source */
.lines { list-style: none; margin: 0; padding: var(--space-3) 0; background: var(--surface); border-radius: 6px; overflow-x: auto; font-size: 0.8125rem; line-height: 1.6; }
.lines li { display: flex; gap: var(--space-3); padding: 0 var(--space-3); }
.line-number { color: var(--faint); min-width: 3.5em; text-align: right; user-select: none; font-family: ui-monospace, Menlo, monospace; }
.lines code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Shares */
.share-mark { font-weight: 600; margin: 0 0 var(--space-3); }
.shares { border-collapse: collapse; font-size: 0.875rem; width: 100%; margin-bottom: var(--space-3); }
.shares th { text-align: left; color: var(--muted); font-weight: 500; }
.shares th, .shares td { padding: var(--space-1) var(--space-3) var(--space-1) 0; }

/* Controls */
button { font: inherit; cursor: pointer; }
button.primary { background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: var(--space-2) var(--space-5); }
button.quiet, button.more { background: none; border: 1px solid var(--rule); border-radius: 6px; padding: 0 var(--space-3); color: var(--text); font-size: 0.875rem; line-height: 1.9; }
button.more { margin-top: var(--space-3); }
button.link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; }
.message, .login { max-width: 32rem; }
.login { margin: 15vh auto 0; padding: 0 var(--space-5); }
.connection code { background: var(--surface); padding: 0 var(--space-2); border-radius: 4px; font-size: 0.875rem; word-break: break-all; }

/* Recipient */
header.site.recipient .brand { font-weight: 600; font-size: 1rem; }
.recipient-main { max-width: 64rem; }
.recipient-form { display: grid; gap: var(--space-2); max-width: 24rem; margin-top: var(--space-4); }
.recipient-form label { font-weight: 600; }
.recipient-form input { font: inherit; padding: var(--space-2) var(--space-3); border: 1px solid #b8c0c8; border-radius: 6px; }
.recipient-form button { justify-self: start; }

@media (max-width: 40rem) {
  .site-inner { padding: 0 var(--space-4); }
  .account { margin-left: 0; width: 100%; padding-bottom: var(--space-2); }
  .facts { grid-template-columns: 1fr; }
  .facts dd { margin-bottom: var(--space-2); }
  .files li .row-meta, .history li .row-meta { display: flex; margin-left: 0; }
  .markdown { padding: var(--space-4); }
  .shares thead { display: none; }
  .shares tr { display: block; border-top: 1px solid var(--rule); padding: var(--space-2) 0; }
  .shares td { display: grid; grid-template-columns: 6rem 1fr; padding: 0; }
  .shares td::before { content: attr(data-label); color: var(--muted); }
}