/* HN-faithful skin. Sizes/colors match news.ycombinator.com/news.css. */

:root {
  --hn-bg-page: #f6f6ef;
  --hn-bg-orange: #ff6600;
  --hn-text: #000;
  --hn-meta: #828282;
  --hn-link-visited: #828282;
  --hn-font: Verdana, Geneva, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--hn-bg-page); }
body {
  margin: 0;
  padding: 0;
  background: var(--hn-bg-page);
  color: var(--hn-meta);
  font: 10pt var(--hn-font);
}

a, a:link { color: var(--hn-text); text-decoration: none; }
a:visited { color: var(--hn-link-visited); }
a:hover { text-decoration: underline; }

.hn-page {
  background: var(--hn-bg-page);
  margin: 0 auto;
  width: 85%;
  max-width: 1200px;
}

/* Orange top bar — HN's `.pagetop` */
.hn-pagetop {
  background: var(--hn-bg-orange);
  color: #222;
  font: 10pt var(--hn-font);
  line-height: 12px;
  padding: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hn-pagetop a,
.hn-pagetop a:link,
.hn-pagetop a:visited { color: #000; padding: 0 4px; }
.hn-pagetop a:hover { text-decoration: underline; }

.hn-pagetop .hn-title { font-weight: bold; padding: 0 4px; }
.hn-pagetop .hn-spacer { flex: 1; }
.hn-pagetop button {
  background: none; border: 0; color: #000;
  font: 10pt var(--hn-font); cursor: pointer; padding: 0 4px;
}
.hn-pagetop button:hover { text-decoration: underline; }

/* White-bordered logo square — our nod to HN's "Y" */
.hn-logo {
  display: inline-block;
  width: 18px; height: 18px;
  border: 1px solid #fff;
  background: var(--hn-bg-orange);
  color: #fff !important;
  font-weight: bold;
  text-align: center;
  line-height: 16px;
  font-size: 13px;
  font-family: Verdana, Geneva, sans-serif;
  text-decoration: none;
  margin-right: 2px;
}
.hn-logo:visited { color: #fff !important; }

/* Page body */
.hn-content { padding: 6px 4px; }

/* Story list */
.hn-stories { list-style: none; margin: 0; padding: 0; }

.hn-story {
  font-size: 10pt;
  margin-bottom: 5px;
  line-height: 1.25;
}

.hn-titleline { font-size: 10pt; }

.hn-rank {
  color: var(--hn-meta);
  font-size: 10pt;
  display: inline-block;
  min-width: 2.2em;
  text-align: right;
  padding-right: 2px;
}

.hn-storylink { color: var(--hn-text); font-size: 10pt; }
.hn-storylink:visited { color: var(--hn-link-visited); }

.hn-sitebit { font-size: 8pt; color: var(--hn-meta); }
.hn-sitebit a, .hn-sitebit a:visited { color: var(--hn-meta); }

.hn-subtext {
  font-size: 7pt;
  color: var(--hn-meta);
  padding-left: 2.2em;       /* aligns under the title (after the rank column) */
  margin-bottom: 6px;
}
.hn-subtext a, .hn-subtext a:visited { color: var(--hn-meta); }

/* Story show-page header */
.hn-fatitem { margin-bottom: 8px; }
.hn-fatitem .hn-titleline { font-size: 11pt; }
.hn-fatitem .hn-storylink { font-size: 11pt; }

/* Comments */
.hn-comments { margin-top: 12px; }

.hn-comment {
  margin: 0;
  padding: 6px 0 0 0;
}

.hn-comhead {
  font-size: 8pt;
  color: var(--hn-meta);
  margin-bottom: 3px;
}
.hn-comhead a, .hn-comhead a:visited { color: var(--hn-meta); }

.hn-replies { margin-left: 40px; }
.hn-replies:empty { margin: 0; }

/* Empty-state placeholder auto-hides as soon as a comment streams in. */
.hn-comments:has(> .hn-comment) > .hn-comments-empty { display: none; }

/* Show-all toggle: hide low-quality comments by default; reveal under .show-all.
   Hidden parents replace their content with a stub but keep their children
   visible — a good reply under a bad parent doesn't disappear. Hidden subtrees
   that have NO visible-quality descendants collapse entirely via :has(). */
.hn-comment-stub { display: none; }
.hn-comments .hn-comment[data-quality="hidden"] > .hn-comhead,
.hn-comments .hn-comment[data-quality="hidden"] > .hn-commtext {
  display: none;
}
.hn-comments .hn-comment[data-quality="hidden"] > .hn-comment-stub {
  display: block;
  font-size: 7pt;
  color: var(--hn-meta);
  font-style: italic;
  padding: 4px 0;
}
.hn-comments .hn-comment[data-quality="hidden"]:not(:has(.hn-comment:not([data-quality="hidden"]))) {
  display: none;
}
.hn-comments.show-all .hn-comment[data-quality="hidden"] {
  display: block;
  opacity: 0.55;
}
.hn-comments.show-all .hn-comment[data-quality="hidden"] > .hn-comhead,
.hn-comments.show-all .hn-comment[data-quality="hidden"] > .hn-commtext { display: block; }
.hn-comments.show-all .hn-comment[data-quality="hidden"] > .hn-comment-stub { display: none; }
.hn-show-all {
  font: 8pt var(--hn-font);
  color: var(--hn-meta);
  background: none;
  border: 1px solid var(--gray-3);
  padding: 2px 8px;
  cursor: pointer;
  margin-bottom: 6px;
}
.hn-show-all:hover { background: #fff; }

/* Settings page */
.hn-settings-card {
  background: #fff;
  border: 1px solid var(--gray-3);
  padding: var(--size-3);
  margin-bottom: var(--size-4);
}
.hn-settings-card h2 {
  font: bold 9pt var(--hn-font);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 var(--size-3) 0;
}
.hn-settings-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--size-3); margin: 0 0 var(--size-3); }
.hn-settings-card dt { color: var(--hn-meta); font-size: 8pt; }
.hn-settings-card dd { margin: 0; font-size: 9pt; }
.hn-settings-action {
  font: 10pt var(--hn-font);
  padding: 4px 12px;
  border: 1px solid var(--gray-4);
  background: var(--hn-bg-page);
  cursor: pointer;
}
.hn-settings-action:hover { border-color: var(--gray-6); }
.hn-settings-table { width: 100%; border-collapse: collapse; margin-top: var(--size-3); font-size: 9pt; }
.hn-settings-table th, .hn-settings-table td {
  text-align: left;
  padding: 3px 8px;
  border-bottom: 1px solid var(--gray-2);
}
.hn-settings-table th { font: bold 8pt var(--hn-font); color: var(--hn-meta); text-transform: uppercase; }
.hn-flash {
  background: #ffd;
  border: 1px solid #cc0;
  padding: 4px 8px;
  margin-bottom: var(--size-3);
  color: #660;
  font-size: 9pt;
}

.hn-quality {
  display: inline-block;
  margin-left: 6px;
  font-size: 7pt;
}
.hn-quality--visible    { color: #0a0; }
.hn-quality--borderline { color: #a60; }
.hn-quality--hidden     { color: #c00; }
.hn-quality--unassessed,
.hn-quality--pending    { color: var(--hn-meta); font-style: italic; }

.hn-feedback { display: inline-block; margin-left: 6px; }
.hn-feedback-form { display: inline; }
.hn-feedback-btn {
  background: none; border: 0; padding: 0 2px;
  cursor: pointer; font-size: 8pt; color: var(--hn-meta);
  filter: grayscale(0.6); opacity: 0.6;
}
.hn-feedback-btn:hover, .hn-feedback-btn.is-active {
  filter: none; opacity: 1;
}

.hn-training-card {
  border: 1px solid var(--gray-3);
  background: #fff;
  padding: var(--size-3);
  margin-bottom: var(--size-3);
}
.hn-training-parent {
  border-left: 3px solid var(--gray-3);
  padding: var(--size-2);
  margin: var(--size-2) 0;
  font-size: 8pt;
}
.hn-training-text { margin: var(--size-3) 0; }
.hn-training-form { display: flex; gap: var(--size-2); align-items: center; flex-wrap: wrap; }
.hn-training-form button {
  font: 10pt var(--hn-font);
  padding: 4px 12px;
  border: 1px solid var(--gray-4);
  background: var(--hn-bg-page);
  cursor: pointer;
}
.hn-training-form button:hover { background: #fff; }

.hn-training-reasons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--size-4);
  margin: var(--size-3) 0;
}
.hn-training-reasons-col h3 {
  font: bold 9pt var(--hn-font);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 var(--size-2) 0;
}
.hn-training-reasons-col ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hn-training-reasons-col ul li { padding-left: 0; }
.hn-training-reason-form { display: contents; }
.hn-training-reason button {
  width: 100%;
  text-align: left;
  font: 10pt var(--hn-font);
  padding: 4px 8px;
  border: 1px solid var(--gray-3);
  background: var(--hn-bg-page);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hn-training-reason button:hover { background: #fff; }
.hn-num { color: var(--hn-meta); font-size: 8pt; min-width: 1.6em; }
.hn-cat { flex: 1; }
.hn-training-skip {
  margin-top: var(--size-2);
  font: 10pt var(--hn-font);
  padding: 4px 12px;
  border: 1px solid var(--gray-4);
  background: var(--hn-bg-page);
  cursor: pointer;
}

.hn-key {
  display: inline-block;
  font-size: 7pt;
  color: var(--hn-meta);
  margin-left: 4px;
  padding: 1px 4px;
  border: 1px solid var(--gray-3);
  border-radius: 3px;
  background: var(--hn-bg-page);
}
.hn-training-hint { margin-top: var(--size-3); }
.hn-training-hint kbd {
  display: inline-block;
  font-family: Menlo, Consolas, monospace;
  font-size: 8pt;
  padding: 0 4px;
  border: 1px solid var(--gray-3);
  border-radius: 3px;
  background: var(--hn-bg-page);
}

.hn-commtext {
  font-size: 9pt;
  color: var(--hn-text);
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.hn-commtext p { margin: 0 0 8px 0; }
.hn-commtext p:last-child { margin-bottom: 0; }
.hn-commtext a { color: var(--hn-text); text-decoration: underline; }
.hn-commtext code, .hn-commtext pre {
  font-family: Menlo, Consolas, monospace;
  font-size: 8.5pt;
  background: #eeeee2;
  padding: 0 2px;
}
.hn-commtext pre { padding: 6px 8px; overflow-x: auto; }

/* Login form */
.hn-auth { max-width: 22rem; margin: 12px 0; }
.hn-auth h2 { font-size: 11pt; margin: 0 0 8px 0; color: var(--hn-text); }
.hn-auth p { margin: 0 0 6px 0; }
.hn-input {
  width: 100%;
  font: 10pt var(--hn-font);
  padding: 2px 4px;
  border: 1px solid #ccc;
  background: #fff;
  box-sizing: border-box;
}

/* Empty state, generic meta paragraphs */
.hn-meta { color: var(--hn-meta); font-size: 8pt; }
.hn-meta a, .hn-meta a:visited { color: var(--hn-meta); }