/* Ubuntu Mono, self-hosted (Ubuntu Font License).
   Content-driven subsets generated by `scripts/optimize-fonts.py`:
   each WOFF2 contains exactly the codepoints rendered on the site.
   No `unicode-range` split is needed — the subsets are already
   minimal, and `check-fonts.py` gates the build to ensure coverage.

   This file is processed by Hugo as a template (resources.Get +
   ExecuteAsTemplate in layouts/_default/baseof.html). The `?h=<HASH>`
   query-param appended to each font URL is the first 10 chars of the
   SHA-256 of the woff2 bytes — same scheme as redkaos.net. When a
   subset changes, the hash changes, the URL changes, the browser
   re-fetches. No filename rename, no extra HTTP cost. */





@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/style/fonts/ubuntu-mono-regular.woff2?h=23c756c419') format('woff2');
}

@font-face {
  font-family: 'Ubuntu Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/style/fonts/ubuntu-mono-italic.woff2?h=7cc01ac39f') format('woff2');
}

@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/style/fonts/ubuntu-mono-bold.woff2?h=3769882a1e') format('woff2');
}

/* Kubuntu Breeze palette. */
:root {
  --bg: #232627;
  --text: #fcfcfc;
  --muted: #a1a9b1;
  --rule: #3a3e40;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font: 16px 'Ubuntu Mono', monospace;
}

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

a:hover {
  text-decoration: underline;
}

#header {
  border-bottom: 1px solid var(--rule);
  text-align: right;
}

#header h1 {
  float: left;
  margin: 7px 10px;
  background-color: var(--bg);
  color: var(--text);
  font-size: 24px;
}

#header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 18px;
}

#header li {
  width: 200px;
  display: inline-block;
  border-left: 1px solid var(--rule);
  padding: 10px 0;
  text-align: center;
}

#header .breadcrumb div {
  display: inline;
}

#header .last {
  width: 250px;
}

#main {
  position: relative;
  border-bottom: 1px solid var(--rule);
}

#content {
  position: relative;
  margin-right: 250px;
  border-right: 1px solid var(--rule);
}

.home #content {
  margin-right: auto;
  border-right-style: none;
}

#text {
  padding: 10px;
  background-color: var(--bg);
  color: var(--text);
}

div.left {
  position: absolute;
  left: 10px;
}

div.right {
  position: absolute;
  right: 10px;
}

div.center {
  text-align: center;
}

h2 {
  margin: 0;
  padding: 10px 0 5px 0;
  font-size: 16px;
  color: var(--text);
}

h2 a {
  color: var(--text);
}

h2 a:hover {
  text-decoration: none;
}

p, dl, dd {
  margin: 0;
  padding: 0 0 0 55px;

}

#content ul {
  margin: -18px 0 10px;
  padding: 0 0 0 55px;
  list-style: none;
}

#content li {
  margin: 0;
  padding: 0 0 0 55px;
  text-indent: -15px;
}

dt {
  margin: 0;
  padding: 5px 0;
}

dt.oneline {
  float: left;
}

p, dd {
  padding-bottom: 10px;
}

dd.oneline {
  padding-top: 5px;
}

dd.paragraph {
  padding: 0;
}

strong {
  font-weight: bold;
  color: var(--text);
}

em {
  font-style: normal;
  text-decoration: underline;
}

kbd {
  display: block;
  padding: 10px  0 10px 55px;
}

h3 {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: var(--text);
}

#foot {
  margin-top: 5px;
}

#comments {
  border-top: 1px solid var(--rule);
  padding: 10px 10px 0;
}

#comments div.comment p {
  padding: 0;
}

#comments div.comment p.date {
  float: right;
}

#comments div.comment p.name {
  background-color: var(--bg);
  color: var(--text);
  text-transform: uppercase;
  font-weight: bold;
}

#comments div.comment p.name a {
  background-color: var(--bg);
  color: var(--text);
}

#comments div.comment p.text {
  padding: 5px 0 10px 55px;
}

#new-comment {
  margin: 0;
  padding: 10px;
  border-top: 1px solid var(--rule);
}

#new-comment fieldset {
  margin: 0;
  border-style: none;
  padding: 0;
}

#new-comment legend {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--text);
  text-transform: uppercase;
  font-weight: bold;
}

#new-comment legend a {
  background-color: var(--bg);
  color: var(--text);
  text-decoration: none;
}

#new-comment div {
  width: 430px;
  margin: 0 auto;
  text-align: right;
}

#new-comment p {
  margin: 0;
  padding: 0 0 10px 0;
}

#new-comment .answer {
  margin-left: -30px;
  background-color: var(--bg);
  color: var(--text);
}

#new-comment label {
  display: inline-block;
  padding: 5px;
  vertical-align: top;
  background-color: var(--bg);
  color: var(--text);
}

#new-comment input, #new-comment textarea {
  width: 330px;
  border: 1px solid var(--rule);
  padding: 5px;
  background-color: var(--bg);
  color: var(--text);
}

#new-comment .button {
  padding: 0;
}

#new-comment .button input {
  width: auto;
  cursor: pointer;
}

#new-comment .button input:hover {
  background-color: var(--bg);
  color: var(--text);
}

#new-comment .spm {
  display: none;
}

#commands {
  padding: 10px;
}

#commands h2 {
  padding-bottom: 5px;
  background-color: var(--bg);
  color: var(--text);
  text-transform: uppercase;
  font-size: 14px;
}

#commands dl {
  margin: 0;
  padding: 0 0 0 55px;

}

#commands dl dt {
  float: left;
  margin: 0;
  padding: 0;
}

#commands dl dd {
  margin: 0;
  padding: 0 0 0 200px;
}

#commands dl .even, #commands dl .even a {
  color: var(--muted);
}

#commands dl .odd, #commands dl .odd a {
  color: var(--text);
}

#menu {
  position: absolute;
  top: 0;
  right: 0;
  width: 250px;
  border-left: 1px solid var(--rule);
  background-color: var(--bg);
}

#menu p.title {
  margin: 0;
  padding: 10px 0 5px 10px;
  background-color: var(--bg);
  color: var(--text);
  text-transform: uppercase;
  font-weight: bold;
}

#menu p.title a {
  background-color: var(--bg);
  color: var(--text);
}

#menu ul {
  margin: 0;
  padding: 0 0 10px 30px;
  list-style: none;
}

#menu ul li {
  background-color: var(--bg);
  color: var(--text);
}

#rating {
  border-bottom: 1px solid var(--rule);
}

#rating .stars {
  position: relative;
  margin: 0 0 0 25px;
  font-size: 30px;
}

#rating .stars .base {
  z-index: 2;
  position: relative;
  display: inline-block;
}

#rating .stars .average, #rating .stars .review {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

#rating .stars .average {
  width: 0;
}

#rating .stars .review {
  color: var(--text);
  width: 0;
}

#rating .text {
  margin: 0 0 10px 30px;
}

#rating .text .command {
  display: none;
}

#nav {
  /* border-bottom: 1px solid var(--rule); */
}

#menu .gas {
  width: 250px;
  height: 250px;
  border-bottom: 1px solid var(--rule);
}

#menu .gs {
  border-bottom: 1px solid var(--rule);
}

#menu .gs form {
  margin: 0 10px 10px 30px;
}

#footer {
  padding: 10px;
  text-align: center;
}

.self .section {
  border-bottom: 1px solid var(--rule);
}

.self form, .self fieldset {
  margin: 0;
  padding: 0 5px 0 0;
  border-style: none;
  text-align: right;
}

/* ════════════════════════════════════════════════════════════════════
   Modern chrome (added 2026-04 — see redkaos.net/IDENTITY.md)

   Wraps the existing legacy markup in:
     <div class="page">
       <div class="topbar">… breadcrumb + TOC + #rating …</div>
       <main>
         <article class="manpage">… legacy #head + #body + #foot …</article>
         <div id="comments">…</div>
         <form id="new-comment">…</form>
       </main>
       <footer class="copy">~$ desde el 2010_ + π</footer>
     </div>

   The internal block-level CSS for the man-page body (h2, dl/dt/dd,
   strong, em, p, etc.) is unchanged from the legacy rules above so
   the page renders the same. Only the wrappers (#header, #main,
   #content, #text, #menu, body > #footer) are bypassed and hidden.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --accent: #11D116;
  --panel: #1a1d1e;
}

html, body {
  min-height: 100vh;
  min-height: 100dvh;
}

body {
  display: flex;
  flex-direction: column;
}

/* --- Page wrapper ------------------------------------------------- */

.page {
  box-sizing: border-box;
  max-width: 84ch;
  margin: 0 auto;
  padding: 3em 1em 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  /* Containing block for the LuCAS-cohort `#navarea` panel: it's
     position-absolute when the toggle is on, anchored to the topbar
     coordinates below. The navarea lives inside `<main>` in the DOM
     but is repainted on top of `.page` via absolute positioning. */
  position: relative;
}


/* --- Top bar: breadcrumb + TOC on the left, rating on the right --- */

.topbar {
  width: 80ch;
  max-width: 100%;
  margin: 0 auto 2em;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2em;
  flex-wrap: wrap;
}

.topbar-left {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  align-self: center;
}

.topbar .breadcrumb {
  font-size: 0.85em;
  color: var(--muted);
  margin: 0;
}

.topbar .breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.topbar .breadcrumb a:hover { color: var(--accent); }

.topbar .breadcrumb .sep {
  color: var(--rule);
  margin: 0 0.5em;
}

.topbar .breadcrumb .here {
  color: var(--accent);
}

/* TOC dropdown — overlays when open, doesn't push content */

.toc {
  position: relative;
  font-size: 0.85em;
}

/* Lowercase the entire dropdown — Section::t() registers names already
   uppercased (NOMBRE, SINOPSIS, …) for terminal fidelity in the <h2>s
   of the manpage body. The chrome TOC must echo the redkaos shell
   aesthetic, so we lowercase it here without touching the registry. */
.toc {
  text-transform: lowercase;
}

.toc summary {
  cursor: pointer;
  list-style: none;
  padding: 0;
  color: var(--text);              /* visible at rest — invites the click */
  letter-spacing: 0.05em;
}

.toc summary::-webkit-details-marker { display: none; }

/* Terminal-style toggle indicator [+] / [−] in muted/accent.
   Matches the redkaos shell aesthetic better than ▸/▾. */
.toc summary::before {
  content: "[+] ";
  color: var(--muted);
}

.toc[open] summary::before {
  content: "[−] ";
  color: var(--accent);
}

.toc summary:hover,
.toc summary:hover::before {
  color: var(--accent);
}

.toc ul {
  position: absolute;
  top: calc(100% + 0.4em);
  left: 0;
  margin: 0;
  padding: 0.6em 1em;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 2px;
  list-style: none;
  min-width: 22ch;
  z-index: 10;
}

.toc li { padding: 0.15em 0; }
.toc a { color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--accent); }

/* --- Rating: relocated from the legacy sidebar to the topbar.
       Internal markup (#rating > .stars overlay + .text) and the
       legacy rating CSS (under "Kubuntu Breeze palette") are untouched
       so rating.js keeps working as is. We only override placement. --- */

.topbar #rating {
  text-align: right;
  border-bottom: 0;
}

.topbar #rating .stars {
  display: inline-block;       /* shrink to fit so the 3 overlays superpose correctly
                                  (the legacy sidebar didn't need this — it was already
                                  inside a 250px-wide column with text-align: left) */
  margin: 0;
  line-height: 1;              /* trim the vertical hover area to the glyph height */
  /* keep the legacy 30px font-size so rating.js's width() math is happy */
}

/* On hover, hide the average overlay so the green review covers cleanly
   without the white antialiased fringe of the average bleeding through. */
.topbar #rating .stars:hover .average {
  visibility: hidden;
}

.topbar #rating .text {
  margin: 0.2em 0 0;
  font-size: 0.85em;
  color: var(--muted);
}

.topbar #rating .text .average { color: var(--text); }
.topbar #rating .text .command { display: none; }

/* In the legacy sidebar both .average and .review are --text, which makes
   the hover feedback indistinguishable from the resting average. In the
   modern chrome we paint the .review (hover/vote overlay) in --accent so
   the user sees clearly what they would be voting. We also raise its
   z-index above the .base (legacy z=2) so the green covers the empty
   ☆ outlines instead of leaking the white border through. */
.topbar #rating .stars .review {
  color: var(--accent);
  z-index: 3;
}

/* With .review now above .base in stacking, mouse events would land on
   .review and never reach .base — but rating.js's mousemove handler is
   bound to .base. pointer-events: none on the overlays makes events
   fall through to .base, restoring stable hover tracking. */
.topbar #rating .stars .average,
.topbar #rating .stars .review {
  pointer-events: none;
}

/* --- Manpage box: 80ch terminal embedded in the page ------------- */

.manpage {
  box-sizing: border-box;
  width: 80ch;
  max-width: 100%;
  margin: 0 auto 2em;
  padding: 2ch;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow-wrap: break-word;
  /* Scale font so ch tracks the compressed width on narrow viewports.
     Reaches 1rem at ~672px (the point where 80ch fills .page). */
  font-size: clamp(0.75rem, 2.4vw, 1rem);
}

/* Body indentation: 7ch = the standard terminal indent column (≈55px
   at 1rem). min(7ch, 7vw) keeps the terminal value on wide viewports
   and scales down smoothly on narrow ones (crossover at ~800px). */
.manpage p,
.manpage dl,
.manpage dd,
.manpage kbd {
  padding-left: min(7ch, 7vw);
}


/* #head / #foot: three-column row. The legacy absolute positioning
   works at 80ch but collapses at narrow widths — replace with flex.
   gap: 1ch separates the three columns. font-size inherits from
   .manpage (already clamped), so no separate scale needed here. */
/* Two layouts depending on viewport width, both rendering the same
   three-column head/foot box but with different centring semantics:

   - Narrow (default, < 600px): flex space-between. The .center text
     centres within the LEFTOVER space between .left and .right. When
     the box is tight this looks balanced because the lateral content
     is right up against the edges.

   - Wide (≥ 600px): grid `1fr auto 1fr` so .center lands at the
     GEOMETRIC centre of the box. The default flex centring would
     look noticeably off-centre when there's room to breathe — the
     text would sit nearer the longer lateral.

   The breakpoint is informed by the manpage's body content: the
   terminal box itself goes responsive around the same width. */
.manpage #head,
.manpage #foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1ch;
}
.manpage #head div,
.manpage #foot div {
  white-space: nowrap;
  min-width: 0;
  /* Override the legacy global `div.left { position: absolute }` /
     `div.right { position: absolute }` rules near the top of this
     stylesheet — those are for LuCAS-era pages with sibling .left/
     .right/.center divs that float to the page edges. Inside our
     #head/#foot boxes we want them to flow normally. */
  position: static;
}
.manpage #head div.left,
.manpage #head div.right,
.manpage #foot div.left,
.manpage #foot div.right {
  flex-shrink: 0;
}
.manpage #head div.center,
.manpage #foot div.center {
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 600px) {
  /* Wide viewport: grid with explicit columns. .left and .right are
     `1fr` so the two side columns are always equal in width, putting
     the `auto` middle column at the real centre regardless of
     content length. Explicit grid-column on each child guards
     against auto-flow surprises. */
  .manpage #head,
  .manpage #foot {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .manpage #head div.left,
  .manpage #foot div.left {
    grid-column: 1;
    justify-self: start;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .manpage #head div.center,
  .manpage #foot div.center {
    grid-column: 2;
    justify-self: center;
    flex: none;
    text-align: initial;
    overflow: visible;
  }
  .manpage #head div.right,
  .manpage #foot div.right {
    grid-column: 3;
    justify-self: end;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.manpage #foot { margin-top: 1em; }

/* --- Footer (shell prompt + π) ----------------------------------- */

@keyframes blink { 50% { opacity: 0; } }

.prompt { color: var(--accent); }
.cursor { color: var(--accent); animation: blink 1s step-end infinite; }

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}

footer.copy {
  /* See the .manpage #head/#foot comment above for the rationale.
     Narrow viewport → flex space-between (centred-in-leftover).
     Wide viewport → grid (geometric centre). */
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--muted);
  letter-spacing: 0.05em;
  border-top: 1px solid var(--rule);
  margin-top: 2em;
  padding-top: 1.5em;
  padding-left: max(1.5em, env(safe-area-inset-left));
  padding-right: max(1.5em, env(safe-area-inset-right));
  padding-bottom: max(1em, env(safe-area-inset-bottom));
}

footer.copy > p {
  flex: 1;
  text-align: center;
  margin: 0.4em 0;
  /* The prompt is the only footer child that is a <p>; the license
     and π are <a>. The legacy man-page body rule
     `p, dd { padding-bottom: 10px }` therefore hits only the prompt,
     adding asymmetric space below the text so the glyphs sit above
     the row's optical centre and read as higher than the siblings.
     Reset it so the prompt shares their baseline. */
  padding: 0;
}

@media (min-width: 600px) {
  footer.copy {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  footer.copy > a.license { grid-column: 1; justify-self: start; }
  footer.copy > p         { grid-column: 2; justify-self: center; flex: none; text-align: initial; }
  footer.copy > a.pi      { grid-column: 3; justify-self: end; }
}

/* `a.license` mirrors the rule in index.css. Until this PoC manpages
   had no per-page license link, so the rule was absent from man.css.
   Now that each cohort renders its own license link on the left of
   footer.copy, the styling has to match the index pages. */
a.license {
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 1em;
  line-height: 1;
}

a.license:hover { color: var(--accent); }

a.pi {
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 1em;
  line-height: 1;
}

/* --- Comments + new-comment form: align with the modern chrome.
       Legacy CSS targets #comments / #new-comment unscoped, so we
       override per selector when they live inside <main>. The rating
       and the man-page body keep their legacy look. ------------ */

main > #comments {
  width: 80ch;
  max-width: 100%;
  margin: 0 auto 2em;
  padding: 0;
  border-top: 0;
}

main > #comments .comment {
  border-top: 1px solid var(--rule);
  padding: 1em 0;
}

main > #comments .comment p { padding: 0; }

main > #comments .comment p.date {
  float: right;
  color: var(--muted);
  font-size: 0.85em;
}

main > #comments .comment p.name {
  font-weight: 700;
  color: var(--text);
  text-transform: lowercase;
  letter-spacing: 0.05em;
}

main > #comments .comment p.name a {
  color: var(--text);
}

main > #comments .comment p.name a:hover {
  color: var(--accent);
}

main > #comments .comment p.text {
  padding: 0.4em 0 0;
}

main > #new-comment {
  width: 80ch;
  max-width: 100%;
  margin: 0 auto 2em;
  padding: 1em 0;
  border-top: 1px solid var(--rule);
}

main > #new-comment fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

main > #new-comment legend {
  font-size: 0.85em;
  font-weight: normal;
  color: var(--muted);
  text-transform: lowercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.6em;
  padding: 0;
}

main > #new-comment legend a {
  color: var(--muted);
  text-decoration: none;
}

main > #new-comment div {
  width: auto;
  margin: 0;
  text-align: left;
}

main > #new-comment p {
  margin: 0 0 0.6em;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 0.6em;
}

main > #new-comment label {
  flex: 0 0 9ch;               /* fits the longest label ("mensaje:") so inputs all start at the same x */
  padding: 0;
  font-size: 0.85em;
  color: var(--muted);
}

main > #new-comment input[type="text"],
main > #new-comment textarea {
  /* width: 100% + min-width: 0 + flex 1 1 auto overrides the legacy
     `width: 330px` AND the HTML `size="32"` / `cols="32"` attrs, so all
     fields end up the same width regardless of input or textarea. */
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  box-sizing: border-box;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  padding: 0.4em 0.6em;
}

main > #new-comment input[type="text"]:focus,
main > #new-comment textarea:focus {
  outline: none;
  border-color: var(--accent);
}

main > #new-comment .answer {
  margin: 0;
  color: var(--accent);
  font-size: 0.85em;
}

main > #new-comment .button {
  justify-content: flex-end;
  gap: 0.6em;
}

main > #new-comment .button input {
  flex: 0 0 auto;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: inherit;
  font-size: 0.85em;
  padding: 0.4em 1em;
  border-radius: 2px;
  cursor: pointer;
  text-transform: lowercase;
  letter-spacing: 0.05em;
}

main > #new-comment .button input:hover {
  background: var(--accent);
  color: var(--bg);
}

/* --- Hide the legacy chrome that the rewrite replaces ------------ */

#header,
#main > #menu,
body > #footer {
  display: none;
}

/* --- LuCAS pages: surface the man2html-emitted `<div id="navarea">`
       (which sits at the bottom of the byte-frozen legacy body) as
       the `<details class="toc">` dropdown's open panel — no DOM
       mutation, no duplication.

       Mechanic:
       - `toc.html` emits an EMPTY `<details class="toc"><summary>`
         in the topbar for legacy pages — the same shell as modern,
         so the close-on-outside JS in baseof.html works unchanged.
       - The body's `<div id="navarea">` is hidden by default and
         re-shown + repositioned over the topbar via `.page:has(.toc[open])`.
       - `:has()` (Baseline 2023) lets us probe across siblings:
         when the topbar's `<details>` flips `[open]`, the body's
         navarea reveals itself. */

article.manpage--legacy #navarea {
  display: none;
}

.page:has(.toc[open]) article.manpage--legacy #navarea {
  display: block;
  position: absolute;
  /* Anchor under the `.toc` summary in the topbar. The `.page` is
     the containing block (position: relative above). Vertical
     and horizontal values tuned to match the modern panel's
     `top: calc(100% + 0.4em); left: 0` opened position. */
  top: 6.8em;
  left: 1.2em;
  margin: 0;
  padding: 0.6em 1em;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: 0.85em;
  min-width: 22ch;
  z-index: 10;
  /* Mirror the modern `.toc` lowercase aesthetic — the body
     `<h2>` text (`NOMBRE`, `SINOPSIS`, …) stays uppercase in
     the page itself, but the dropdown reads `nombre`,
     `sinopsis`, … like prod's shell prompt feel. */
  text-transform: lowercase;
}

article.manpage--legacy #navarea dl {
  margin: 0;
  padding: 0;
}

article.manpage--legacy #navarea dt {
  padding: 0.15em 0;
}

article.manpage--legacy #navarea a {
  color: var(--text);
  text-decoration: none;
}

article.manpage--legacy #navarea a:hover {
  color: var(--accent);
}