:root{
  --ars-red:#db0007;
  --ars-navy:#063672;
  --ars-gold:#f2c94c;
  --ink:#0b0f17;
  --card: rgba(17,24,39,.78);
  --line: rgba(255,255,255,.12);
  --muted: #cbd5e1;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(219,0,7,.35), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(6,54,114,.45), transparent 60%),
    var(--ink);
  color:#f8fafc;
}

.topbar{
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.15);
  backdrop-filter: blur(8px);
}

.glass{
  border: 1px solid var(--line);
  background: var(--card);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  overflow: visible; /* prevent accidental clipping */
}

.pill{
  display:inline-block;
  padding:.18rem .5rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  font-size: .72rem;
  color: var(--muted);
  background: rgba(255,255,255,.03);
  white-space: nowrap;
}

.muted{ color: var(--muted); }

.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

.form-control, .form-select{
  background: rgba(0,0,0,.20);
  color: #f8fafc;
  border-color: rgba(255,255,255,.16);
}
.form-control::placeholder{ color: rgba(203,213,225,.65); }
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .2rem rgba(242,201,76,.18);
  border-color: rgba(242,201,76,.40);
  background: rgba(0,0,0,.22);
  color: #f8fafc;
}

/* make Bootstrap inputs/buttons denser */
.form-control-sm, .form-select-sm{
  padding-top: .32rem;
  padding-bottom: .32rem;
}

.btn-arsenal{
  background: linear-gradient(180deg, rgba(219,0,7,.95), rgba(219,0,7,.75));
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-weight: 700;
}
.btn-navy{
  background: rgba(6,54,114,.35);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-weight: 700;
}

.btn.btn-sm{
  padding: .32rem .55rem;
  border-radius: .55rem;
}

.note{
  border-left: 4px solid var(--ars-gold);
  padding: 10px 12px;
  background: rgba(242,201,76,.08);
  border-radius: 12px;
  color: var(--muted);
}

.bulk-out{
  border: 1px dashed rgba(255,255,255,.20);
  background: rgba(0,0,0,.15);
  border-radius: 12px;
  padding: 10px;
  margin: 0;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 54px;
}

/* ---------- TOP NAV LINKS ---------- */

.top-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.jump{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
  color: #f8fafc;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
}
.jump:hover{
  border-color: rgba(242,201,76,.45);
  box-shadow: 0 0 0 .2rem rgba(242,201,76,.12);
}

/* ---------- MAIN TABLE (desktop + tablet) ---------- */

.table-wrap{
  width: 100%;
  /* IMPORTANT: do NOT hide overflow or you'll clip the last columns */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* optional: nicer scrollbar (WebKit) */
.table-wrap::-webkit-scrollbar{ height: 10px; }
.table-wrap::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius: 999px; }
.table-wrap::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.16); border-radius: 999px; }
.table-wrap::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.22); }

.table{
  table-layout: fixed;
  width: 100%;
  margin-bottom: 0;
}

/* make the table denser */
.table>:not(caption)>*>*{
  padding: .48rem .55rem;
}

.table th,
.table td{
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: top;
}

td.commentCell{
  line-height: 1.2;
}

/* clamp comment height on desktop so it doesn't bloat rows */
@media (min-width: 992px){
  td.commentCell{

  /* Standard (future-proof) */
  line-clamp: 3;

  /* WebKit (current reality) */
  -webkit-line-clamp: 3;

  overflow: hidden;
}
}

/* output column: wrap + monospace + tighter */
td.outputCell{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  white-space: pre-wrap !important;
  line-height: 1.15;
  font-size: .92rem;
}

td.valueCell .form-control,
td.valueCell .form-select{
  width: 100%;
  max-width: 100%;
}

/* action buttons: compact stack */
td.actionCell .btn{
  width: 100%;
  white-space: nowrap;
}

/* desktop sizing — tighter to fit output */
@media (min-width: 992px){
  .table{
    font-size: .93rem;
  }

  .table thead th:nth-child(1){ width: 80px; }   /* Address */
  .table thead th:nth-child(2){ width: 165px; }  /* Meaning */
  .table thead th:nth-child(3){ width: 150px; }  /* Comment (smaller) */
  .table thead th:nth-child(4){ width: 210px; }  /* Value */
  .table thead th:nth-child(5){ width: 85px; }   /* Value Token (smaller) */
  .table thead th:nth-child(6){ width: 80px; }  /* Actions (smaller) */
  .table thead th:nth-child(7){ width: auto; }   /* Encoded Output */

  td.tokenCell{ white-space: nowrap !important; font-size: .92rem; }
  td.actionCell{ white-space: nowrap !important; }
}

/* ---------- MOBILE: table rows become cards ---------- */

@media (max-width: 991.98px){
  .table thead{ display: none; }

  .table, .table tbody, .table tr, .table td{
    display: block;
    width: 100%;
  }

  .table tr{
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 12px;
  }

  .table td{
    border: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0;
  }

  .table td::before{
    content: attr(data-label);
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
    letter-spacing: .02em;
  }

  .table td.addrCell::before{ content: ""; margin: 0; }
  .table td.addrCell{
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 8px;
  }

  td.valueCell .form-control,
  td.valueCell .form-select{
    font-size: 16px; /* prevents iOS zoom */
  }

  td.actionCell .d-grid{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  td.outputCell{
    background: rgba(0,0,0,.18);
    border: 1px dashed rgba(255,255,255,.18);
    border-radius: 12px;
    padding: 10px !important;
    margin-top: 4px;
  }

  td.tokenCell{
    display: inline-block;
    padding: 6px 10px !important;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    width: fit-content;
    background: rgba(255,255,255,.03);
  }

  /* on mobile, the wrap is irrelevant; stop adding scrollbars */
  .table-wrap{ overflow-x: visible; }
}

/* ---------- BOTTOM TOOLS SECTION ---------- */

.tools-grid{
  display: grid;
  gap: 14px;
}

@media (min-width: 992px){
  .tools-grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* Make anchor jumps land nicely under topbar */
.anchor-pad{
  scroll-margin-top: 80px;
}
#pager .btn { font-weight: 700; }
#pager .form-select { background: rgba(0,0,0,.20); color: #f8fafc; border-color: rgba(255,255,255,.16); }

/* Pin the Top button/header inside the hex encoder panel */
#hex-encoder{
  position: relative;
}

#hex-encoder .hex-head{
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 8px 0;
  background: var(--card);           /* keeps it readable while pinned */
  border-bottom: 1px solid var(--line);
}
.topbar .muted.small {
  opacity: 0.85;
}
.author-line{
  margin-top: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.author-name{
  color: #e5e7eb; /* slightly brighter than muted */
  font-weight: 600;
}

.author-line .dot{
  opacity: 0.6;
  margin: 0 4px;
}
#buildHash, #lastUpdated, #datasetVersion{
  font-size: .72rem;
  padding: .18rem .5rem;
  opacity: .92;
}