/* Grid inside the parchment panel */
.servergrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}

/* Sub-boxes */
.servergrid .box{
  background: #1e1a14;
  border:1px solid #4c4133;
  border-radius:10px;
  padding:10px;
  box-shadow: var(--panel-shadow, 0 12px 30px rgba(0,0,0,.4)) inset 0 1px 0 rgba(255,255,255,.04);
}
.servergrid .box__title{
  margin: -10px -10px 8px;
  padding: 6px 10px;
  font-family: Cinzel, serif;
  font-weight: 800;
  letter-spacing: .06em;
  color:#e7d4a2;
  text-transform: uppercase;
  background: linear-gradient(180deg,#3b2f22,#2a2219);
  border-bottom:1px solid #4a3c2b;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
}
.box--wide{
  grid-column: 1 / -1;
}

.kv{ list-style:none; padding:0; margin:0; }
.kv li{ display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px dashed #3b3327; }
.kv li:last-child{ border-bottom:0; }
.kv li span{ opacity:.85; }
.ok{ color:#5dd067; }
.bad{ color:#e35b5b; }

.motd{ background:#15110d; border:1px solid #3b3327; border-radius:8px; padding:10px; min-height:48px; }

.updated{ margin-top:10px; font-size:12px; opacity:.8; text-align:right; }

/* Reference-info tables (vocations, etc.) */
.info-table-wrap{ overflow-x:auto; border-radius:8px; }
.info-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; white-space:nowrap; }
.info-table th, .info-table td{ padding:9px 14px; text-align:center; border-bottom:1px solid #2d271e; }
.info-table thead th{
  color:#e7d4a2;
  font-family: Cinzel, serif;
  font-weight:700;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.05em;
  background: linear-gradient(180deg,#2c2419,#211b13);
  border-bottom:2px solid #4a3c2b;
  padding-top:10px;
  padding-bottom:10px;
}
.info-table thead th:first-child{ border-top-left-radius:8px; }
.info-table thead th:last-child{ border-top-right-radius:8px; }
.info-table th:first-child, .info-table td:first-child{ text-align:left; }
.info-table tbody tr:last-child td{ border-bottom:0; }
.info-table tbody tr:nth-child(even) td{ background:rgba(231,212,162,.025); }
.info-table tbody tr:hover td{ background:rgba(231,212,162,.07); }
.info-table td{ transition:background .12s ease; }

/* Vocation name cell: colored accent bar per class family + promoted-tier indent */
.info-table .voc-name{ position:relative; padding-left:18px; font-weight:600; color:#f0e4c4; }
.info-table .voc-name::before{
  content:"";
  position:absolute;
  left:0; top:6px; bottom:6px;
  width:3px;
  border-radius:3px;
  background: var(--voc-color, #6b6455);
}
.info-table tr.voc--none    .voc-name{ --voc-color:#8a8272; }
.info-table tr.voc--mage    .voc-name{ --voc-color:#7c9fe0; }
.info-table tr.voc--druid   .voc-name{ --voc-color:#6fc47a; }
.info-table tr.voc--paladin .voc-name{ --voc-color:#e0b15c; }
.info-table tr.voc--knight  .voc-name{ --voc-color:#d9695f; }
.info-table tr.voc--promoted .voc-name{ padding-left:30px; font-weight:700; color:#fff3d6; }
.info-table tr.voc--promoted .voc-name::before{ left:12px; }

/* Stat values pop a bit against their labels */
.info-table td:not(:first-child){ color:#d7c297; font-variant-numeric:tabular-nums; }

.info-note{ margin-top:8px; font-size:12px; opacity:.75; }
.info-note a{ color:#e7d4a2; }