/* Reusable pieces: top bar, scroll rail, buttons, drafting primitives, form. */

/* ---------- top bar ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.topbar.is-stuck { border-bottom-color: var(--rule-soft); }
.topbar-inner {
  max-width: 1180px; margin: 0 auto;
  padding: .85rem var(--gutter);
  display: flex; align-items: center; gap: 1.5rem;
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; margin-right: auto;
}
.brand-mark { display: block; width: 22px; height: 22px; flex: none; }
.brand-mark rect { fill: var(--ink); }
.brand-mark .ring { fill: var(--accent); transform-origin: center; transition: transform .5s var(--ease); }
.brand:hover .ring { transform: scaleX(1.18); }
.brand-name {
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .24em;
  font-size: .8125rem; color: var(--ink);
}
.navlinks { display: flex; gap: 1.75rem; }
.navlinks a {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none;
  transition: color .25s var(--ease);
}
.navlinks a:hover { color: var(--ink); }
@media (max-width: 980px) { .navlinks { display: none; } }

.theme-btn {
  appearance: none; border: 1px solid var(--rule); background: transparent;
  color: var(--ink-3); width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.theme-btn:hover { color: var(--ink); border-color: var(--ink-3); transform: rotate(25deg); }
.theme-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.theme-btn .moon { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .moon { display: block; }

/* ---------- the rail: a column assembled course by course as you descend ---------- */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w);
  z-index: 80; display: none;
  padding: 6.5rem 0 2.25rem;
  border-right: 1px solid var(--rule-soft);
  flex-direction: column; align-items: center;
}
@media (min-width: 1180px) { .rail { display: flex; } }
.rail-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 1.5rem; white-space: nowrap;
}
.courses {
  flex: 1; display: flex; flex-direction: column-reverse;
  justify-content: flex-start; gap: 5px; width: 34px;
}
.course {
  flex: 1; min-height: 9px; border: 1px solid var(--rule);
  background: transparent; width: 100%;
  transition: background-color .55s var(--ease), border-color .55s var(--ease), width .55s var(--ease);
}
/* Wider at the bottom: a real column tapers upward. */
.course:nth-child(1) { width: 100%; }
.course:nth-child(2) { width: 93%; }
.course:nth-child(3) { width: 88%; }
.course:nth-child(4) { width: 83%; }
.course:nth-child(5) { width: 79%; }
.course:nth-child(6) { width: 76%; }
.course:nth-child(7) { width: 73%; }
.course:nth-child(8) { width: 71%; }
.course.is-set { background: var(--accent); border-color: var(--accent); }
.rail-count {
  margin-top: 1.5rem; font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: .12em; color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* ---------- buttons ---------- */
.cta-row { display: flex; flex-wrap: wrap; gap: .875rem; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.5rem; text-decoration: none;
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--ink); background: var(--ink); color: var(--bg);
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease);
}
button.btn { cursor: pointer; }
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: transparent; color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.btn[disabled] { opacity: .5; cursor: progress; }
.btn[disabled]:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); transform: none; }
.btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .3s var(--ease); }

/* ---------- drafting primitives, shared by every figure ---------- */
.dw-stone { fill: var(--bg-sunk); stroke: var(--ink); stroke-width: 1.25; }
.dw-joint { fill: var(--bg-sunk); stroke: var(--accent); stroke-width: 1.6; }
.dw-bead  { fill: none; stroke: var(--accent); stroke-width: 1.1; }
.dw-line  { stroke: var(--ink); stroke-width: 1.25; fill: none; }
.dw-thin  { stroke: var(--ink-3); stroke-width: .75; fill: none; }
.dw-dim   { stroke: var(--accent); stroke-width: .85; fill: none; }
.dw-mark  { fill: var(--accent); stroke: none; }
.dw-lead  { stroke: var(--ink-3); stroke-width: .75; fill: none; stroke-dasharray: 3 3; }
.dw-stamp { fill: none; stroke: var(--accent); stroke-width: 1; }
.dw-txt   { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; fill: var(--ink-3); text-transform: uppercase; }
.dw-txt--acc { fill: var(--accent); }
.dw-txt--key { fill: var(--ink); letter-spacing: .2em; }

/* ---------- form ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 620px) { .form { grid-template-columns: 1fr; } }
.field { display: grid; gap: .45rem; }
.field--wide { grid-column: 1 / -1; }
.field .opt { text-transform: none; letter-spacing: .02em; opacity: .75; }
.field input, .field textarea {
  font-family: var(--font-body); font-size: var(--t-sm); line-height: 1.5;
  color: var(--ink); background: var(--bg-raised);
  border: 1px solid var(--rule); border-radius: 0;
  padding: .7rem .85rem; width: 100%;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field textarea:focus { border-color: var(--accent); background: var(--bg); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--ochre); }

/* Honeypot: off-screen for people, tempting to a naive bot. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap;
  align-items: center; gap: 1rem 1.25rem; margin-top: .35rem;
}
.form-status {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.form-status[data-state="ok"]  { color: var(--accent); }
.form-status[data-state="err"] { color: var(--ochre); }
/* The escape hatch offered when the endpoint cannot be reached. */
.form-status a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form-status a:hover { color: var(--accent-lift); }