/* hashcat.net type system.
 *
 * One sans, one monospace, six sizes, two line heights. Everything on the site
 * picks from this list and nothing invents its own value. The point is that a
 * paragraph, a list item, a table cell and a link are the same size whether the
 * reader is on the front page, the wiki or the forum.
 *
 * Why 13px is the base. The site already mostly lives there: the forum renders
 * its links and table cells at 13px and the wiki renders paragraphs at 12.8px.
 * Only the front page moves, from 15px, and it moves denser, which is the
 * direction this site wants. Nothing has to grow to match.
 *
 * Density is the constraint, not a preference. Line spacing is 1.45 rather than
 * the 1.5 the front page had, because the extra space read as wrong on a page
 * whose job is to be scanned.
 *
 * Two sizes are derived from content rather than chosen, and both are load
 * bearing. Do not fold them into the scale:
 *   10px  the algorithm columns, 55 characters of monospace in a 347px column
 *   11px  the signing key, a 132 character string that cannot break, in 718px
 */

:root
{
  /* One of each. The forum currently uses four different sans stacks and the
     wiki a fifth, which is most of why the site does not feel like one site. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;

  /* The scale. Absolute px on purpose: the wiki's percentages compound with
     nesting depth, which is how its list items ended up at 10.24px while its
     paragraphs were 12.8px. */
  --fs-xs:    11px;   /* meta lines, the forum's smalltext, the signing key */
  --fs-sm:    12px;   /* secondary text that has to stay out of the way */
  --fs-base:  13px;   /* body copy, list items, table cells, links */
  --fs-md:    15px;   /* a heading inside a section */
  --fs-lg:    18px;   /* the title of a utility page */
  --fs-brand: 26px;   /* the wordmark, and nothing else */

  /* Content derived, see the header comment. */
  --fs-algos: 10px;

  /* Two, so that a reader can tell running text from a heading or a table row
     without the page looking like it changes rhythm at every block. */
  --lh-tight: 1.3;
  --lh-base:  1.45;

  /* One vertical step, so gaps between blocks are multiples of one number
     rather than eleven different margins. */
  --step: 10px;
}

/* ---- the base ---- */

body
{
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* Anything that carries running text gets the base, explicitly, so that no
   element is left inheriting a size from somewhere unexpected. */
.content p,
.content li,
.content dd,
.content dt,
.content td,
.content th,
.content blockquote
{
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* A link is the same size as the sentence it sits in. On the forum today it is
   Verdana at 13px inside Bitstream Vera Sans at 11px, which is visible. */
a
{
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* ---- headings ---- */

/* The section labels on the front page are deliberately small and tracked, and
   they stay that way. They are labels rather than titles, which is why they are
   allowed to be the same size as the text under them. */
.content .section h2
{
  font-size: var(--fs-base);
  line-height: var(--lh-tight);
}

.content .section h3
{
  font-size: var(--fs-md);
  line-height: var(--lh-tight);
}

/* A utility page announces itself with a real title. */
.content .section.pagehead h2
{
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
}

/* ---- the brand ---- */

/* The wordmark stays 26px and the tagline under it stays monospace at 11px.
   Both were noticed and asked for when they went missing once already. */
.header
{
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
}

.header h1 span
{
  font-family: var(--font-sans);
  font-size: var(--fs-brand);
  line-height: var(--lh-tight);
}

/* ---- navigation ---- */

.navigation,
.navigation a
{
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* ---- monospace ---- */

/* Code keeps the one mono stack and the base size, so a command in a paragraph
   does not change the line's height. */
code,
kbd,
samp,
pre
{
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* ---- the two content derived exceptions ---- */

#features-algos ul li
{
  font-family: var(--font-mono);
  font-size: var(--fs-algos);
  line-height: var(--lh-base);
}

/* The signing key line stays in the proportional face. It is 132 characters
   that cannot break anywhere, and 11px sans is the largest that still fits the
   718px column. Monospace is wider per character, so setting a mono stack here
   makes the line wrap, which is what happened on the first attempt. */
.pgpkey
{
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
}

/* ---- rhythm ---- */

/* Gaps as multiples of one step rather than a different margin per block. */
.content p,
.content ul,
.content ol,
.content pre,
.content table
{
  margin-top: 0;
  margin-bottom: var(--step);
}

.content .section h2 {margin-bottom: calc(var(--step) + 4px);}
.content .section h3 {margin: calc(var(--step) + 6px) 0 var(--step);}

/* ==================================================================== *
 * The wiki.
 *
 * DokuWiki sizes in percentages, which compound with nesting depth. That
 * is how its paragraphs ended up at 12.8px while list items inside them
 * were 10.24px and an h3 was smaller than the h2 above it. Absolute
 * values here end the compounding.
 * ==================================================================== */

.dokuwiki,
.dokuwiki .page
{
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.dokuwiki .page p,
.dokuwiki .page li,
.dokuwiki .page td,
.dokuwiki .page th,
.dokuwiki .page dd,
.dokuwiki .page dt,
.dokuwiki .page blockquote
{
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.dokuwiki .page a
{
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* A page title, a section, then anything below it. Three steps is enough
   for pages this dense, and it keeps the hierarchy readable at a glance. */
.dokuwiki .page h1 {font-size: var(--fs-lg); line-height: var(--lh-tight);}
.dokuwiki .page h2 {font-size: var(--fs-md); line-height: var(--lh-tight);}
.dokuwiki .page h3,
.dokuwiki .page h4,
.dokuwiki .page h5 {font-size: var(--fs-base); line-height: var(--lh-tight);}

.dokuwiki .page pre,
.dokuwiki .page code,
.dokuwiki .page tt
{
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* ==================================================================== *
 * The forum.
 *
 * MyBB's theme carries four sans stacks and puts table cells in
 * monospace while links next to them are Verdana. Both are narrower in
 * the system stack at the same size, so this tightens the tables rather
 * than making them wrap.
 * ==================================================================== */

#container,
#container td,
#container th,
#container p,
#container li,
#container dd,
#container dt,
#container blockquote
{
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

#container a
{
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* MyBB's own secondary size, mapped onto the scale rather than left at
   whatever each rule happened to pick. */
#container .smalltext,
#container .smalltext a
{
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
}

#container .thead,
#container .thead a
{
  font-size: var(--fs-base);
  line-height: var(--lh-tight);
}

/* A quoted command in a post is still a command. */
#container code,
#container pre,
#container .codeblock
{
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* ==================================================================== *
 * The file listings.
 *
 * nginx builds these as one <pre> and lines the columns up with spaces,
 * so the listing itself has to stay monospace or the dates and sizes
 * stop lining up. Only the heading above it becomes proportional.
 * ==================================================================== */

body > h1
{
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
}

body > pre,
body > pre a
{
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* ==================================================================== *
 * Chrome that all three surfaces share.
 *
 * Everything above is scoped to a container, which is right for content
 * but leaves the furniture out. The navigation is the clearest case: it
 * is the same strip of links on the front page, the wiki and the forum,
 * and it was rendering at 13px on one and the browser's 16px on the
 * other two because only the front page's container reached it.
 * ==================================================================== */

.navigation,
.navigation ul,
.navigation li,
.navigation a
{
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* The wordmark, wherever it is. The wiki derives it from an 18px h1 at
   1.4em, which lands on 25.2px rather than the 26px everywhere else. */
.header h1 span,
#header .header h1 span
{
  font-family: var(--font-sans);
  font-size: var(--fs-brand);
  line-height: var(--lh-tight);
}

/* Form controls do not inherit type from the page. That is why a button
   sits at the browser's 13.33px next to 13px text. */
button,
input,
select,
textarea
{
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Bold is a weight. It should never also be a size. */
strong,
b
{
  font-size: inherit;
  line-height: inherit;
}

/* The pill buttons under Help on the front page. */
#help ul li a,
a.button
{
  font-size: var(--fs-base);
}

/* MyBB's category strip and table headers, which carry their own sizes
   in global.css and land between the steps of the scale. */
#container .tcat,
#container .tcat a,
#container .thead,
#container .thead a,
#container th.thead,
#container td.tcat
{
  font-size: var(--fs-base);
  line-height: var(--lh-tight);
}

/* Wiki furniture: the table of contents widget and the licence footer,
   both of which are meta rather than content. */
.dokuwiki .dw__toc h3,
.dokuwiki div.license,
.dokuwiki div.license a
{
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
}

/* ==================================================================== *
 * Specificity.
 *
 * The wiki and the forum both write their navigation as
 * "#header .navigation ul li a". An id in the selector outranks a class
 * whatever order the files load in, so the rules above lose to it and
 * the nav kept rendering at the browser's 16px on those two surfaces
 * while the front page had it at 13px. These match that shape rather
 * than reach for !important, which would only move the problem.
 * ==================================================================== */

#header .navigation,
#header .navigation ul,
#header .navigation ul li,
#header .navigation ul li a,
#header .navigation a
{
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* MyBB's category and header strips, and anything bold inside them. */
#container td.tcat,
#container th.tcat,
#container .tcat,
#container .tcat strong,
#container .tcat span,
#container td.thead,
#container th.thead,
#container .thead,
#container .thead strong,
#container .thead span
{
  font-size: var(--fs-base);
  line-height: var(--lh-tight);
}