:root{
  --ink-black: #10141b;
  --panel: #1a202b;
  --paper: #d8e0e9;
  --ink: #202832;
  --accent: #5b8cc0;
  --accent-dim: #3f6e94;
  --alert: #b3453a;
  --mist: #8996a8;
  --hairline: #2a3140;
  --serif: 'Shippori Mincho', 'Noto Serif JP', serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--ink-black);
  color:#dbe3ea;
  font-family:var(--mono);
  font-size:15px;
}

/* ---------- header ---------- */
.ticket{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.6em 1.5em;
  padding:2em 1.4em 1.4em;
  border-bottom:1px solid var(--hairline);
}
.ticket-title h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.5em;
  margin:0;
  color:#eef2f6;
  letter-spacing:.02em;
}
.ticket-title .dot{color:var(--accent)}
.ticket-title .sub{
  margin:.3em 0 0;
  font-size:.78em;
  color:var(--mist);
  letter-spacing:.02em;
}
.ticket-count{
  font-size:.78em;
  color:var(--mist);
  white-space:nowrap;
}
.ticket-count span{color:var(--accent); font-weight:600}
.ticket-count a{color:inherit; text-decoration:none; border-bottom:1px dotted var(--accent)}
.ticket-count a:hover{color:var(--accent)}

/* ---------- disclaimer ---------- */
.disclaimer{
  background:var(--alert);
  color:#fdf3f1;
  font-family:var(--mono);
  font-weight:600;
  font-size:.95em;
  letter-spacing:.01em;
  text-align:center;
  padding:.9em 1.2em;
  border-bottom:1px solid var(--hairline);
}

/* ---------- layout ---------- */
.desk{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:0;
  align-items:start;
}
.desk-single{
  grid-template-columns:1fr;
  max-width:640px;
  margin:0 auto;
}
@media (max-width:820px){
  .desk{grid-template-columns:1fr}
}
.pane{
  padding:1.6em 1.4em 2.4em;
  min-width:0;
}
.search-pane{border-right:1px solid var(--hairline)}
.desk-single .search-pane{border-right:none}
@media (max-width:820px){
  .search-pane{border-right:none; border-bottom:1px solid var(--hairline)}
}
.pane h2{
  font-family:var(--mono);
  font-weight:600;
  font-size:.72em;
  letter-spacing:.12em;
  color:var(--mist);
  margin:0 0 .9em;
}

/* ---------- search ---------- */
.search-box{
  display:flex;
  border:1px solid var(--hairline);
  background:var(--panel);
}
.search-box input{
  flex:1;
  background:transparent;
  border:0;
  outline:0;
  color:#eef2f6;
  font-family:var(--mono);
  font-size:.95em;
  padding:.75em .8em;
}
.search-box input::placeholder{color:#5c6577}
.search-box button{
  background:transparent;
  border:0;
  border-left:1px solid var(--hairline);
  color:var(--mist);
  width:2.6em;
  cursor:pointer;
  font-size:1.1em;
}
.search-box button:hover{color:var(--accent)}

.hint{
  font-size:.78em;
  color:var(--mist);
  margin:.7em 0 1.1em;
}

.results{
  display:flex;
  flex-direction:column;
  gap:.9em;
}
.scrollable{
  max-height:65vh;
  overflow-y:auto;
  padding-right:.4em;
}
.scrollable::-webkit-scrollbar{width:8px}
.scrollable::-webkit-scrollbar-track{background:transparent}
.scrollable::-webkit-scrollbar-thumb{background:var(--hairline); border-radius:4px}
.scrollable::-webkit-scrollbar-thumb:hover{background:var(--mist)}

/* the one bold device: an index card */
.card{
  background:var(--paper);
  color:var(--ink);
  border:1px solid #aebccb;
  padding:.9em 1em .85em;
  position:relative;
  text-decoration:none;
  display:block;
}
.card:hover{border-color:var(--accent-dim)}
.card .rank{
  position:absolute;
  top:.7em;
  right:.8em;
  font-family:var(--mono);
  font-weight:600;
  font-size:.78em;
  color:var(--accent-dim);
  border:1px solid var(--accent-dim);
  padding:.1em .4em;
}
.card .title{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.05em;
  line-height:1.4;
  margin:0 3.6em .35em 0;
}
.card .meta{
  font-family:var(--mono);
  font-size:.76em;
  color:#45505c;
}
.card .meta .sep{margin:0 .5em; color:#93a0af}

.no-results{
  font-size:.85em;
  color:var(--mist);
  padding:1em 0;
}

/* recent-posts fallback list (shown when search is empty) */
.recent-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5em}
.recent-list a{
  color:#dbe3ea;
  text-decoration:none;
  font-size:.9em;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.15em 1em;
  border-bottom:1px dotted var(--hairline);
  padding-bottom:.5em;
}
.recent-list a:hover{color:var(--accent)}
.recent-list .rd{color:var(--mist); font-size:.85em; white-space:nowrap}

/* ---------- all-posts page (name only) ---------- */
.plain-post-list{list-style:none; margin:0; padding:0}
.plain-post-list li{border-bottom:1px dotted var(--hairline)}
.plain-post-list a{
  display:block;
  color:#dbe3ea;
  text-decoration:none;
  font-size:.92em;
  padding:.65em .1em;
}
.plain-post-list a:hover{color:var(--accent)}

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

/* ---------- footer ---------- */
.site-footer{
  padding:1.4em;
  text-align:center;
  font-size:.72em;
  color:#4c525e;
  border-top:1px solid var(--hairline);
}
.site-footer a{color:#4c525e}