:root{
  /* unified, accessible dark palette */
  --bg: #0b1220;
  --panel: #0f1724;
  --card: #0f2130;
  --muted: #9aa4ad;
  --accent: #06b6d4;
  --accent-2: #1e88e5;
  --text: #e6eef3;
  --topbar: #07101a;
  --sidebar: #0d1822;
  --danger: #ef4444;

  /* layout sizes */
  --topbar-height: 56px;
  --sidebar-width: 300px;
}

/* Stabilize layout to avoid tiny horizontal shifts when scrollbars or overlays appear.
   - keep a reserved gutter for the scrollbar
   - add padding-right equal to (100vw - 100%) which equals scrollbar width when present */
/* reserve vertical gutter and stabilize scrollbar behavior */
html {
  box-sizing: border-box;
  overflow-y: scroll;                     /* always reserve the vertical gutter */
  scrollbar-gutter: stable both-edges;    /* modern browsers keep gutter reserved */
  -webkit-font-smoothing: antialiased;   /* reduce layout jitter from font rendering */
}
*, *::before, *::after { box-sizing: inherit; }

/* base typography / layout */
html,body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  width:100%;
  overflow-x:hidden; /* prevent accidental horizontal scroll on insert */
}

/* main content: account for topbar height */
.w3-main {
  margin-top: var(--topbar-height);
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-left: 0;
}

.content-wrapper {
  /* make width stable: fixed centered column, never full-bleed */
  max-width:1100px;
  width:100%;
  box-sizing:border-box;
  margin:18px auto;
  padding:18px;
  padding-right: 18px; /* fixed gutter instead of calc(100vw - 100%) */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  /* one is for the topbar and one for the padding */
  min-height: calc(100vh - var(--topbar-height) - var(--topbar-height));
}
.content-wrapper > * {
  display: none;
}

/* keep content readable on wide screens by adding interior offset */
@media (min-width: 901px) {
  /* keep a stable left offset on wide screens (no JS toggle required) */
  .content-wrapper { padding-left: calc(var(--sidebar-width) + 18px); }
}

/* ensure footer is pushed to bottom when content is short */
#x-footer {display: block; margin-top: auto; }

#x-records-search { padding:0 0 18px 0; }
#x-domain-name {
  margin:0 0 6px 0;
  font-weight:600;
  letter-spacing:0.2px;
  color:var(--text);
}

#x-about h1 {
  margin:0 0 6px 0;
  font-weight:600;
  letter-spacing:0.2px;
  color:var(--text);
}
#x-records-subtitle{
  color:var(--muted);
  font-size:0.95rem; margin-bottom:12px;
  min-height: 1.6rem;
  line-height: 1.6rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 160ms ease, transform 160ms ease;
}

/* search bar placed below title */
form#x-records-search-form{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px
}

form#x-records-search-form input, form#x-records-search-form select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius:6px;
  padding:10px 8px;
}
form#x-records-search-form .w3-button {
  background: var(--accent);
  border:none;
  color: #012226;
  padding:10px 14px;
  border-radius:6px;
}

/* records area */
#x-records { display:block; }
.record-card {
   background: var(--card);
   border-radius:8px;
   padding:12px;
   margin-bottom:12px;
   box-shadow: 0 6px 18px rgba(2,6,10,0.5);
   color:var(--text);
   border: 1px solid rgba(255,255,255,0.02);

   /* start slightly lowered & transparent */
   opacity: 1;
   transform: translateY(0);
   transition: opacity 220ms ease, transform 220ms ease;
   will-change: opacity, transform;
 }
.record-card.entering {
  opacity: 0;
  transform: translateY(6px);
}
.record-meta { display:flex; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:0.9rem; margin-bottom:8px }
.record-data { display:flex; gap:16px; flex-wrap:wrap }
.data-item {
  background: var(--panel);
  padding:8px;
  border-radius:6px;
  color:var(--text);
  min-width:120px;
  width: 100%;
  border: 1px solid rgba(255,255,255,0.02);
}
pre.data-pre {
  margin:0;
  background:transparent;
  border:none;
  color:var(--text);
  white-space:pre-wrap;
  font-family: inherit;
  font-size:0.95rem;
}

/* truncated value styling */
/*  .data-item .value { */
/*    font-weight:600; */
/*    display:inline-block; */
/*    max-width:44ch; */
/*    overflow:hidden; */
/*    text-overflow:ellipsis; */
/*    white-space:nowrap; */
/*    vertical-align:middle; */
/*  } */

.data-item .copy-btn {
  margin-left:8px;
  font-size:0.75rem;
  color:var(--muted);
  background:transparent;
  border:none;
  cursor:pointer;
  padding:4px;
}
.copy-btn:active { transform:translateY(1px); }

/* subtle accents and interactive */
.w3-button:hover { filter:brightness(1.06); transform:translateY(-1px); transition:all .12s ease; }
.w3-panel { background: transparent; color: var(--muted); }

/* SIDEBAR: fixed, below topbar on large screens; hidden on small screens */
.w3-sidebar {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  height: calc(100vh - var(--topbar-height));
  width: var(--sidebar-width);
  z-index: 30;
  box-shadow: 0 6px 30px rgba(0,0,0,0.5);
  padding-top: 12px;
  box-sizing: border-box;
  overflow-y: auto; /* scroll inside sidebar */
  display: block;
  background: var(--sidebar);
  color: var(--text);
}

/* overlay hidden by default; shown when sidebar open on small screens */
.w3-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 29;
}

/* mobile: hide sidebar and show overlay when opening */
@media (max-width: 900px) {
  .w3-sidebar { display: none; position: fixed; top: var(--topbar-height); left: 0; height: calc(100vh - var(--topbar-height)); }
  .w3-overlay { display: none; }
  .w3-main { margin-left: 0; }
  .content-wrapper { padding-left: 18px !important; } /* avoid being hidden under sidebar */
}

/* only apply left content padding when sidebar is present (keeps layout stable) */
body.has-sidebar .content-wrapper { padding-left: calc(var(--sidebar-width) + 18px); }

/* small screens */
@media (max-width:900px){
  .w3-main{ margin-left:0 }
  .content-wrapper{ padding:12px; margin-top:60px }
  nav.w3-sidebar{ display:none }
}

/* BLOG PAGE STYLES */
.blog-post {
  margin-bottom: 24px;
  padding-bottom: 12px;

  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.blog-post h2 {
  margin: 0 0 6px 0;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--text);
}
.blog-meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 12px;
}
.blog-content {
  line-height: 1.6;
  font-size: 1rem;
}