/*
  Hacker News' news.css, recoloured to a calm blue.
  Text is tuned for comfortable reading, not just legibility: near-black on light, near-white on dark.
  Contrast (WCAG): light: titles 19.7, summaries 17.3, small grey text 13.5, visited 9.3, header 10.5;
                   dark:  titles 17.1, summaries 15.6, small grey text 12.5, visited 9.4, header 11.1.
  Input borders are >= 4.5:1.
*/
:root {
  --page: #ffffff;
  --bg: #f6f8fb;
  --bar: #1f4166;
  --bar-text: #ffffff;
  --text: #000000;
  --muted: #1f2b38;
  --visited: #33445a;
  --summary: #0a1520;
  --field: #ffffff;
  --field-border: #5f7186;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0a1017;
    --bg: #0f1720;
    --bar: #1d3d5f;
    --bar-text: #ffffff;
    --text: #f7f9fc;
    --muted: #cdd8e4;
    --visited: #aebdcd;
    --summary: #e9eff6;
    --field: #0e1620;
    --field-border: #7a8ea4;
  }
}

body  { font-family: Verdana, Geneva, sans-serif; font-size: 10pt; color: var(--muted); background: var(--page); margin: 8px; }
td    { font-family: Verdana, Geneva, sans-serif; font-size: 10pt; color: var(--muted); padding: 0; vertical-align: top; }
table { border-collapse: separate; border-spacing: 0; }

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

.default { font-family: Verdana, Geneva, sans-serif; font-size: 10pt; color: var(--muted); }
.title   { font-family: Verdana, Geneva, sans-serif; font-size: 10pt; color: var(--muted); overflow: hidden; }
.subtext { font-family: Verdana, Geneva, sans-serif; font-size: 7pt; color: var(--muted); }
.yclinks { font-family: Verdana, Geneva, sans-serif; font-size: 8pt; color: var(--muted); }
.pagetop { font-family: Verdana, Geneva, sans-serif; font-size: 10pt; color: var(--bar-text); line-height: 12px; }
.comhead { font-family: Verdana, Geneva, sans-serif; font-size: 8pt; color: var(--muted); }
.comment { font-family: Verdana, Geneva, sans-serif; font-size: 9pt; }
.hnname  { margin-left: 1px; margin-right: 5px; }

#hnmain { width: 85%; min-width: 796px; margin: 0 auto; background: var(--bg); }
.title a { word-break: break-word; }
.comment a:link, .comment a:visited { text-decoration: underline; }
.noshow { display: none; }

/* header */
td.bar { background: var(--bar); }
table.top { width: 100%; padding: 2px; }
table.top td { vertical-align: middle; }
td.logo { width: 18px; padding-right: 4px; }
td.logo img { border: 1px solid #ffffff; display: block; }
td.nav { line-height: 12pt; height: 10px; }
td.right { text-align: right; padding-right: 4px; }
.pagetop a:link, .pagetop a:visited { color: var(--bar-text); }
/* All header text is white; the current section is marked by an underline rather than a weaker colour. */
.topsel a:link, .topsel a:visited, span.topsel { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
tr.pagespace { height: 10px; }

/* story lists */
td.rankcol { text-align: right; padding: 0 6px 0 4px; }
.subtext a:link, .subtext a:visited { color: var(--muted); }
.subtext a:hover { text-decoration: underline; }
.comhead a:link, .comhead a:visited { color: var(--muted); }
.comhead a:hover { text-decoration: underline; }
.sitebit { font-size: 8pt; }
.morelink:link, .morelink:visited { color: var(--text); }
tr.spacer { height: 5px; }
tr.spacer.wide { height: 16px; }
tr.morespace { height: 10px; }
td.eli { font-size: 9pt; line-height: 1.4; color: var(--summary); padding: 6px 0 3px; }
td.eli div { max-width: 46em; }

/* item page */
table.fatitem { margin-right: 12px; }
.paper { color: var(--text); font-size: 9pt; line-height: 1.45; max-width: 52em; margin-top: 6px; }
.paper p { margin: 6px 0; }
.paper .eli { color: var(--summary); }
.paper details summary { cursor: pointer; color: var(--muted); }
.paper details p { margin: 4px 0 8px; }
.paper .meta { color: var(--muted); font-size: 8pt; line-height: 1.6; }
.paper .meta a:link, .paper .meta a:visited { color: var(--muted); text-decoration: underline; }
tr.gap { height: 10px; }
a.hnbtn:link, a.hnbtn:visited {
  display: inline-block; font-size: 10pt; color: var(--text); background: var(--field);
  border: 1px solid var(--field-border); border-radius: 3px; padding: 1px 7px;
}
a.hnbtn:hover { border-color: var(--text); }
.others { margin-top: 10px; font-size: 8pt; }
.others a:link, .others a:visited { color: var(--muted); text-decoration: underline; }

/* comments */
table.comment-tree { margin: 0 12px 0 10px; }
td.ind div { width: calc(var(--d, 0) * 40px); }
.comhead-row { margin-top: 2px; margin-bottom: 4px; }
.commtext { color: var(--text); }
.commtext p { margin-top: 8px; margin-bottom: 0; }
.reply { font-size: 8pt; margin: 6px 0 14px; }
.reply a:link, .reply a:visited { color: var(--text); text-decoration: underline; }
.coll .comment { display: none; }
.coll .comhead-row { margin-bottom: 14px; }
.togg { cursor: pointer; }
pre { overflow: auto; padding: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* past */
table.pastnav { margin: 0 0 10px 30px; }
.pastday { font-size: 1.3em; margin-bottom: 4px; }
.pastnav a:link, .pastnav a:visited { color: var(--text); text-decoration: underline; }

/* text pages */
.page { color: var(--text); max-width: 46em; margin: 0 0 0 30px; font-size: 9pt; line-height: 1.5; }
.page h1 { font-size: 12pt; margin: 4px 0 10px; }
.page h2 { font-size: 10pt; margin: 18px 0 4px; }
.page a:link, .page a:visited { text-decoration: underline; color: var(--text); }
.page ul { padding-left: 20px; }
.notice, .noitem, .empty { color: var(--text); margin: 0 30px 10px; }
.notice a:link, .notice a:visited { text-decoration: underline; }

/* footer */
td.footer { text-align: center; padding-top: 10px; }
td.footer .rule { height: 2px; background: var(--bar); margin-bottom: 1.4em; }
.yclinks { display: block; margin-bottom: 1.4em; }
.yclinks a:link, .yclinks a:visited { color: var(--muted); }

@media (prefers-color-scheme: dark) {
  td.logo img { border-color: #dbe7f3; }
}

/* mobile, as on HN */
@media only screen and (min-width: 300px) and (max-width: 750px) {
  #hnmain { width: 100%; min-width: 0; }
  body { padding: 0; margin: 0; width: 100%; }
  td { height: inherit !important; }
  .title, .comment { font-size: inherit; }
  span.pagetop { display: block; margin: 3px 5px; font-size: 12px; line-height: normal; }
  span.pagetop b { display: block; font-size: 15px; }
  td.ind div { width: calc(var(--d, 0) * 12px); }
  .title { font-size: 11pt; line-height: 14pt; }
  .subtext { font-size: 9pt; }
  td.eli { font-size: 10pt; padding-right: 8px; }
  .paper, .page { padding-right: 8px; }
  .page { margin-left: 10px; }
  .comment { max-width: calc(100vw - 60px); overflow: hidden; }
}
.comment { max-width: 1215px; overflow-wrap: anywhere; }