/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Design tokens ──────────────────────────────────────────── */
:root {
  --bg:      #faf9f7;
  --text:    #1c1c1c;
  --muted:   #6b6b6b;
  --border:  #e0ded9;
  --link:    #1a4c8a;
  --link-hover: #0f2f5a;
  --badge-contribution-bg:   #fff3cd;
  --badge-contribution-text: #7a5200;
  --badge-resource-bg:       #dbeafe;
  --badge-resource-text:     #1e3a8a;
  --badge-pdf-bg:            #d1fae5;
  --badge-pdf-text:          #065f46;
  --max-width: 720px;

  /* Nav: the tint a pulled-open second row is printed on, and the dotted
     rule that marks a label as having one. Both are one step off the page. */
  --nav-drawer: #f2efe9;
  --nav-dot:    #c3bdb2;
}

/* ─── Base ───────────────────────────────────────────────────── */
body {
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  padding: 0 1.5rem;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

/* ─── Site chrome: header + nav form one visual block ─────────── */

header {
  max-width: var(--max-width);
  margin: 2.75rem auto 0;   /* no bottom margin — nav attaches directly */
  padding-bottom: 0.85rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

header h1 {
  font-size: 1.5rem;
  font-weight: normal;
  letter-spacing: -0.02em;
}

.tagline {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: var(--muted);
}

.submit-link {
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  background: var(--text);
  color: var(--bg);
  padding: 0.3rem 0.7rem;
  border-radius: 3px;
  white-space: nowrap;
}
.submit-link:hover { background: #333; color: var(--bg); text-decoration: none; }

/* Nav sits immediately below the header title row, shares the same
   max-width box, and carries the border that separates chrome from content.

   Two rows, one slot. The bar names five places; each place that holds more
   than one page keeps its own second row, and every second row is drawn in
   the same slot directly under the bar. A dotted rule under a label says
   "there is a row under this one"; the rule turns solid when the row is out,
   so the hairline the nav sits on appears to travel down with the drawer.
   On the wiki that slot is already occupied — the wiki's own row is the Wiki
   group standing permanently open (see wiki.css) — so the site never stacks
   two competing navigations.

   Mechanics are CSS only: hover and :focus-within where a pointer can hover,
   and an explicit disclosure control driving :target where it cannot. Both
   work with JavaScript switched off. */
.sitenav {
  max-width: var(--max-width);
  margin: 0 auto 0;          /* zero top and bottom — spacing handled below */
  border-bottom: 1px solid var(--border);
  font-family: system-ui, sans-serif;
  font-size: 0.79rem;
  letter-spacing: 0.01em;
}

.sitenav a { color: var(--muted); text-decoration: none; }
.sitenav a:hover { color: var(--text); text-decoration: none; }
.sitenav a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 1px;
}

/* The bar is the positioning context, so every row hangs from the bar's
   bottom edge — the same place whether the bar sits on one line or two. */
.nav-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  list-style: none;
}

/* Each item fills the bar's full height, so travelling from a label down to
   its row never crosses dead space and closes it. */
.nav-item {
  position: static;
  display: flex;
  align-items: center;
  padding: 0.5rem 0 0.6rem;
}

.nav-label { display: inline-block; }
.nav-item.has-row > .nav-label {
  border-bottom: 1px dotted var(--nav-dot);
}
.nav-item.is-current > .nav-label {
  color: var(--text);
  border-bottom: 2px solid var(--text);
}

/* ─── The second row ─────────────────────────────────────────── */

.nav-row {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  margin: 0 -0.9rem;        /* the drawer bleeds a little past the column */
  padding: 0.5rem 0.9rem 0.55rem;
  font-size: 0.75rem;
  background: var(--nav-drawer);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 18px rgba(28, 28, 28, 0.07);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s ease, visibility 0s linear 0.12s;
}
.nav-row a { color: #5f5a51; }
.nav-row a:hover { color: var(--text); }

/* Keyboard focus opens a row everywhere; so does the disclosure control,
   which is the whole mechanism on a screen that cannot hover. */
.nav-item:focus-within > .nav-row,
.nav-item:target > .nav-row {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.nav-item:focus-within > .nav-label { color: var(--text); border-bottom-style: solid; }

/* The disclosure control: two chevrons in one place, one opening the row and
   one closing it again, so the second tap lands where the first one did.
   Hidden wherever a pointer can hover, because there hovering does the job. */
.nav-open,
.nav-shut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 1.9rem;
  /* A 44px-tall target that costs no height: the negative margins hand the
     overflow back to the bar's own padding. */
  height: 2.75rem;
  margin-block: -0.66rem;
  color: var(--muted);
}
.nav-shut { display: none; }
.nav-open i,
.nav-shut i {
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
.nav-open i { transform: translateY(-1px) rotate(45deg); }
.nav-shut i { transform: translateY(1px) rotate(-135deg); }
.nav-item:target > .nav-open { display: none; }
.nav-item:target > .nav-shut { display: inline-flex; color: var(--text); }
.nav-item:target > .nav-label { color: var(--text); border-bottom-style: solid; }

@media (hover: hover) and (pointer: fine) {
  .nav-open,
  .nav-item:target > .nav-shut { display: none; }
  /* A stray #fragment must not pin a row open under a mouse. */
  .nav-item:target > .nav-row { visibility: hidden; opacity: 0; }
  .nav-item:hover > .nav-row,
  .nav-item:focus-within > .nav-row {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
  .nav-item:hover > .nav-label { color: var(--text); border-bottom-style: solid; }
}

@media (hover: none) {
  .nav-item { padding: 0.62rem 0 0.7rem; }   /* room for a finger */
  .nav-bar { gap: 0 1.15rem; }
  .nav-row { gap: 0.45rem 1.2rem; padding: 0.6rem 0.9rem 0.65rem; }
}

@media (max-width: 420px) {
  .nav-bar { gap: 0 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-row { transition: none; }
}

@media print {
  .nav-row, .nav-open, .nav-shut { display: none; }
}

/* ─── Content containers ─────────────────────────────────────── */

main {
  max-width: var(--max-width);
  margin: 2rem auto 5rem;
}

.form-wrap {
  max-width: var(--max-width);
  margin: 2rem auto 5rem;
}

/* ─── Blurb ──────────────────────────────────────────────────── */

.blurb {
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
}

.blurb p {
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 0.85rem;
  color: #2a2a2a;
}
.blurb p:last-child { margin-bottom: 0; }

/* ─── Article list ───────────────────────────────────────────── */

.articles { list-style: none; }

.article {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
}
.article:last-child { border-bottom: none; }

.article-title {
  font-size: 1.05rem;
  font-weight: normal;
  line-height: 1.4;
}
.article-title a { color: var(--text); }
.article-title a:hover { color: var(--link); text-decoration: none; }

.article-meta {
  font-family: system-ui, sans-serif;
  font-size: 0.73rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}

.badge {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.38rem;
  border-radius: 2px;
}
.badge-contribution { background: var(--badge-contribution-bg); color: var(--badge-contribution-text); }
.badge-resource     { background: var(--badge-resource-bg);     color: var(--badge-resource-text); }
.badge-pdf          { background: var(--badge-pdf-bg);          color: var(--badge-pdf-text); text-decoration: none; }

.article-description {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 0.3rem;
  line-height: 1.55;
}

.empty-state {
  padding: 3rem 0;
  color: var(--muted);
  font-style: italic;
  font-size: 0.93rem;
}

.not-registered-panel {
  background: #fdf6ec;
  border: 1px solid #f0ddb8;
  border-radius: 4px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.not-registered-panel h2 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.not-registered-panel p  { color: var(--muted); margin-bottom: 0.75rem; font-size: 0.93rem; }
.btn-join {
  display: inline-block;
  background: var(--text);
  color: var(--bg);
  padding: 0.45rem 1rem;
  border-radius: 3px;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}
.btn-join:hover { background: #333; color: var(--bg); text-decoration: none; }
.field-hint { font-size: 0.78rem; color: var(--muted); margin-top: 0.25rem; }

.private-library { margin-top: 3rem; }
.private-library-heading {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

/* ─── Sort controls ──────────────────────────────────────────── */

.sort-controls {
  font-family: system-ui, sans-serif;
  font-size: 0.73rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.sort-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.1rem 0.38rem;
  font-size: 0.71rem;
  font-family: system-ui, sans-serif;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s;
}
.sort-btn:hover { border-color: var(--muted); color: var(--text); }
.sort-btn.active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ─── Theory page ────────────────────────────────────────────── */

.theory h2 {
  font-size: 1.05rem;
  font-weight: normal;
  margin: 2rem 0 0.55rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.theory h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.theory p {
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 0.85rem;
  color: #2a2a2a;
}
.theory p:last-child { margin-bottom: 0; }

.theory-list {
  margin: 0.4rem 0 1rem 1.2rem;
}
.theory-list li {
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 0.45rem;
  color: #2a2a2a;
}

/* ─── Contributors ───────────────────────────────────────────── */

.contributors-list { list-style: none; }

.contributor {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
}
.contributor:last-child { border-bottom: none; }

.contributor-name { font-size: 1rem; color: var(--text); }

.contributor-handle {
  font-family: system-ui, sans-serif;
  font-size: 0.73rem;
  color: var(--muted);
}

.contributor-site {
  font-family: system-ui, sans-serif;
  font-size: 0.73rem;
  color: var(--link);
}
.contributor-site:hover { color: var(--link-hover); text-decoration: underline; }

.contributor-bio {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: var(--muted);
  width: 100%;
  margin-top: 0.1rem;
}

/* ─── Submit page welcome greeting ──────────────────────────── */

.welcome-greeting {
  font-size: 0.9rem;
  font-family: system-ui, sans-serif;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.profile-link {
  font-size: 0.8rem;
  margin-left: 0.6rem;
  color: var(--link);
}
.profile-link:hover { color: var(--link-hover); text-decoration: underline; }

/* ─── Profile page ───────────────────────────────────────────── */

input[readonly] {
  background: var(--bg);
  color: var(--muted);
  cursor: default;
  border-color: var(--border);
}
input[readonly]:focus { outline: none; border-color: var(--border); }

.form-note {
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 1rem;
}

/* ─── Devlog ─────────────────────────────────────────────────── */

.devlog-intro {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.devlog-entry {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}
.devlog-entry:last-child { border-bottom: none; }

.devlog-meta {
  font-family: system-ui, sans-serif;
  font-size: 0.73rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.devlog-entry p {
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 0.6rem;
  color: #2a2a2a;
}
.devlog-entry p:last-child { margin-bottom: 0; }

.devlog-entry code {
  font-family: 'Courier New', monospace;
  font-size: 0.85em;
  background: #f0ede8;
  padding: 0.1em 0.3em;
  border-radius: 2px;
}

/* ─── Forms ──────────────────────────────────────────────────── */

.form-wrap h2 {
  font-size: 1.15rem;
  font-weight: normal;
  margin-bottom: 0.4rem;
}

.form-wrap .form-intro {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 2rem;
  line-height: 1.65;
}

.field { margin-bottom: 1.2rem; }

label {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 0.79rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--text);
}
label .optional { font-weight: normal; color: var(--muted); }

input[type="url"],
input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fff;
  color: var(--text);
  font-family: system-ui, sans-serif;
  font-size: 0.88rem;
  line-height: 1.4;
  appearance: none;
  transition: border-color 0.1s;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--link);
  outline-offset: 1px;
  border-color: var(--link);
}

textarea { resize: vertical; min-height: 80px; }

.select-wrap { position: relative; }
.select-wrap::after {
  content: '▾';
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
  font-size: 0.75rem;
}

button[type="submit"] {
  font-family: system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  background: var(--text);
  color: var(--bg);
  border: none;
  padding: 0.55rem 1.4rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.1s;
}
button[type="submit"]:hover { background: #333; }
button[type="submit"]:disabled { opacity: 0.5; cursor: default; }

.form-message {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  margin-top: 1rem;
  padding: 0.55rem 0.75rem;
  border-radius: 3px;
  display: none;
}
.form-message.success { background: #d1fae5; color: #065f46; display: block; }
.form-message.error   { background: #fee2e2; color: #991b1b; display: block; }