/* Knowledge Share — server-rendered, HN-ish. */

:root {
  --bg: #f6f6ef;
  --bg-soft: #efefe6;
  --panel: #ffffff;
  --ink: #1a1a1a;
  --dim: #6b6b63;
  --line: #d9d9cc;
  --line-strong: #bcbcab;
  --accent: #ff6600;
  --accent-ink: #8a3300;
  --add: #17692f;
  --modify: #d97706;
  --delete: #c62828;
  --conflict: #4b5563;
  --add-bg: rgba(23, 105, 47, 0.14);
  --modify-bg: rgba(217, 119, 6, 0.18);
  --delete-bg: rgba(198, 40, 40, 0.14);
  --conflict-bg: rgba(75, 85, 99, 0.10);
  --radius: 8px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 Verdana, Geneva, "DejaVu Sans", sans-serif;
}

a { color: #0645ad; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.5em; font-weight: 700; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.2rem; margin-top: 1.6rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 0.8em; }
code, pre, .mono { font-family: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace; }
pre { margin: 0.5em 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.2em 0; }
img { max-width: 100%; height: auto; }
.dim { color: var(--dim); }
.empty { color: var(--dim); font-style: italic; }
.inline { display: inline; }

/* ---------- chrome ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 1.25rem;
  background: var(--accent);
  color: #fff;
  flex-wrap: wrap;
}
.topbar a { color: #fff; }
.brand { font-weight: 700; letter-spacing: 0.01em; }
.brandmark { display: inline-block; margin-right: 0.2rem; }
.topnav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.92rem; }
.linkbtn {
  background: none; border: 0; padding: 0;
  color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline;
}
.topbar .linkbtn { color: #fff; }
.error {
  background: #fdecea;
  border: 1px solid #e7b4ad;
  color: #7a2014;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.notice {
  background: #eef4fb;
  border: 1px solid #bcd3ea;
  color: #173a5e;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 0.92rem;
}

.wrap { max-width: 1280px; margin: 0 auto; padding: 1.25rem; }
.narrow { max-width: 620px; margin: 2rem auto; }
.wideform { max-width: 820px; }

/* ---------- home ---------- */

.hero { padding: 1.5rem 0 0.5rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.hero h1 { font-size: 2rem; }
.lede { font-size: 1.08rem; max-width: 720px; color: #3d3d37; }
.posts { list-style: none; padding: 0; margin: 0; }
.posts li { padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.postline { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.posttitle { font-size: 1.08rem; font-weight: 700; }
.postbyline { font-size: 0.85rem; }

/* ---------- buttons & forms ---------- */

.btn, .smallbtn, button.primary, .cform button, .replybox button {
  display: inline-block;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  padding: 0.38rem 0.7rem;
  border-radius: 6px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover, .smallbtn:hover, button.primary:hover, .cform button:hover { text-decoration: none; background: var(--bg-soft); }
.btn.ghost { background: transparent; }
.btn.primarybtn, button.primary {
  background: var(--accent);
  border-color: #cc5200;
  color: #fff;
  font-weight: 700;
}
.btn.primarybtn:hover, button.primary:hover { background: #e65c00; }
.smallbtn { padding: 0.25rem 0.5rem; font-size: 0.82rem; }
button:disabled { opacity: 0.45; cursor: default; }
.stack { display: flex; flex-direction: column; gap: 0.9rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; font-weight: 700; }
.field input, .field textarea, .field select,
.filters input, .filters select, .cform textarea, .replybox textarea {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 400;
}
.field textarea, .cform textarea, .replybox textarea { resize: vertical; }
.rowactions { display: flex; align-items: center; gap: 0.7rem; }
.hint { color: var(--dim); font-size: 0.85rem; }
input:focus, textarea:focus, select:focus, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.check { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.82rem; white-space: nowrap; }
.check input { width: auto; }

/* ---------- post header ---------- */

.postpage { position: relative; }
.posthead { border-bottom: 1px solid var(--line); padding-bottom: 0.75rem; margin-bottom: 1.25rem; }
.posthead h1 { margin-bottom: 0.15rem; font-size: 1.7rem; }
.postmeta { color: var(--dim); font-size: 0.87rem; margin-bottom: 0.65rem; }
.toolbar { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; }
.segmented a { padding: 0.35rem 0.7rem; font-size: 0.88rem; background: #fff; color: var(--ink); }
.segmented a + a { border-left: 1px solid var(--line); }
.segmented a.on { background: #35352f; color: #fff; }
.segmented a:hover { text-decoration: none; }

/* ---------- two column layout ---------- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(290px, 1fr);
  gap: 2rem;
  align-items: start;
}
.textcol { min-width: 0; }
.sidebar {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6rem;
  min-width: 0;
}

/* ---------- rendered markdown ---------- */

.block {
  position: relative;
  padding: 0.15rem 0 0.35rem;
  min-height: 1.6em;
}
.block + .block { margin-top: 0.35rem; }
.block p { margin: 0.55em 0; }
.block > :first-child { margin-top: 0; }
.block > :last-child { margin-bottom: 0; }
.block h1 { font-size: 1.6rem; margin-top: 1rem; }
.block h2 { font-size: 1.35rem; margin-top: 1rem; }
.block h3 { font-size: 1.15rem; margin-top: 0.9rem; }
.block h4, .block h5, .block h6 { font-size: 1rem; margin-top: 0.8rem; }
.block ul, .block ol { margin: 0.5em 0; padding-left: 1.6rem; }
.block blockquote {
  margin: 0.7em 0;
  padding: 0.1em 0 0.1em 1em;
  border-left: 3px solid var(--line-strong);
  color: #44443d;
}
.block pre {
  background: #efefe6;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  overflow-x: auto;
  font-size: 0.86rem;
}
.block code { background: #ececdf; border-radius: 3px; padding: 0.05em 0.25em; font-size: 0.9em; }
.block pre code { background: none; padding: 0; font-size: 1em; }
.block .rawhtml { background: #fff3f0; }
.block a:not(.mk):not(.ap) { text-decoration: underline; }
.texthint { margin-top: 1.5rem; font-size: 0.82rem; }
.mk:hover { text-decoration: none; }
.mk-add, .ap-add {
  background: var(--add-bg);
  box-shadow: inset 0 -2px 0 var(--add);
  color: #0f4d23;
}
.mk-modify, .ap-modify {
  background: var(--modify-bg);
  box-shadow: inset 0 -2px 0 var(--modify);
  color: #8a4b00;
}
.mk-delete, .ap-delete {
  background: var(--delete-bg);
  box-shadow: inset 0 -2px 0 var(--delete);
  color: #8f1d1d;
}
.mk-conflict {
  background: repeating-linear-gradient(
    45deg,
    var(--conflict-bg),
    var(--conflict-bg) 6px,
    rgba(75, 85, 99, 0.18) 6px,
    rgba(75, 85, 99, 0.18) 12px
  );
  box-shadow: inset 0 -2px 0 var(--conflict);
  color: #2d333b;
}
.mk-delete, .ap-delete { text-decoration: line-through; }
.mk-add, .mk-delete, .ap-delete {
  display: inline-block;
  min-width: 1.15em;
  text-align: center;
  font-weight: 700;
  padding: 0 0.18em;
  font-size: 0.86em;
  line-height: 1.35;
  vertical-align: 0.08em;
}
.ap { padding: 0 0.08em; }
.mk-own, .ap-own { outline: 1px dashed currentColor; outline-offset: 1px; }
.mk-stale { opacity: 0.62; outline: 1px dotted var(--dim); }
.mk:target, .ap:target { outline: 3px solid #111; background-color: #fff3b0; }

.mk::after, .ap::after {
  content: attr(data-preview);
  position: absolute;
  left: 0;
  bottom: calc(100% + 7px);
  width: max-content;
  max-width: min(340px, 78vw);
  padding: 0.45rem 0.6rem;
  background: #1d1d1b;
  color: #fff;
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity 0.1s ease, transform 0.1s ease;
  z-index: 45;
  text-decoration: none;
}
.mk:hover::after, .mk:focus::after,
.ap:hover::after, .ap:focus::after { opacity: 1; transform: translateY(0); }

.chip {
  display: inline-block;
  font-size: 0.68rem;
  line-height: 1;
  padding: 0.13rem 0.22rem;
  border-radius: 3px;
  margin-left: 1px;
  vertical-align: super;
  font-weight: 700;
  background: #fff;
  border: 1px solid currentColor;
}
.chip-add { color: var(--add); }
.chip-modify { color: var(--modify); }
.chip-delete { color: var(--delete); }
.chip-conflict { color: var(--conflict); }
.cluster-chips {
  display: inline-flex;
  gap: 1px;
  margin-left: 2px;
  vertical-align: super;
}

/* ---------- sidebar tabs & cards ---------- */

.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); margin: -0.15rem -0.1rem 0.65rem; flex-wrap: wrap; }
.tabs a {
  padding: 0.45rem 0.55rem;
  font-size: 0.82rem;
  color: var(--dim);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tabs a.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 700; }
.tabs a:hover { text-decoration: none; color: var(--ink); }
.num { background: #deded2; border-radius: 9px; padding: 0 0.32rem; font-size: 0.72rem; color: #4a4a43; }
.sidecontrols { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.65rem; }
.advanced-search {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.25rem 0;
}
.advanced-search summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--dim);
}
.advanced-search[open] summary { color: var(--ink); margin-bottom: 0.45rem; }
.sortlinks { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; flex-wrap: wrap; }
.sortlinks a { color: var(--dim); }
.sortlinks a.on { color: var(--ink); font-weight: 700; text-decoration: underline; }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; align-items: center; }
.filters input, .filters select { font-size: 0.78rem; padding: 0.28rem 0.35rem; }
.filters .check { grid-column: 1 / -1; }
.filters .smallbtn { grid-column: 1 / -1; justify-self: start; }
.sideintro { font-size: 0.8rem; }

.cards { display: flex; flex-direction: column; gap: 0.6rem; }
.card {
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0.6rem 0.65rem;
  scroll-margin-top: 1rem;
  overflow-wrap: anywhere;
}
.card:target { outline: 3px solid var(--accent); outline-offset: 1px; }
.card.conflict { border-left: 3px solid var(--modify); }
.card.isstale { border-style: dashed; }
.card.isaccepted { border-left: 3px solid #2e7d32; }
.cardmeta { font-size: 0.74rem; color: var(--dim); margin: 0.15rem 0 0.35rem; }
.badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border-radius: 9px;
  font-size: 0.68rem;
  padding: 0.02rem 0.35rem;
  font-weight: 700;
  vertical-align: middle;
}
.conflictbadge { background: var(--modify); }
.stalebadge { background: #8a6d00; }
.acceptedbadge { background: #2e7d32; }
.justify { font-size: 0.86rem; margin: 0.2rem 0 0.45rem; }
.changepreview {
  display: block;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  line-height: 1.45;
  margin-bottom: 0.45rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
  text-decoration: none;
}
.changepreview:hover { text-decoration: none; border-color: var(--line-strong); }
.comment-context { margin-bottom: 0.35rem; }
.comment-context summary { cursor: pointer; list-style: none; }
.comment-context summary::-webkit-details-marker { display: none; }
.comment-context summary.justify { margin: 0; }
.comment-context[open] summary { color: var(--ink); }
.cardcontext {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.45rem 0.55rem;
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow: auto;
  max-height: 16rem;
}
.cardfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.76rem;
}
.replylink { color: var(--dim); }
.commands {
  display: none;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}
.card.selected .commands { display: flex; }
.actionslink { font-size: 0.76rem; }
.addtext { color: var(--add); }
.deltext { color: var(--delete); text-decoration: line-through; }
.oldtext { color: var(--delete); text-decoration: line-through; }
.newtext { color: var(--modify); margin-left: 0.45em; }
.vbtn {
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 0.03rem 0.3rem;
  font-size: 0.72rem;
  cursor: pointer;
  color: #444;
}
.vbtn.up.on { background: var(--add); border-color: var(--add); color: #fff; }
.vbtn.down.on { background: var(--delete); border-color: var(--delete); color: #fff; }
.vcount { min-width: 0.9rem; text-align: center; font-variant-numeric: tabular-nums; }
.retract {
  background: none;
  border: 0;
  color: var(--dim);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0 0.15rem;
}
.retract:hover { color: var(--delete); }
.pager { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.8rem; }
.widecards { max-width: 860px; }
.profile { max-width: 900px; margin: 0 auto; }
.profilehead { margin-bottom: 1rem; }
.profiletabs { max-width: 500px; }

/* ---------- comments ---------- */

.comments { margin-top: 0.7rem; border-top: 1px dashed var(--line); padding-top: 0.55rem; }
.comments h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); margin-bottom: 0.4rem; }
.ctree { list-style: none; margin: 0; padding: 0; }
.ctree .ctree { margin-left: 0.75rem; padding-left: 0.6rem; border-left: 2px solid var(--line); }
.comment { padding: 0.35rem 0; font-size: 0.85rem; }
.chead { display: flex; align-items: baseline; gap: 0.45rem; font-size: 0.76rem; }
.chead a { font-weight: 700; }
.cbody { margin: 0.15rem 0 0.2rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.cactions { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; font-size: 0.74rem; }
.cform { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.4rem; }
.cform button, .replybox button { align-self: flex-start; font-size: 0.76rem; padding: 0.2rem 0.45rem; }
.replybox { display: inline-block; }
.replybox summary { cursor: pointer; color: var(--dim); }
.replybox[open] { display: block; }
.children { margin-top: 0.2rem; }
.children summary { cursor: pointer; color: var(--dim); font-size: 0.72rem; }

/* ---------- full-text editor ---------- */

.wrap-editor { max-width: 1120px; margin: 0 auto; padding: 1.25rem; }
.editorform { display: flex; flex-direction: column; gap: 1rem; }
.post-editor {
  width: 100%;
  min-height: 60vh;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.65;
  tab-size: 2;
  resize: vertical;
}
.justification-box { border-top: 1px solid var(--line); padding-top: 1rem; }

/* Full-width post page: right rail flush with the viewport edge. */
.wrap-post { max-width: none; padding: 0; }
.wrap-post .posthead {
  padding: 1.25rem clamp(1rem, 2.5vw, 2.5rem) 0.9rem;
  margin-bottom: 0;
}
.wrap-post .layout {
  grid-template-columns: minmax(0, 1fr) clamp(340px, 32vw, 460px);
  gap: 0;
  align-items: start;
}
.wrap-post .textcol {
  padding: 1.25rem clamp(1rem, 2.5vw, 2.5rem) 3rem;
}
.wrap-post .sidebar {
  position: sticky;
  top: 0;
  max-height: 100vh;
  border: 0;
  border-left: 1px solid var(--line-strong);
  border-radius: 0;
  background: #f0f0e6;
  box-shadow: -12px 0 28px rgba(0, 0, 0, 0.035);
  padding: 0.9rem 1.1rem 2rem;
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .layout { display: block; }
  .wrap { padding: 0.9rem; }
  .posthead h1 { font-size: 1.4rem; }
  .hero h1 { font-size: 1.55rem; }

  .sidebar,
  .wrap-post .sidebar {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    max-height: none;
    overflow: visible;
    border: 0;
    border-top: 1px solid var(--line-strong);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 1rem 0 0;
    margin-top: 1.5rem;
  }

  .wrap-post { padding: 0; }
  .wrap-post .posthead { padding: 0.9rem; }
  .wrap-post .textcol { padding: 0.8rem 0.9rem 2rem; }
  .wrap-post .layout { display: block; }
  .wrap-post .sidebar { padding: 1rem 0.9rem 2rem; }
}
@media (max-width: 620px) {
  body { font-size: 14px; }
  .topbar { padding: 0.5rem 0.8rem; }
  .filters { grid-template-columns: 1fr; }
  .filters .check, .filters .smallbtn { grid-column: auto; }
  .wrap-editor { padding: 0.9rem; }
  .post-editor { min-height: 55vh; padding: 0.8rem; font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


.forcebtn {
  background: #fff;
  border: 1px solid var(--accent);
  color: var(--accent-ink);
  border-radius: 4px;
  padding: 0.08rem 0.35rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.forcebtn:hover { background: #fff4e8; }
.btn.danger { color: var(--delete); border-color: rgba(198, 40, 40, 0.4); }
.btn.danger:hover { background: var(--delete-bg); }
.linkbtn.danger { color: var(--delete); }

.post-discussion {
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}
.post-discussion h2 { font-size: 1.15rem; }
.post-discussion .comments {
  margin-top: 0.5rem;
  border-top: 0;
  padding-top: 0;
}

.cheatsheet {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.3rem 0;
}
.cheatsheet summary { cursor: pointer; font-size: 0.82rem; color: var(--dim); }
.cheatsheet-body { margin-top: 0.5rem; font-size: 0.85rem; }
.cheatsheet pre {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.5rem 0.65rem;
  overflow-x: auto;
  font-size: 0.78rem;
}
.editor-textarea { width: 100%; min-height: 35vh; resize: vertical; }

.posthead-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.posthead-top .segmented { margin-left: auto; }
.posthead-top .postmeta { margin-bottom: 0; }
.posthead > h1 { margin: 0.15rem 0 0; }
.wrap-post .posthead {
  border-bottom: 0;
  padding-bottom: 0.35rem;
}
.wrap-post .textcol { padding-top: 0.55rem; }
.textcol[data-propose-url] .block { cursor: pointer; }

.card.selected { border-color: var(--line-strong); box-shadow: inset 0 0 0 1px var(--line-strong); }