/* ==========================================================================
   opsecfever.neocities.org: imageboard-style personal site
   Original stylesheet. Genre conventions, own implementation.
   Every colour role verified >= 4.5:1 against its real background,
   in both themes.
   ========================================================================== */

/* --- palette: milk (default) --------------------------------------------
   Drawn from the milk-chan art: pale milk surfaces, deep maroon ground,
   red accents, muted teal for quotes and names. */
:root {
  --page:      #d9d2d4;
  --board:     #f4f1ee;
  --post:      #ece7e6;
  --post-alt:  #e0d8d8;
  --border:    #c3b4b6;
  --border-hi: #a59195;

  --text:      #16100f;
  --muted:     #584a4b;
  --link:      #8f1f23;
  --link-hov:  #a8272c;
  --green:     #38614a;
  --name:      #245259;
  --trip:      #6d3f5e;
  --accent:    #8f1f23;

  --nav-bg:    #2a1418;
  --nav-text:  #e8dfe0;
  --toggle-br: #9c7c83;
  --ctrl-br:   #837376;

  --shadow: 0 1px 0 rgba(0,0,0,.10);
}

/* --- palette: night ----------------------------------------------------- */
:root[data-theme="dark"] {
  --page:      #120a0d;
  --board:     #1a1014;
  --post:      #221619;
  --post-alt:  #2b1d21;
  --border:    #3d2c31;
  --border-hi: #523c42;

  --text:      #e6dedd;
  --muted:     #ab9d9e;
  --link:      #e8736f;
  --link-hov:  #f5928d;
  --green:     #7fb59a;
  --name:      #6fb8bf;
  --trip:      #c095c8;
  --accent:    #e8736f;

  --nav-bg:    #0a0507;
  --nav-text:  #e6dedd;
  --toggle-br: #7a5b62;
  --ctrl-br:   #7f6a70;

  --shadow: 0 1px 0 rgba(0,0,0,.40);
}

/* --- reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--text);
  font-family: "Lucida Grande", "Segoe UI", Verdana, Geneva, sans-serif;
  font-size: 0.875rem;      /* 14px */
  line-height: 1.5;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

a { color: var(--link); text-decoration: underline; }
a:hover, a:focus-visible { color: var(--link-hov); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* --accent on the dark nav bar is only ~2:1, so the nav gets its own ring */
.topnav :focus-visible {
  outline: 2px solid var(--nav-text);
  outline-offset: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1rem 0;
}

/* --- skip link ---------------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--board);
  color: var(--text);
  padding: .5rem .75rem;
  z-index: 100;
}
.skip:focus { left: .5rem; top: .5rem; }

/* --- top nav ------------------------------------------------------------ */
.topnav {
  background: var(--nav-bg);
  color: var(--nav-text);
  font-size: 0.75rem;
  padding: .35rem .6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  align-items: center;
}
.topnav a { color: var(--nav-text); text-decoration: none; }
.topnav a:hover, .topnav a:focus-visible { text-decoration: underline; }
.topnav .sep { opacity: .7; }
.topnav .spacer { flex: 1 1 auto; }

.theme-toggle {
  background: transparent;
  border: 1px solid var(--toggle-br);
  color: var(--nav-text);
  font: inherit;
  padding: .1rem .5rem;
  cursor: pointer;
  border-radius: 2px;
}
.theme-toggle:hover { border-color: var(--nav-text); }

/* --- banner ------------------------------------------------------------- */
.banner {
  max-width: 1000px;
  margin: .75rem auto .25rem;
  padding: 0 .5rem;
  text-align: center;
}
.banner img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 2px solid var(--border-hi);
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  background: var(--post-alt);
}
.site-title {
  font-size: 2rem;
  line-height: 1.1;
  margin: .4rem 0 .1rem;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: -.01em;
}
.site-sub { color: var(--muted); font-size: .8125rem; margin: 0 0 .5rem; }

/* --- layout shell ------------------------------------------------------- */
.wrap {
  max-width: 1000px;
  margin: 0 auto 2rem;
  padding: 0 .5rem;
}

.board {
  background: var(--board);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: .75rem;
}

.board-head {
  border-bottom: 2px solid var(--border-hi);
  padding-bottom: .4rem;
  margin-bottom: .75rem;
}
.board-head h1, .board-head h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--accent);
}
.board-head p { margin: .2rem 0 0; color: var(--muted); font-size: .8125rem; }

/* --- board list (front page) -------------------------------------------- */
.boardlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.boardlist li {
  border: 1px solid var(--border);
  background: var(--post);
  padding: .6rem .7rem;
}
.boardlist a { font-weight: 700; text-decoration: none; }
.boardlist a:hover { text-decoration: underline; }
.boardlist p { margin: .25rem 0 0; color: var(--muted); font-size: .8125rem; }

/* --- posts -------------------------------------------------------------- */
.thread { margin: 0 0 1.25rem; }

.post {
  background: var(--post);
  border: 1px solid var(--border);
  padding: .5rem .6rem;
  margin: 0 0 .35rem;
}
.post.op {
  border-left: 3px solid var(--accent);
}
.post.reply {
  background: var(--post-alt);
  margin-left: 1.25rem;
}

.post-head {
  font-size: .8125rem;
  margin: 0 0 .35rem;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .45rem;
  align-items: baseline;
}
.subject { color: var(--accent); font-weight: 700; }
.name    { color: var(--name);  font-weight: 700; }
.trip    { color: var(--trip);  font-family: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace; font-size: .75rem; }
.date,
.no      { color: var(--muted); font-family: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace; font-size: .75rem; }
.no a    { color: var(--muted); text-decoration: none; }
.no a:hover { color: var(--link-hov); text-decoration: underline; }

.post-body { margin: 0; }
.post-body p { margin: 0 0 .5rem; }
.post-body p:last-child { margin-bottom: 0; }

.quote    { color: var(--green); display: block; }
.backlink { color: var(--link); font-family: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace; }

.filemeta { font-size: .75rem; color: var(--muted); margin: 0 0 .3rem; }

.thumb {
  float: left;
  width: 140px;
  height: auto;
  margin: .1rem .7rem .35rem 0;
  border: 1px solid var(--border-hi);
  background: var(--post-alt);
  max-width: 140px;
}
.post::after { content: ""; display: block; clear: both; }


/* --- thread list rows --------------------------------------------------- */
.threadrow {
  border-bottom: 1px dotted var(--border);
  padding: .45rem 0;
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}
.threadrow:last-child { border-bottom: 0; }
.threadrow img {
  width: 60px; height: 60px;
  object-fit: cover;
  border: 1px solid var(--border-hi);
  flex: 0 0 auto;
}
.threadrow .meta { font-size: .75rem; color: var(--muted); }
.threadrow h3 { margin: 0 0 .15rem; font-size: .9375rem; }
.threadrow h3 a { text-decoration: none; }
.threadrow h3 a:hover { text-decoration: underline; }
.threadrow .excerpt { margin: .2rem 0 0; font-size: .8125rem; }

/* --- decorative reply form ---------------------------------------------- */
.replybox {
  border: 1px solid var(--border);
  background: var(--post-alt);
  padding: .6rem;
  margin: 0 0 1rem;
}
.replybox .note {
  font-size: .75rem;
  color: var(--muted);
  margin: .4rem 0 0;
}
.replybox label { display: block; font-size: .75rem; margin: 0 0 .15rem; }
.replybox input, .replybox textarea {
  width: 100%;
  font: inherit;
  font-size: .8125rem;
  background: var(--board);
  color: var(--text);
  border: 1px solid var(--ctrl-br);
  padding: .3rem .4rem;
  margin: 0 0 .45rem;
}
.replybox textarea { min-height: 5rem; resize: vertical; }
.replybox button {
  font: inherit;
  background: var(--post);
  color: var(--text);
  border: 1px solid var(--ctrl-br);
  padding: .3rem .9rem;
  cursor: pointer;
}

/* --- footer ------------------------------------------------------------- */
.foot {
  max-width: 1000px;
  margin: 1rem auto 2rem;
  padding: 0 .5rem;
  text-align: center;
  font-size: .75rem;
  color: var(--muted);
}
.foot img { vertical-align: middle; }

/* --- utility ------------------------------------------------------------ */
.scroll-x { overflow-x: auto; }

/* --- responsive --------------------------------------------------------- */
@media (max-width: 640px) {
  .post.reply { margin-left: .5rem; }
  .thumb { max-width: 96px; margin-right: .5rem; }
  .site-title { font-size: 1.5rem; }
  .banner img { width: 96px; height: 96px; }
  .threadrow img { width: 48px; height: 48px; }
  }

@media (max-width: 380px) {
  .thumb { float: none; margin: 0 0 .4rem; max-width: 100%; }
  .post.reply { margin-left: 0; border-left: 3px solid var(--border-hi); }
}

/* --- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- tier list ----------------------------------------------------------
   Tier chips use fixed pale fills with near-black text, so the contrast
   holds in both themes without a second set of overrides. */
.tierlist {
  border: 1px solid var(--border-hi);
  margin: .5rem 0 .2rem;
}
.tier {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border-hi);
}
.tier:last-child { border-bottom: 0; }

.tier-label {
  flex: 0 0 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.0625rem;
  color: #16100f;
  border-right: 1px solid var(--border-hi);
}
.tier-s .tier-label { background: #ec9a9f; }
.tier-a .tier-label { background: #efb78d; }
.tier-b .tier-label { background: #e8d795; }
.tier-c .tier-label { background: #b9d69b; }
.tier-d .tier-label { background: #9dc3d8; }
.tier-f .tier-label { background: #b9aec9; }

.tier-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: .45rem .6rem;
  background: var(--post-alt);
}
.tier-body .picks { margin: 0; font-weight: 700; }
.tier-body .why   { margin: .2rem 0 0; font-size: .8125rem; color: var(--muted); }

@media (max-width: 380px) {
  .tier-label { flex-basis: 2rem; font-size: .9375rem; }
}