/* dNews — Hacker News's look, to the pixel where it matters, on purpose:
   the recognition is the point of the demo. Values follow news.css (Verdana
   10pt, #ff6600 bar, #f6f6ef page, #828282 subtext). The design language of
   GenosDB's own examples is deliberately not used here. */

:root {
  --orange: #ff6600;
  --page: #f6f6ef;
  --ink: #000000;
  --grey: #828282;
  --dim: #5a5a5a;
  --dead: #bebebe;
  --font: Verdana, Geneva, sans-serif;
  --mono: monospace;
  --indent: 40px;
}

body { margin: 8px; font: 10pt var(--font); color: var(--grey); background: #ffffff; }
a:link { color: var(--ink); text-decoration: none; }
a:visited { color: var(--grey); text-decoration: none; }
input, textarea { font: 10pt var(--mono); }
input[type="submit"], button { font: 10pt var(--font); }
textarea { resize: both; }
td { font: 10pt var(--font); color: var(--grey); }
.hidden { display: none !important; }

/* The one table, 85% wide and centred, as on HN. */
#hnmain { width: 85%; min-width: 796px; margin: 0 auto; border-collapse: collapse; background: var(--page); }
#hnmain > tbody > tr > td { padding: 0; }
.topbar { background: var(--orange); }
/* HN pads the inner table (cellspacing=0, not collapse — a collapsed table
   ignores its padding): 2 + 20 + 2 = 24px. */
.topbar table { width: 100%; border-collapse: separate; border-spacing: 0; padding: 2px; }
.topbar td { padding: 0; }
.logo { width: 18px; padding-right: 4px !important; }
/* y18.svg is an 18px square with a 1px white border outside it: 20px in
   all, which is what makes the bar 24px tall. */
.logo a { display: block; width: 18px; height: 18px; border: 1px solid #ffffff; box-sizing: content-box;
          font: 14px/18px var(--font); color: #ffffff; text-align: center; } /* y18's Y is a regular stroke, not bold */
.pagetop { font: 10pt/12px var(--font); color: #222222; }
.pagetop a:link, .pagetop a:visited { color: #000000; }
.pagetop b { margin-left: 1px; margin-right: 5px; }
a.topsel:link, a.topsel:visited { color: #ffffff; } /* the section you are on, as on HN */
.pagetop .karma { color: #000000; }
.session { text-align: right; padding-right: 4px !important; white-space: nowrap; }
.notice { padding: 8px 10px 0; color: #000000; }
.bigbox { padding: 10px 0 0 !important; }
.bigbox > table { border-collapse: collapse; }
.bigbox td { padding: 1px; vertical-align: top; }

/* Stories */
.rank { color: var(--grey); text-align: right; }
.votelinks { min-width: 18px; text-align: center; }
.votearrow { display: inline-block; width: 10px; height: 10px; margin: 3px 2px 6px; border: 0;
             background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16'%3E%3Cpolygon points='16,0 32,16 0,16' fill='%23999999'/%3E%3C/svg%3E") no-repeat center / 10px 5px;
             cursor: pointer; }
.votearrow.down { transform: rotate(180deg); }
.votearrow.voted { visibility: hidden; }
.votelinks.nosee { visibility: hidden; pointer-events: none; }
.title { font-size: 10pt; color: var(--grey); overflow: hidden; }
.title a { word-break: break-word; }
.title .dead a:link, .title .dead a:visited, .dead .commtext { color: var(--dead); }
.sitebit { font-size: 8pt; color: var(--grey); }
.sitebit a:link, .sitebit a:visited { color: var(--grey); }
.subtext { font-size: 7pt; color: var(--grey); }
.subtext a:link, .subtext a:visited { color: var(--grey); }
.subtext a:hover, .comhead a:hover, .yclinks a:hover { text-decoration: underline; }
.spacer { height: 5px; }
.morelink { text-decoration: underline; color: var(--grey) !important; }
.morespace { height: 10px; }
.label { color: var(--grey); }

/* Item page */
.toptext { margin: 5px 0; color: #000000; }
.toptext p { margin: 8px 0 0; }
.comment-tree { border-collapse: collapse; }
.comment-tree td { padding: 1px; vertical-align: top; }
.ind { width: 0; }
.comhead { font-size: 8pt; color: var(--grey); }
.comhead a:link, .comhead a:visited { color: var(--grey); }
.comment { font-size: 9pt; max-width: 1215px; overflow-wrap: anywhere; }
.commtext { color: #000000; }
.commtext a:link, .commtext a:visited { text-decoration: underline; }
.commtext p { margin: 8px 0 0; }
.reply { padding-top: 5px; font-size: 8pt; }
.reply a:link, .reply a:visited { color: var(--grey); text-decoration: underline; }
.togg { cursor: pointer; }
.collapsed .comment, .collapsed .reply { display: none; }
.noshow { display: none; }
form.reply-form { margin: 6px 0 12px; }
form.reply-form textarea { width: min(100%, 600px); height: 90px; }
form input[type="submit"] { margin-top: 4px; }

/* Plain forms: submit, login, profile */
.formtable td { padding: 3px 4px; color: #828282; font-size: 10pt; }
.formtable td:first-child { width: 60px; }
.formtable input[type="text"], .formtable input[type="url"] { width: 500px; max-width: 90vw; }
.formtable textarea { width: 500px; max-width: 90vw; height: 120px; }
.formtable .note { font-size: 8pt; }
.formhead { font-size: 10pt; color: #000000; margin: 0 0 8px; }
.formtable .actions button + button { margin-left: 6px; }
.formtable .danger { color: #ff0000; font-size: 9pt; }
.formtable .phrase { width: 500px; max-width: 90vw; height: 60px; }
.status { color: #000000; }

/* User page */
.userpage td { padding: 1px 4px 1px 0; }
.userpage td:first-child { width: 80px; }
.userpage .mono { font-family: var(--mono); font-size: 9pt; overflow-wrap: anywhere; }
.userpage .label { font-size: 8pt; }
.userpage .mismatch { color: #ff0000; }

/* Constitution page */
.constitution { padding: 0 10px 10px; color: #000000; font-size: 10pt; max-width: 760px; }
.constitution h2 { font-size: 10pt; margin: 18px 0 6px; color: #000000; }
.constitution p { margin: 6px 0; }
.constitution p.lede { color: var(--dim); }
.constitution table { border-collapse: collapse; }
.constitution td { padding: 3px 12px 3px 0; color: #000000; vertical-align: top; }
.constitution td:first-child { font-family: var(--mono); white-space: nowrap; }
.constitution .rule { color: var(--dim); font-size: 9pt; }
.constitution code, .constitution pre { font: 9pt var(--mono); overflow-wrap: anywhere; } /* a rule is one unbroken JSON string */
.constitution td { overflow-wrap: anywhere; }
.constitution pre { background: #ffffff; padding: 6px; overflow: auto; }
.constitution .mine { color: #000000; }
.constitution .mismatch { color: #ff0000; }

/* Footer */
.footer { padding: 0 !important; }
.footer hr { margin: 0; border: 0; border-top: 2px solid var(--orange); }
.yclinks { font-size: 8pt; color: var(--grey); text-align: center; padding: 10px 0 !important; }
.yclinks a:link, .yclinks a:visited { color: var(--grey); }
.yclinks form { margin: 0; }
.yclinks input[type="text"] { width: 160px; }
.presence { font-size: 8pt; color: var(--grey); }

@media only screen and (max-width: 750px) {
  body { margin: 0; }
  #hnmain { width: 100%; min-width: 0; }
  .pagetop { display: block; margin: 3px 5px; font-size: 12px; line-height: normal; }
  .pagetop b { display: block; font-size: 15px; }
  .title { font-size: 11pt; line-height: 14pt; }
  .subtext { font-size: 9pt; }
  .votearrow { transform: scale(1.3); margin-right: 6px; }
  .votearrow.down { transform: rotate(180deg) scale(1.3); }
  .ind[data-depth] { width: calc(var(--depth, 0) * 12px) !important; }
  .formtable { width: 100%; table-layout: fixed; }
  .formtable td:first-child { width: 52px; }
  .formtable input[type="text"], .formtable input[type="url"], .formtable input[type="number"], .formtable textarea, .formtable .phrase { width: 100%; max-width: 100%; box-sizing: border-box; font-size: 16px; }
  .formtable .actions button { margin: 0 4px 4px 0; }
}