/* ───────────────────────────────────────────────────────────
   nick_p12_bot — page styles
   Matches al-folio (nikhileshp.github.io main site):
   Roboto + Roboto Slab fonts, Bootstrap 4 layout, fixed-top nav.
   ─────────────────────────────────────────────────────────── */

:root {
  --bg:                 #ffffff;
  --bg-soft:            #f6f6f4;
  --bg-translucent:     rgba(255, 255, 255, 0.94);
  --fg:                 #212529;
  --fg-soft:            #4a4f55;
  --fg-mute:            #828589;
  --rule:               #e1e1de;
  --accent:             #0076df;          /* deep blue (light mode) */
  --accent-soft:        #5ba6ec;
  --accent-tint:        #e3f0fa;
  --on-accent:          #ffffff;          /* foreground when on top of accent */
  --green:              #2e7d32;
  --warm:               #b3261e;
  --piece-color:        #c0c0bc;
}

/* Explicit light mode — same as :root defaults, but covers `data-theme='light'`
   the JS now sets explicitly (instead of removing the attribute). */
:root[data-theme='light'] {
  --bg:                 #ffffff;
  --bg-soft:            #f6f6f4;
  --bg-translucent:     rgba(255, 255, 255, 0.94);
  --fg:                 #212529;
  --fg-soft:            #4a4f55;
  --fg-mute:            #828589;
  --rule:               #e1e1de;
  --accent:             #0076df;
  --accent-soft:        #5ba6ec;
  --accent-tint:        #e3f0fa;
  --on-accent:          #ffffff;
  --green:              #2e7d32;
  --warm:               #b3261e;
  --piece-color:        #c0c0bc;
}

/* Dark mode — orange accent, mirroring nikhileshp.github.io main-site dark mode */
:root[data-theme='dark'] {
  --bg:                 #2c4046;
  --bg-soft:            #243339;
  --bg-translucent:     rgba(44, 64, 70, 0.92);
  --fg:                 #e8e8e8;
  --fg-soft:            #c9cdd1;
  --fg-mute:            #8d9499;
  --rule:               #3d535a;
  --accent:             #ffad41;          /* orange */
  --accent-soft:        #ffd399;
  --accent-tint:        rgba(255, 173, 65, 0.18);
  --on-accent:          #1a1a1a;
  --green:              #6cd56b;
  --warm:               #ff7b6b;
  --piece-color:        #5b6a70;
}

body {
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--fg);
  background: var(--bg);
  padding-top: 70px;       /* room for fixed-top navbar */
  padding-bottom: 50px;    /* room for fixed-bottom footer */
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto Slab", "Roboto", serif;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--fg);
}

h1.post-title { font-weight: 300; font-size: 2.5rem; margin-bottom: 0.4rem; }
h2 { font-weight: 400; font-size: 1.7rem; margin-top: 2rem; margin-bottom: 1.1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); }
h5 { font-weight: 500; font-size: 1.1rem; margin-bottom: 0.7rem; }

a { color: var(--accent); text-decoration: none; transition: color 150ms ease; }
a:hover { color: color-mix(in srgb, var(--accent) 70%, var(--fg)); text-decoration: underline; }

/* ─── Navbar (matches the user's _sass/_chess_style.scss on the main site
       so the bot page and the rest of the site look identical) ─── */
.navbar.navbar-light {
  background: color-mix(in srgb, var(--bg) 94%, transparent) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  opacity: 1;
}
:root[data-theme='dark'] .navbar.navbar-light {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.navbar.navbar-light .navbar-brand.social {
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  gap: 0.6rem;
  font-size: 1rem;
}
.navbar.navbar-light .navbar-brand.social a {
  font-size: 1.1rem;
  padding: 0.2rem 0.4rem;
  color: var(--fg-soft);
  transition: color 150ms ease;
}
.navbar.navbar-light .navbar-brand.social a:hover { color: var(--accent); }
.navbar.navbar-light .navbar-brand.social a i::before {
  color: var(--fg-soft);
  transition: color 150ms ease;
}
.navbar.navbar-light .navbar-brand.social a:hover i::before { color: var(--accent); }

.navbar.navbar-light .navbar-nav .nav-item .nav-link {
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--fg-soft);
  padding: 0.5rem 0.85rem;
  background-color: transparent;
  box-shadow: none;
  transition: color 150ms ease;
}
.navbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
  color: var(--accent);
  background-color: transparent;
}
.navbar.navbar-light .navbar-nav .nav-item.active > .nav-link {
  color: var(--accent);
  font-weight: 500;
  background-color: inherit;
}
.navbar.navbar-light .navbar-nav .nav-item.active > .nav-link:hover {
  color: var(--accent);
}

/* ─── Page header / post title ─── */
.post-header { margin-bottom: 2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--rule); }
.post-description { color: var(--fg-soft); font-size: 1.1rem; line-height: 1.6; margin-top: 0.6rem; max-width: 50em; }

/* Live status pill in heading */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Roboto", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  vertical-align: middle;
  transform: translateY(-0.3em);
  transition: border-color 300ms ease, color 300ms ease;
}
.live-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fg-mute);
  transition: background 400ms ease;
}
.live-badge[data-state="online"] {
  border-color: color-mix(in srgb, var(--green) 35%, transparent);
  color: var(--green);
}
.live-badge[data-state="online"] .dot {
  background: var(--green);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--green) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 0%, transparent); }
}

/* ─── Board card ─── */
.board-card {
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.02), 0 12px 28px -16px rgba(0,0,0,0.12);
}
.board-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-soft);
}
.board-card__eyebrow {
  font-family: "Roboto", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-weight: 500;
  flex-shrink: 0;
}
.board-card__title {
  font-family: "Roboto Slab", serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--fg);
  text-align: right;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-card__body {
  position: relative;
  width: 100%;
  aspect-ratio: 1.55 / 1;
  background: var(--bg-soft);
}
@media (max-width: 991px) {
  .board-card__body { aspect-ratio: 1 / 1; }
}
.board-card__body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--bg);
}

/* Bridge color: between the page's --bg-soft (#243339) and Lichess's
   bg=dark (~#161512) so the seam between page and iframe is gentler
   and the whole card reads as part of the dark teal/grey palette. */
:root[data-theme='dark'] .board-card__body { background: #1a2326; }
:root[data-theme='dark'] .board-card__body iframe { background: #1a2326; }

.board-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1.5rem;
  background: repeating-linear-gradient(45deg, var(--bg-soft), var(--bg-soft) 28px, var(--bg) 28px, var(--bg) 56px);
}
.board-placeholder__pieces {
  display: flex;
  gap: 0.9rem;
  margin-bottom: 1.3rem;
  font-size: 2.2rem;
  color: var(--piece-color);
}
.board-placeholder__pieces span { animation: floatPiece 4s ease-in-out infinite; }
.board-placeholder__pieces span:nth-child(2) { animation-delay: 0.4s; }
.board-placeholder__pieces span:nth-child(3) { animation-delay: 0.8s; }
.board-placeholder__pieces span:nth-child(4) { animation-delay: 1.2s; }
.board-placeholder__pieces span:nth-child(5) { animation-delay: 1.6s; }
.board-placeholder__pieces span:nth-child(6) { animation-delay: 2.0s; }
@keyframes floatPiece {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.board-placeholder h4 {
  font-family: "Roboto Slab", serif;
  font-weight: 400;
  margin-bottom: 0.3rem;
  color: var(--fg);
}
.board-placeholder p {
  color: var(--fg-mute);
  max-width: 28em;
  margin-bottom: 0;
}

/* ─── Sidebar (challenge cta + stats) ─── */
.challenge-cta {
  font-family: "Roboto Slab", serif;
  font-weight: 400;
  padding: 0.95rem 1rem;
  font-size: 1.05rem;
  border-radius: 4px;
  letter-spacing: 0.005em;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.challenge-cta.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.04), 0 8px 18px -10px color-mix(in srgb, var(--accent) 55%, transparent);
}
.challenge-cta.btn-primary:hover, .challenge-cta.btn-primary:focus {
  background: color-mix(in srgb, var(--accent) 85%, var(--fg));
  border-color: color-mix(in srgb, var(--accent) 85%, var(--fg));
  color: var(--on-accent);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.06), 0 12px 24px -10px color-mix(in srgb, var(--accent) 65%, transparent);
}
.challenge-cta.btn-outline-primary {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.challenge-cta.btn-outline-primary:hover, .challenge-cta.btn-outline-primary:focus {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.cta-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--fg-mute);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0.85rem 0;
}
.cta-divider::before, .cta-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--rule);
}
.cta-divider span {
  padding: 0 0.6rem;
}

.rating-card {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--bg);
  padding: 0.85rem 1rem;
  border-radius: 4px;
}
.rating-card__label {
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.rating-card__value {
  font-family: "Roboto Slab", serif;
  font-weight: 300;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--fg);
  font-feature-settings: "tnum";
}
.rating-card__delta {
  font-size: 0.78rem;
  color: var(--accent);
  margin-top: 0.3rem;
  min-height: 1em;
}
.rating-card--small {
  border-left-width: 1px;
  padding: 0.6rem 0.75rem;
}
.rating-card--small .rating-card__value {
  font-size: 1.4rem;
}

/* Side-by-side mini-card: shows Games + W·D·L without doubling vertical space. */
.rating-card--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-left-width: 1px;
}
.rating-card--split .rating-card__cell + .rating-card__cell {
  border-left: 1px solid var(--rule);
  padding-left: 0.7rem;
}
.rating-card--split .rating-card__value { font-size: 1.35rem; }
#wdlRecord {
  font-size: 1.15rem;
  font-feature-settings: "tnum";
  letter-spacing: 0.01em;
  white-space: nowrap;
}
#wdlSummary { font-size: 0.7rem; }

/* Avg-opponent-by-outcome strip — horizontal grid below the board so the
   sidebar stays short and the wide page space is used productively. */
.opp-stats {
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg);
  padding: 0.7rem 1rem 0.85rem;
}
.opp-stats__title {
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-weight: 500;
  margin-bottom: 0.6rem;
}
.opp-stats__sub {
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-mute);
  font-weight: 400;
  margin-left: 0.4rem;
}
.opp-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}
.opp-stats__cell {
  border-left: 3px solid var(--rule);
  padding: 0.1rem 0 0.1rem 0.7rem;
}
.opp-stats__label {
  font-size: 0.78rem;
  color: var(--fg-soft);
  margin-bottom: 0.15rem;
}
.opp-stats__value {
  font-family: "Roboto Slab", serif;
  font-weight: 300;
  font-size: 1.45rem;
  color: var(--fg);
  font-feature-settings: "tnum";
  line-height: 1.1;
}
.opp-stats__cell--win {
  border-left-color: color-mix(in srgb, var(--green) 70%, transparent);
}
.opp-stats__cell--win .opp-stats__label { color: var(--green); }
.opp-stats__cell--loss {
  border-left-color: color-mix(in srgb, var(--warm) 70%, transparent);
}
.opp-stats__cell--loss .opp-stats__label { color: var(--warm); }
.opp-stats__cell--draw {
  border-left-color: color-mix(in srgb, var(--fg-mute) 50%, transparent);
}

@media (max-width: 575px) {
  .opp-stats__grid { grid-template-columns: repeat(2, 1fr); }
}

.quick-links { display: flex; flex-direction: column; gap: 0.4rem; }
.quick-links a {
  font-size: 0.88rem;
  color: var(--fg-soft);
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--rule);
}
.quick-links a:hover { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }
.quick-links a:last-child { border-bottom: none; }

/* ─── Repertoire bars ─── */
.rep-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.rep-list li {
  display: grid;
  grid-template-columns: 9em 1fr 4em;
  gap: 0.7rem;
  align-items: center;
}
@media (max-width: 540px) { .rep-list li { grid-template-columns: 1fr; gap: 0.2rem; } }

.rep-name { font-weight: 500; font-size: 0.92rem; }
.rep-bar {
  position: relative;
  height: 8px;
  background: var(--bg-soft);
  border-radius: 1px;
  overflow: hidden;
  --w: 0%;
}
.rep-bar::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, var(--bg)) 100%);
  width: var(--w);
  animation: barFill 1200ms cubic-bezier(0.22, 1, 0.36, 1) 200ms backwards;
}
.rep-bar--strong::after {
  background: linear-gradient(90deg, var(--fg) 0%, var(--accent) 100%);
}
.rep-bar--muted::after {
  background: linear-gradient(90deg, var(--fg-mute) 0%, var(--rule) 100%);
}
@keyframes barFill { from { width: 0; } to { width: var(--w); } }
.rep-count { font-size: 0.78rem; color: var(--fg-mute); text-align: right; font-feature-settings: "tnum"; }

/* ─── Recent games list ─── */
.recent-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--fg); }
.recent-list li {
  display: grid;
  grid-template-columns: 5em 1.6fr 0.9fr 0.7fr 0.8fr;
  gap: 0.85rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  transition: background 200ms ease, padding-left 200ms ease;
}
.recent-list li:hover {
  background: var(--accent-tint);
  padding-left: 0.5rem;
}
.recent-loading { font-style: italic; color: var(--fg-mute); border-bottom: none !important; }

.recent-date { font-size: 0.76rem; color: var(--fg-mute); }
.recent-opp { font-weight: 500; }
.recent-opp .opp-rating { font-size: 0.78rem; color: var(--fg-mute); margin-left: 0.3em; font-weight: 400; }
.recent-tc, .recent-color { font-size: 0.82rem; color: var(--fg-soft); }
.recent-result { font-size: 0.85rem; font-weight: 500; text-align: right; }
.recent-result--win { color: var(--green); }
.recent-result--loss { color: var(--warm); }
.recent-result--draw { color: var(--fg-mute); }

@media (max-width: 720px) {
  .recent-list li { grid-template-columns: 1fr 1fr; gap: 0.3rem 1rem; }
  .recent-date, .recent-tc, .recent-color { font-size: 0.7rem; }
}

/* ─── How it works step numbers ─── */
.step-num {
  display: inline-block;
  width: 1.6em;
  height: 1.6em;
  line-height: 1.6em;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  text-align: center;
  font-family: "Roboto Slab", serif;
  font-weight: 400;
  font-size: 0.85rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* ─── Footer ─── */
footer.fixed-bottom {
  font-size: 0.8rem;
  color: var(--fg-mute);
  background: var(--bg-translucent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid var(--rule);
  padding: 0.55rem 0;
  text-align: center;
}
footer.fixed-bottom a { color: var(--fg-soft); border-bottom: 1px dotted var(--rule); }
footer.fixed-bottom a:hover { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }

/* ─── Selection / focus polish ─── */
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

/* ─── Time-control list ─── */
.tc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tc-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  font-size: 0.92rem;
}
.tc-name {
  font-family: "Roboto Slab", serif;
  font-weight: 500;
  color: var(--fg);
  font-feature-settings: "tnum";
}
.tc-tag {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-weight: 500;
}

/* ─── Footer line layout ─── */
.footer-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  text-align: left;
}
.footer-copy { color: var(--fg-mute); }
.footer-links { display: inline-flex; flex-wrap: wrap; gap: 0.85rem; }
.footer-links a { color: var(--fg-soft); border-bottom: 1px dotted var(--rule); }
.footer-links a:hover { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }
@media (max-width: 540px) {
  .footer-line { justify-content: center; text-align: center; }
}

/* ─── Theme toggle button ─── */
#light-toggle {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--fg-soft);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.6rem;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
#light-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: rotate(20deg);
}
#light-toggle .fa-sun { display: none; }
#light-toggle .fa-moon { display: inline-block; }
:root[data-theme='dark'] #light-toggle .fa-sun { display: inline-block; }
:root[data-theme='dark'] #light-toggle .fa-moon { display: none; }