/* Hacker News layout, in black and white. Sizes follow news.ycombinator.com/news.css. */
* { box-sizing: border-box; }
body { margin: 0; padding: 8px 0; background: #fff; font-family: Verdana, Geneva, sans-serif; font-size: 10pt; color: #828282; }
a:link { color: #000; text-decoration: none; }
a:visited { color: #828282; text-decoration: none; }
:focus-visible { outline: 2px solid #000; outline-offset: 1px; }
.bar :focus-visible { outline-color: #fff; }
button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }

#main { width: 85%; min-width: 796px; margin: 0 auto; background: #f6f6f6; }
.bar { background: #000; padding: 2px; display: flex; align-items: center; gap: 4px; line-height: 12pt; }
.bar .logo { width: 18px; height: 18px; border: 1px solid #fff; color: #fff; font: 700 11px/16px Verdana, sans-serif; text-align: center; flex-shrink: 0; }
.pagetop { color: #fff; font-size: 10pt; }
.pagetop a:link, .pagetop a:visited { color: #fff; }
.pagetop b { margin: 0 5px 0 1px; }
.pagetop .on { text-decoration: underline; font-weight: 700; }
.bar .right { margin-left: auto; padding-right: 4px; }
.bar .right a, .bar .right button { color: #fff; }

.box { padding: 10px 10px 4px; }

/* filters, as small as the HN subtext row under the bar */
.filters { padding: 8px 10px 10px; font-size: 8pt; line-height: 15px; border-bottom: 1px solid #ddd; }
.f { display: flex; gap: 8px; }
.f > b { width: 34px; flex-shrink: 0; font-weight: 400; }
.f span { color: #000; }
.f button { color: #000; }
.f button.on { font-weight: 700; text-decoration: underline; }
.f button:disabled { color: #bbb; cursor: default; }
.f i { font-style: normal; color: #828282; padding: 0 4px; }
.find { align-items: center; margin-top: 4px; flex-wrap: wrap; }
.find input { font: 10pt monospace; width: 220px; border: 1px solid #828282; padding: 1px 3px; background: #fff; }

/* day strip: weekday, date, number of events; the chosen day in black */
.days { display: flex; gap: 2px; margin: 0 0 8px 42px; flex-wrap: wrap; }
.dcell { width: 38px; padding: 3px 0 2px; display: flex; flex-direction: column; align-items: center; color: #000; border: 1px solid transparent; }
.dcell small { font-size: 7pt; color: #828282; line-height: 10px; }
.dcell b { font-size: 11pt; font-weight: 400; line-height: 16px; }
.dcell:hover { border-color: #000; }
.dcell.on { background: #000; color: #fff; }
.dcell.on small { color: #ccc; }
.dcell:disabled { color: #ccc; cursor: default; border-color: transparent; }
.fsum { display: none; color: #000; font-size: 8pt; text-decoration: underline; margin: 0 0 4px; text-align: left; }

/* the list */
.day { padding: 14px 0 4px 10px; color: #000; font-weight: 700; position: sticky; top: 0; background: #f6f6f6; z-index: 1; }
.day span { color: #828282; font-weight: 400; font-size: 8pt; }
.item { display: flex; padding-top: 4px; }
.rank { width: 34px; flex-shrink: 0; text-align: right; padding-right: 4px; }
.time { width: 44px; flex-shrink: 0; text-align: right; padding-right: 8px; }
.time.ad { font-size: 7pt; padding-top: 2px; }
.time small { display: block; font-size: 7pt; line-height: 9px; }
.item.past .titleline a, .item.past .time, .subtext.past { color: #b4b4b4; }
.now { display: flex; align-items: center; margin: 6px 0 4px 34px; border-top: 2px solid #000; }
.now span { background: #000; color: #fff; font-size: 7pt; padding: 1px 5px; margin-top: -1px; }
.titleline { color: #000; word-break: break-word; }
.sitebit { font-size: 8pt; color: #828282; }
.subtext { font-size: 7pt; color: #828282; padding: 1px 0 5px 86px; }
.subtext a:link, .subtext a:visited, .subtext button { color: #828282; }
.subtext button:hover, .subtext a:hover { text-decoration: underline; }
.subtext .tag { color: #000; }
.subtext button.on { color: #000; font-weight: 700; }
.empty { padding: 20px 10px; }

/* footer: a rule and the yclinks, like HN */
.foot { margin-top: 14px; border-top: 2px solid #000; padding: 10px 0 14px; text-align: center; font-size: 8pt; }
.foot a:link, .foot a:visited { color: #000; }
.foot p { margin: 6px 0 0; }

/* text pages (about, agents): HN's FAQ look */
.text { padding: 10px 14px 4px; color: #000; max-width: 720px; line-height: 1.45; }
.text h1 { font-size: 10pt; margin: 6px 0 12px; }
.text h2 { font-size: 10pt; margin: 18px 0 6px; }
.text p, .text li { font-size: 10pt; margin: 0 0 8px; }
.text ul { padding-left: 18px; margin: 0 0 8px; }
.text a:link, .text a:visited { text-decoration: underline; }
.text .muted { color: #828282; }
.text pre, .text code { font-family: monospace; font-size: 10pt; }
.text pre { background: #fff; border: 1px solid #ddd; padding: 6px 8px; white-space: pre-wrap; word-break: break-all; margin: 0 0 10px; }

@media (max-width: 750px) {
  body { padding: 0; }
  #main { width: 100%; min-width: 0; }
  .bar { flex-wrap: wrap; row-gap: 2px; }
  .pagetop { font-size: 9pt; }
  .bar .right { white-space: nowrap; }
  .titleline { font-size: 11pt; }
  .subtext { font-size: 8pt; padding-left: 10px; }
  .rank { display: none; }
  .item { padding-left: 0; }
  .time { width: 48px; }
  .f > b { width: 30px; }
  .days { margin-left: 0; gap: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .dcell { width: 44px; flex-shrink: 0; }
  .fsum { display: block; }
  .filters:not(.open) .f.opt { display: none; }
  .now { margin-left: 0; }
}