/* ---------- Colchester Tutors — dark theme core styles ---------- */
:root{
  --bg:#0b0f14;
  --panel:#0f1621;
  --panel-2:#0e1420;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --brand:#22c55e;         /* accent colour */
  --ring:rgba(34,197,94,.35);
  --border:#1f2937;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 10% -10%, #0f1b2d 0%, transparent 60%) no-repeat, var(--bg);
  color:var(--text);
  font:16px/1.65 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:980px;margin:0 auto;padding:28px}
header{padding:12px 0 10px;border-bottom:1px solid var(--border);margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:44px;width:auto;display:block}
.brand-name{font-weight:800;letter-spacing:.2px;font-size:1.75rem;font-family:'Times New Roman', Times, serif}
.tag{color:var(--muted);margin-top:4px}
.card{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  margin:16px 0;
}
h1,h2{line-height:1.2;margin:0 0 10px}
h2{font-size:1.15rem}
.grid{display:grid;gap:16px}
@media(min-width:880px){ .grid.cols-2{grid-template-columns:1fr 1fr} }
code, .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace}
.pill{display:inline-block; padding:4px 10px; border-radius:999px; background:#0b1320; border:1px solid var(--border); color:#cbd5e1}
.copy{
  border:1px solid var(--border); background:#0b1320; color:#e2e8f0;
  padding:8px 10px;border-radius:10px;cursor:pointer;
}
.copy:hover{border-color:#334155}
.copy:focus{outline:3px solid var(--ring); outline-offset:2px}
ul{margin:8px 0 0 18px;padding:0}
footer{margin-top:26px; border-top:1px solid var(--border); padding-top:12px; color:#9aa4b2}
.accent{color:var(--brand)}
.flex{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.muted{color:var(--muted)}

/* Table styles for Availability */
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left}
.table tr:last-child td{border-bottom:none}
.table th{background:#0b1320;color:#cbd5e1;font-weight:600}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;border:1px solid var(--border);background:#0b1320;color:#cbd5e1}
.center{display:flex;justify-content:center;align-items:center;text-align:center}

/* Full-width “lozenge” callout */
.callout{
  display:flex;justify-content:center;align-items:center;gap:10px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border-radius:999px;
  padding:14px 18px;
  margin:18px 0;
}
.callout .mono{font-size:1.05rem}

/* Put this near the end of styles.css */

/* Remove extra margins on cards that are inside the grid */
.grid .card { margin: 0; }

/* Keep normal spacing between the grid and the next section */
.grid + .card { margin-top: 16px; }   /* or 12px if you want it tighter */