/* Landing page: laid out as a Unix manual page, CHABI(1). Builds on term.css. */

.page { max-width: 92ch; margin: 0 auto; padding: 0 20px; }

/* tmux-style status line */
.status {
  display: flex; justify-content: space-between; align-items: center; gap: 2ch;
  background: var(--ink); color: var(--paper); padding: 0.3em 20px; font-size: 12.5px; font-weight: 600;
}
.status nav { display: flex; gap: 2.5ch; }
.status a { color: var(--paper); text-decoration: none; }
.status a:hover { background: var(--paper); color: var(--ink); }
.status .here { font-weight: 800; }

/* CHABI(1)    Developer Reference    CHABI(1) */
.manhead, .manfoot {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 2ch; font-size: 13px; letter-spacing: 0.04em;
  padding: 26px 0 0;
}
.manhead span:last-child, .manfoot span:last-child { text-align: right; }
.manfoot { padding: 28px 0 40px; border-top: 1px solid var(--faint); margin-top: 56px; }

/* Sections: bold heading flush left, body indented like man(1) */
.sec { margin-top: 36px; }
.sec > h2 {
  font-size: 13px; font-weight: 800; letter-spacing: 0.1em; margin: 0 0 10px; font-stretch: 100%;
}
.sec > .body { padding-left: 7ch; }
.sec p { margin: 0 0 12px; max-width: 68ch; }

.name { margin: 0 0 18px; }
h1 {
  margin: 0; font-weight: 800; font-stretch: 112.5%; letter-spacing: -0.035em;
  font-size: clamp(30px, 6.4vw, 66px); line-height: 1.02; text-wrap: balance;
}
h1 .inv { background: var(--ink); color: var(--paper); padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* SYNOPSIS code: a gutter of line numbers, comments dimmed */
.code {
  margin: 0; padding: 16px 0; border-top: 1px dashed var(--faint); border-bottom: 1px dashed var(--faint);
  overflow-x: auto; font-size: 13px; line-height: 1.85; counter-reset: ln;
}
.code code { display: block; padding-left: 5ch; position: relative; white-space: pre; }
.code code::before {
  counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 3ch; text-align: right; color: var(--dim);
}
.code .c { color: var(--dim); font-style: italic; }
.code .hl { background: var(--ink); color: var(--paper); }
.note { margin-top: 10px; font-size: 12.5px; }

.ctas { display: flex; flex-wrap: wrap; gap: 2.5ch; align-items: center; margin-top: 22px; }

/* OPTIONS: flag in a fixed column, description beside it */
.opts { margin: 0; display: grid; grid-template-columns: 16ch 1fr; gap: 6px 2ch; }
.opts dt { font-weight: 700; }
.opts dd { margin: 0 0 14px; max-width: 60ch; }

ul.dash { list-style: none; margin: 0 0 18px; padding: 0; }
ul.dash li { padding-left: 3ch; text-indent: -3ch; margin-bottom: 6px; }
ul.dash li::before { content: "-  "; color: var(--dim); }

@media (max-width: 640px) {
  .sec > .body { padding-left: 2ch; }
  .opts { grid-template-columns: 1fr; gap: 0; }
  .opts dd { margin-bottom: 16px; }
  .manhead span:nth-child(2), .manfoot span:nth-child(2) { display: none; }
  .manhead, .manfoot { grid-template-columns: 1fr 1fr; }
  .status nav .opt { display: none; }
}