/* 60secondbridge scoring table — SELF-CONTAINED (scoped to .sb60) */
.sb60{
  /* palette */
  --sb60-orange:#FB8C00;     /* brand banner */
  --sb60-teal:#1DE9B6;       /* hover tint (very light) */
  --sb60-ink:#212121;        /* body text */
  --sb60-ink-muted:#607D8B;  /* muted accents */
  --sb60-panel:#FFFFFF;      /* card bg */
  --sb60-header:#F5F5F5;     /* header cell bg */
  --sb60-stripe:#FAFAFA;     /* zebra alt */
  --sb60-border:#E0E0E0;     /* table borders */
  --sb60-band:#CFD8DC;       /* stronger band row */
  color:var(--sb60-ink);
  font:400 16px/24px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* optional card wrapper for rounded border + shadow */
.sb60 .sb60-card{
  max-width:1100px;
  background:var(--sb60-panel);
  border:1px solid var(--sb60-border);
  box-shadow:0 1px 2px rgba(38,50,56,.05);
  overflow-x:visible;           /* safe on mobile */
  margin:auto;
}

/* core table */
.sb60 table.sb60-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  color:inherit;
}

/* caption banner */
.sb60 table.sb60-table caption{
  background:var(--sb60-orange);
  color:#fff;
  font-weight:500;
  font-size:20px;
  line-height:26px;
  text-align:center;
  letter-spacing:.2px;
  padding:12px 16px;
}

/* header rows */
.sb60 .sb60-table thead th{
  background:var(--sb60-header);
  font-weight:600;
  color:var(--sb60-ink);
  padding:10px 12px;
  border-top:0;
  text-align:center;
  white-space:nowrap;
}
.sb60 .sb60-table thead .suit-band th{ background:var(--sb60-band); }

/* cells */
.sb60 .sb60-table th,
.sb60 .sb60-table td{
  padding:10px 12px;
  border-top:1px solid var(--sb60-border);
  text-align:center;
  white-space:nowrap;
}

/* left column “Bid” row-headers + the “Made” column */
.sb60 .sb60-table tbody th[scope="row"]{
  text-align:left;
  background:var(--sb60-header);
  font-weight:600;
}
.sb60 .sb60-table tbody td.made{
  text-align:left;
  background:var(--sb60-header);
  font-weight:600;
}

/* zebra + hover (subtle teal-tinted hover) */
.sb60 .sb60-table tbody tr:nth-child(even) td{ background:var(--sb60-stripe); }
.sb60 .sb60-table tbody tr:hover td{
  background:color-mix(in srgb, var(--sb60-teal) 14%, white);
}

/* suit header niceties (if your header cells contain <strong>) */
.sb60 .sb60-table th strong{ color:var(--sb60-ink-muted); font-weight:700; }
/* cosmetic: highlight any th that has a <strong> inside (safe to ignore if unsupported) */
.sb60 .sb60-table th:has(> strong){ background:#F7F9FA; }

/* --- Responsive fit for narrow containers --- */

/* 1) Treat .sb60 as a container so rules respond to its width (not just viewport) */
.sb60{ container-type: inline-size; }

/* 2) Let the table shrink columns predictably */
.sb60 .sb60-table{
  table-layout: fixed;   /* columns shrink evenly */
  width: 100%;
}

/* 3) Allow header text to wrap; keep numbers compact and aligned */
.sb60 .sb60-table thead th{
  white-space: normal;       /* previously nowrap; allow line breaks */
  overflow-wrap: anywhere;   /* break long labels like “Redoubled” */
  hyphens: auto;
}
.sb60 .sb60-table th,
.sb60 .sb60-table td{
  white-space: normal;       /* default: wrap */
}
.sb60 .sb60-table td{
  white-space: nowrap;       /* numbers stay on one line */
  font-variant-numeric: tabular-nums; /* tidy numeric columns */
}

/* 4) Tighten typography/padding as the CONTAINER narrows (container queries) */
@container (max-width: 980px){
  .sb60 .sb60-table caption{ font-size:18px; line-height:24px; }
  .sb60 .sb60-table th, .sb60 .sb60-table td{ padding:8px 8px; }
  .sb60 .sb60-table thead th{ font-size:14px; line-height:20px; }
}

@container (max-width: 820px){
  .sb60 .sb60-table{ font-size:14px; }            /* body text down from 16px */
  .sb60 .sb60-table th, .sb60 .sb60-table td{ padding:6px 6px; }
}

@container (max-width: 700px){
  .sb60 .sb60-table{ font-size:13px; }
  .sb60 .sb60-table caption{ font-size:16px; line-height:22px; padding:10px 12px; }
}

/* 5) Optional: if you added full grid borders, keep them slim at tiny sizes */
@container (max-width: 700px){
  .sb60 .sb60-table th, .sb60 .sb60-table td{ border-width:1px; }
}

/* Make .sb60 respond to its own width (not just viewport) */
.sb60{ container-type: inline-size; }

/* Base size for all table headers (both thead & row-headers in tbody) */
.sb60 .sb60-table th{
  font-size:16px;
  line-height:1.35;
}

/* Suit-band font sizing only (no effect on tbody th) */
.sb60{ container-type: inline-size; } /* ensures container queries key off the wrapper */

/* Base size for suit-band headers */
.sb60 .sb60-table thead .suit-band th{
  font-size:13px;       /* or whatever your current base is */
  line-height:1.3;
}

/* Step down only the suit-band as the container narrows */
@container (max-width: 980px){
  .sb60 .sb60-table thead .suit-band th{ font-size:13px; }
}
@container (max-width: 860px){
  .sb60 .sb60-table thead .suit-band th{ font-size:12px; }
}
@container (max-width: 740px){
  .sb60 .sb60-table thead .suit-band th{ font-size:12px; }
}
@container (max-width: 620px){
  .sb60 .sb60-table thead .suit-band th{ font-size:10px; }
}
@container (max-width: 520px){
  .sb60 .sb60-table thead .suit-band th{ font-size:10px; }
}


/* Suit-band: top-justified rotated labels */
.sb60 .sb60-table thead .suit-band th{
  position: relative;
  height: 120px;          /* space for the diagonal; tweak 80–100px */
  padding: 6px 6px 0;    /* top padding for breathing room */
  vertical-align: bottom;   /* anchor cell content to top edge */
  text-align: left;      
  overflow: visible;     /* let the rotated span extend */
}

.sb60 .sb60-table thead .suit-band th > .sb60-rot {
  position: absolute;
  bottom: 56px; /* distance from the bottom of the cell */
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  transform-origin: bottom center;
  white-space: nowrap;
  line-height: 1;
}


/* deterministic column widths */
.sb60 .sb60-table{
  table-layout: fixed;    /* ignore content size; use col/percent widths */
  width: 100%;
}

/* 11 columns total: 2 narrow (Bid/Made) + 9 numeric */
.sb60 .sb60-table col.col-bid,
.sb60 .sb60-table col.col-made{ width: 9%; }

/* remaining 9 columns share the rest → (100% - 18%) / 9 = 9.111…% each */
.sb60 .sb60-table col.col-data{ width: 9.1111%; }






/* Optional: scale the rotated labels down as the container narrows */
.sb60{ container-type: inline-size; }
@container (max-width: 820px){
  .sb60 .sb60-table thead .suit-band th{ height: 120px; }
  .sb60 .sb60-table thead .suit-band th > .sb60-rot{ font-size: 13px; }
}
@container (max-width: 700px){
  .sb60 .sb60-table thead .suit-band th{ height: 120px; }
  .sb60 .sb60-table thead .suit-band th > .sb60-rot{ font-size: 12px; }
}


/* Fallback for browsers without container queries */
@media (max-width: 980px){
  .sb60 .sb60-table thead .suit-band th{ font-size:11px; }
}
@media (max-width: 700px){
  .sb60 .sb60-table thead .suit-band th{ font-size:9px; }
}


/* Force all header cells in sb60 tables to stay on one line */
.sb60 .sb60-table th{
  white-space: nowrap !important;   /* override earlier wrapping rules */
}


/* Fallback for browsers without container queries */
@media (max-width: 980px){
  .sb60 .sb60-table th{ font-size:12px; }
}
@media (max-width: 700px){
  .sb60 .sb60-table th{ font-size:10px; }
}


/* --- Fallback if container queries aren’t supported --- */
@media (max-width: 720px){
  .sb60 .sb60-table{ font-size:13px; }
  .sb60 .sb60-table th, .sb60 .sb60-table td{ padding:6px 6px; }
  .sb60 .sb60-table thead th{ font-size:14px; line-height:20px; }
}