@charset "utf-8";

.table-wrap{
      bg:#f8faf9; card:#ffffff; muted:#6b7280; accent:#0f766e; border:#e6eef0;
      radius:12px; gap:16px; pad:14px;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }tbody{margin:20px;background:var(--bg);color:#0f172a}
.container{max-width:980px;margin:0 auto}
h1{font-size:1.3rem;margin-bottom:8px}
p.lead{margin-top:0;margin-bottom:18px;color:var(--muted)}

/* Desktop/Table view */
.table-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 6px 18px rgba(12,18,20,0.04)}
table{width:100%;border-collapse:collapse;font-size:.95rem}
thead{background:linear-gradient(90deg, rgba(15,118,110,0.06), rgba(15,118,110,0.03));}
th, td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border)}
th{font-weight:600;color:var(--accent);font-size:.95rem}
tbody tr:hover{background:rgba(15,118,110,0.02)}

/* Small screens: hide the table and show stacked cards */
.cards{display:none}

@media (max-width:700px){
  .table-wrap{display:none}
  .cards{display:grid;grid-template-columns:1fr;gap:var(--gap)}
  .card{background:var(--card);border:1px solid var(--border);padding:var(--pad);border-radius:12px}
  .card h2{margin:8px 0 8px 0;font-size:1.05rem;color:var(--accent)}
  .card dl{display:grid;grid-template-columns:120px 1fr;gap:6px 12px;font-size:.95rem}
  .card dt{color:var(--muted);font-weight:600}
  .card dd{margin:0}
}

/* Accessibility focus outline */
a:focus, button:focus{outline:3px dashed rgba(15,118,110,0.25);outline-offset:3px}

/* Utility */
.meta{font-size:.9rem;color:var(--muted);margin-bottom:10px}