/*
 * rawnix.css -- shared look for rawnix.org (landing page + mandoc man pages)
 * Colours and type taken from the prefers-color-scheme: dark block of
 * cgit's cgit.css, so rawnix.org matches git.rawnix.org.  The site is
 * dark only: it looks the same whatever the visitor's system is set to.
 */

:root {
  color-scheme: dark;     /* scrollbars, form controls and the canvas too */
  --bg:     #171717;      /* div#cgit background          */
  --fg:     #eee;         /* div#cgit color               */
  --title:  #eee;         /* table#header td.main a       */
  --muted:  #999;         /* td.sub, tabs, footer         */
  --link:   #3af;         /* div#cgit a                   */
  --rule:   #444;         /* table.tabs border-bottom     */
  --bar:    #333;         /* div.path, list header, panel */
  --alt:    #1f1f1f;      /* table.list odd rows          */
}

html { background: var(--bg); }
body {
  margin: 0 auto;
  padding: 4px 8px 2em;
  max-width: 60em;
  font-family: sans-serif;
  font-size: 10pt;
  line-height: 1.4;
  color: var(--fg);
  background: var(--bg);
}

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

/* "monospace, monospace" stops browsers shrinking/growing the generic family */
pre, code, kbd, samp { font-family: monospace, monospace; font-size: 100%; }

/* ---- landing page ------------------------------------------------ */

/* centre the whole landing page in the window */
body.landing {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 4px;
}

/*
 * The logo, without a frame or glow.  The PNG is 782 px wide, drawn at
 * twice the size it is shown on a desktop, so it stays sharp on HiDPI
 * screens; it is never scaled above that.
 */
.mark {
  display: flex;
  justify-content: center;
  padding: 3rem 1rem 2.5rem;
}
.mark img {
  display: block;
  width: 560px;           /* desktop */
  max-width: 100%;
  height: auto;
}

.intro {
  text-align: center;
  max-width: 40em;
  margin: 0 auto;
}
.intro p { margin: 0 0 1.2em; }
.intro .what { color: var(--muted); }
.intro nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4em 2em;
  font-size: 115%;
  margin-bottom: 1.5em;
}
.intro .contact { color: var(--muted); }
.intro .contact span { font-size: 90%; }

/* phones: the logo fills the width, the links stack more tightly */
@media (max-width: 600px) {
  .mark { padding: 2rem .5rem 1.5rem; }
  .mark img { width: 100%; }
  .intro nav { gap: .4em 1.4em; font-size: 110%; }
}

/* ---- mandoc -Thtml -Ostyle=/rawnix.css --------------------------- */

table.head, table.foot {
  width: 100%;
  border-collapse: collapse;
  color: var(--muted);
}
table.head { border-bottom: solid 3px var(--rule); margin-bottom: 1em; }
table.foot { border-top: solid 1px var(--rule); margin-top: 2em; font-size: 90%; }
td.head-vol  { text-align: center; }
/*
 * Equal outer columns keep the middle title on the centre of the page,
 * whatever the two outer titles are ("audit.rawnix.org" is longer than
 * "rawnix.org").  A percentage is a hint, so a very narrow screen still
 * widens a column instead of overlapping.
 */
table.head td.head-ltitle, table.head td.head-rtitle { width: 30%; }
table.head td.head-vol { width: 40%; }

td.head-rtitle, td.foot-os { text-align: right; }
td.head-ltitle, td.head-rtitle { color: var(--title); font-weight: bold; }

/*
 * The text block is as wide as the header and footer above and below it,
 * so the section bars line up with them.  Only the text keeps a readable
 * line length.  10pt is the body font size: the bar's negative margins
 * must equal the padding exactly (1em in the bar itself is 10% larger).
 */
.manual-text { padding: 0 10pt; }
.manual-text:not(.audit-text) :is(p, dl, ul, ol, pre, .Bd) { max-width: 50em; }
h1.Sh {
  margin: 1.5em -10pt .5em -10pt;
  padding: .1em .5em;
  font-size: 110%;
  color: var(--title);
  background: var(--bar);
}
h2.Ss { margin: 1em 0 .4em -.5em; font-size: 100%; color: var(--title); }
a.permalink { color: inherit; }

.Nm, .Fl, .Cm, .Ic, .Sy { font-weight: bold; }
.Ar, .Va, .Fa { font-style: italic; }
.Pa { font-style: italic; }
.Xr { color: var(--link); }

/*
 * Tagged lists the way man(1) shows them: the tag in the left margin,
 * the description beside it.  A tag wider than the margin runs into the
 * first line and the rest of the description wraps back under it.
 */
dl.Bl-tag { margin: .6em 0 .6em 5.5em; }
dl.Bl-tag > dt {
  float: left;
  clear: left;
  margin-left: -5.5em;
  padding-right: .6em;
  font-weight: normal;
}
dl.Bl-tag > dd { margin: 0 0 .6em 0; }
dl.Bl-tag > dd::after { content: ""; display: block; clear: left; }
dl.Bl-compact > dd { margin-bottom: 0; }

/* narrow screens: no room for a margin, tag above description */
@media (max-width: 480px) {
  dl.Bl-tag { margin-left: 0; }
  dl.Bl-tag > dt { float: none; margin-left: 0; }
  dl.Bl-tag > dd { margin-left: 2em; }
}
/* the man page index: every description starts in the same column */
@media (min-width: 481px) {
  .manual-text.index dl.Bl-tag { margin-left: 10.5em; }
  .manual-text.index dl.Bl-tag > dt { margin-left: -10.5em; }
}
.Bd-indent { margin-left: 2em; }
.Bd pre, pre.Li {
  padding: .5em;
  background: var(--alt);
  border-left: solid 3px var(--rule);
  overflow-x: auto;
}

/* ---- dl.rawnix.org file lists (written by mkdl) ------------------ */

table.files {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
table.files th {
  padding: .2em .6em;
  text-align: left;
  color: var(--title);
  background: var(--bar);
}
table.files td { padding: .15em .6em; white-space: nowrap; }
table.files th, table.files th.date { font-family: inherit; }
/* severity labels are never split */
table.audit td span[class^="sev-"] { white-space: nowrap; }
/* in the CVE lists only the title may break inside a long identifier */
table.audit:has(th.date + th) td:last-child { overflow-wrap: anywhere; }
/* a CVE id stays on one line instead of breaking at its hyphens */
table.audit td.name a[href*="cve.org"] { white-space: nowrap; }
table.files tbody tr:nth-child(even) td { background: var(--alt); }
table.files tbody tr:hover td { background: var(--bar); }
table.files .name { width: 100%; }
table.files .size { text-align: right; }
table.files .date { font-family: monospace, monospace; }

/* ---- audit.rawnix.org (written by mkaudit) ----------------------- */

/*
 * The audit tables are wider than a man page's text column, so the audit
 * pages use the whole page: section bars and table headers then line up
 * on both sides.
 */
.audit-text { padding: 0; }
.audit-text h1.Sh { margin-left: 0; margin-right: 0; }
.audit-text h2.Ss { margin-left: 0; }

table.audit { margin: .4em 0 1em; }
table.audit .name { width: auto; }
table.audit td { white-space: normal; vertical-align: top; }
table.audit .num, table.audit .ver { text-align: right; white-space: nowrap; }
table.audit .date { white-space: nowrap; }
table.audit .suite { color: var(--muted); }

.sev-critical, .sev-high { color: #e33; font-weight: bold; }
.sev-medium              { color: #f93; }
.sev-low, .sev-none      { color: var(--muted); }

/* phones: the tables fit the page instead of sticking out of it */
@media (max-width: 600px) {
  table.files { font-size: 90%; }
  table.files th, table.files td { padding: .2em .3em; }
  /* section bars line up with the table text below them */
  .audit-text h1.Sh { padding-left: .25em; padding-right: .25em; }
  /* per-collection check time; the footer shows the overall one */
  table.audit th.date, table.audit td.date { display: none; }
  /* CVE lists: CVSS and Published go, the title gets the room */
  table.audit:has(th.date + th) :is(th, td):nth-child(3) { display: none; }
  /* the numbers stay on one line, their column titles may wrap */
  table.audit th.num, table.audit th.ver { white-space: normal; }
}
@media (max-width: 400px) {
  table.head { font-size: 90%; }
  table.files { font-size: 85%; }
  table.files th, table.files td { padding: .2em .25em; }
}

/* CVE lists (six columns): the same column positions in every list */
@media (min-width: 601px) {
  table.audit:has(th.date + th) { table-layout: fixed; }
  table.audit:has(th.date + th) th { white-space: normal; vertical-align: bottom; }
  table.audit:has(th.date + th) th:nth-child(1) { width: 8.5em; }
  table.audit:has(th.date + th) th:nth-child(2) { width: 4.8em; }
  table.audit:has(th.date + th) th:nth-child(3) { width: 2.7em; }
  table.audit:has(th.date + th) th:nth-child(4) { width: 4.1em; }
  table.audit:has(th.date + th) th:nth-child(5) { width: 6.2em; }
}