:root{--blue:#0c4a6e;--light:#f5f7fb;--card:#fff;--table-stripe:#f8fafc}
*{box-sizing:border-box}
html,body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial;background:var(--light);color:#0b1220}
.header{position:sticky;top:0;z-index:20;background:var(--blue);color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
.nav a{color:#fff;text-decoration:none;margin-left:16px;font-weight:700}
.container{max-width:1100px;margin:16px auto;padding:0 16px}
.card{background:var(--card);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.06);padding:16px;margin-bottom:16px}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:10px 8px;border-bottom:1px solid #e5e7eb;text-align:left}
.table tbody tr:nth-child(odd){background:var(--table-stripe)}
.badge{padding:4px 8px;border-radius:8px;background:#eef2ff;font-weight:600;font-size:12px}
.badge.FR{background:#fde68a}.badge.HB{background:#bbf7d0}.badge.HL{background:#e9d5ff}.badge.NR{background:#fecaca}.badge.NG{background:#bae6fd}.badge.RF{background:#ffd6a5}
.button{appearance:none;background:var(--blue);color:#fff;border:none;padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer}
.button.secondary{background:#0ea5e9}
.input,select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;outline:none}
.grid{display:grid;gap:12px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:800px){.grid-3{grid-template-columns:1fr}}
.flex{display:flex;gap:10px;align-items:center}
.justify-between{justify-content:space-between}
.nav a.active { text-decoration: underline; }

/* ---------- House colours (from your screenshot) ---------- */
/* tweak hex codes until they exactly match your brand */
:root{
  --FR:#e21b23;    /* Freyberg - red */
  --HB:#2b2d31;    /* Halberg - charcoal/black */
  --HL:#f6ea00;    /* Hillary - yellow */
  --NR:#0a7c20;    /* Ngarimu - green */
  --NG:#1f8fff;    /* Ngata - blue-cyan */
  --RF:#3a57ff;    /* Rutherford - royal blue */
}
.badge.FR,.house-chip.FR,.house-banner.FR{ background:var(--FR); color:#fff }
.badge.HB,.house-chip.HB,.house-banner.HB{ background:var(--HB); color:#fff }
.badge.HL,.house-chip.HL,.house-banner.HL{ background:var(--HL); color:#111 }
.badge.NR,.house-chip.NR,.house-banner.NR{ background:var(--NR); color:#fff }
.badge.NG,.house-chip.NG,.house-banner.NG{ background:var(--NG); color:#fff }
.badge.RF,.house-chip.RF,.house-banner.RF{ background:var(--RF); color:#fff }

/* ---------- Podium UI ---------- */
.podium-wrap{
  display:grid; gap:16px;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 900px){ .podium-wrap{ grid-template-columns: 1fr } }

.podium{
  background:#0c3d5a;     /* deep blue like your banner */
  color:#fff;
  border-radius:16px;
  padding:18px;
  display:flex; align-items:flex-end; justify-content:space-around;
  min-height:260px; position:relative; overflow:hidden;
}
.podium h3{
  position:absolute; top:10px; left:16px; margin:0; font-size:20px; opacity:.9;
}
.pillar{
  width:28%; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.block{
  width:100%;
  border-radius:10px 10px 0 0;
  background:#ededed; color:#111;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.25);
}
.block .vertical{
  position:absolute; transform:rotate(-90deg);
  white-space:nowrap; font-weight:800; letter-spacing:.5px;
}
.base{
  width:100%;
  text-align:center;
  border-radius:10px;
  background:#d9d9d9; color:#555; font-weight:800;
  padding:8px 0;
}
.base.first  { background:#fffda4; color:#e1ad00 }   /* gold */
.base.second { background:#d9dbde; color:#828992 }  /* silver */
.base.third  { background:#f7d1b6; color:#ca6516 }  /* bronze */

/* list for 4th-6th */
.next-three{
  background:#0c3d5a; color:#fff; border-radius:16px; padding:16px;
}
.next-three h3{ margin:0 0 8px 0; font-size:20px; }
.rank-row{
  display:flex; align-items:center; gap:10px;
  padding:10px; border-radius:12px; background:rgba(255,255,255,.08); margin-bottom:10px;
}
.rank-num{ width:40px; font-weight:900; text-align:center; }
.house-chip{
  padding:6px 10px; border-radius:999px; font-weight:800; font-size:13px;
}
.points{ margin-left:auto; font-weight:800; }

/* ====== Leaderboard grid (like your screenshot) ====== */
.table.lb { width:100%; border-collapse:collapse; font-size:16px }
.table.lb th,.table.lb td{ border:2px solid #0b2230; padding:6px 10px }
.table.lb th { background:#d7dee6; font-weight:800; text-align:center }
.table.lb th.section { background:#cfd8e3; font-size:20px }
.table.lb th.section.totals { background:#dff3d9 }  /* light green */

.table.lb .lefthead { background:#d7dee6; text-align:center; font-style:italic }

tr.house-row td { color:#fff }            /* default text on dark rows */
tr.house-row.HL td { color:#111 }         /* yellow needs dark text */
tr.house-row.NG td { color:#111 }         /* white/very light row -> dark text */

/* House colour rows */
tr.house-row.FR td{ background:var(--FR) }
tr.house-row.HB td{ background:var(--HB) }
tr.house-row.HL td{ background:var(--HL) }
tr.house-row.NR td{ background:var(--NR) }
tr.house-row.NG td{ background:#ffffff }  /* as per your screenshot, NG = white */
tr.house-row.RF td{ background:var(--RF) }

/* Stronger emphasis in totals/overall columns */
.table.lb td.emph { font-weight:800 }

/* Wider page containers */
.container-wide { max-width: 1600px; }             /* good on laptops/desktops */
@media (min-width: 1800px){ .container-wide { max-width: 1800px; } }

/* Full-bleed option if you ever want it */
.container-fluid { max-width: 100%; }
/* give podium more space than the side list */
.podium-wrap { grid-template-columns: 3fr 1fr; }  /* was 2fr 1fr */
.table.lb { width: 100%; }


/* ===== New multi-block leaderboard (like your mock) ===== */
.lb-grid{
  display:grid;
  grid-template-columns: 260px 1fr 1fr 1fr 1fr; /* left list + four sections */
  gap:10px;                                     /* small gaps between parts */
  align-items:start;
}

/* small title card per block */
.lb-mini{
  width:100%;
  border-collapse:separate;
  border-spacing:0;               /* sharp internal lines */
  font-variant-numeric: tabular-nums;
}
.lb-mini th, .lb-mini td{
  padding:8px 10px;
  border:2px solid #0b2230;
  text-align:center;
}

/* Block titles (Junior / Inter. / Senior / Totals) */
.lb-title{
  background:#cfd8e3;
  font-weight:900;
  font-size:22px;
  text-align:center;
}
.lb-title.totals{ background:#dff3d9; }

/* Subhead inside each block (Comp / Part / Total / Rank) */
.lb-sub th{
  background:#e6ecf3;
  font-weight:600;                /* not bold */
}

/* Left list header: Code / House */
.lb-houses thead th{
  background:#d7dee6;
  font-style:italic;
  font-weight:600;                /* not bold */
  text-align:center;
}

/* Left list column alignment */
.lb-houses td:first-child{ width:64px; font-weight:800; }
.lb-houses td:nth-child(2){ text-align:left; font-weight:800; }

/* House-colour rows (reuse your palette) */
.lb-mini tr.house-row td{ color:#fff; }
.lb-mini tr.house-row.HL td,
.lb-mini tr.house-row.NG td{ color:#111; } /* yellow/white -> dark text */
.lb-mini tr.house-row.FR td{ background:var(--FR); }
.lb-mini tr.house-row.HB td{ background:var(--HB); }
.lb-mini tr.house-row.HL td{ background:var(--HL); }
.lb-mini tr.house-row.NR td{ background:var(--NR); }
.lb-mini tr.house-row.NG td{ background:#ffffff; }
.lb-mini tr.house-row.RF td{ background:var(--RF); }

/* Emphasis for totals cells */
.lb-mini td.emph{ font-weight:900; font-size:18px; }

/* make the card fill the wider container you set */
.card .lb-grid{ width:100%; }

/* this is here to blank out the first row in the house leaderboard table above Code and House*/
.TableBlank {background: transparent !important;
    border-right: 0 !important;  
    border-top: 0 !important;
    border-Left: 0 !important;
}


/* precise column widths */
:root{
  --gap: 8px;         /* gutter between blocks */
  --w-code: 60px;     /* "Code" */
  --w-house: 120px;   /* "House" */
  --w-metric: 66px;   /* Comp/Part/Total/Rank */
  --w-overall: 76px;  /* "Overall" column in Totals block */
  --block-radius: 6px;
}

.table.lb{ table-layout:fixed; width:100%; }
.table.lb col.gap      { width: var(--gap); }
.table.lb col.c-code   { width: var(--w-code); }
.table.lb col.c-house  { width: var(--w-house); }
.table.lb col.c-metric { width: var(--w-metric); }
.table.lb col.c-overall{ width: var(--w-overall); }
.table.lb{ border-collapse: separate; border-spacing: 0; }

/* keep text from overflowing fixed cells; reduce subhead padding a bit */
.table.lb th, .table.lb td{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.table.lb thead tr:nth-child(2) th{ padding-left:8px; padding-right:8px; }

.table.lb thead tr:first-child th.group{
  border-top-left-radius: var(--block-radius);
  border-top-right-radius: var(--block-radius);
  background-clip: padding-box;   /* keep the fill inside the rounded corners */
  overflow: hidden;
}


/* === Uniform thin grid lines, no doubles === */
.table.lb{ border-collapse:separate; border-spacing:0; }
.table.lb th, .table.lb td{ border:2px solid #0b2230; }

/* Horizontal lines: use the bottom border of the row above */
.table.lb thead tr + tr th,
.table.lb tbody tr + tr td{ border-top-width:0; }

/* Vertical lines: draw with the RIGHT edge of cells */
.table.lb th, .table.lb td{ border-left-width:0; }   /* kill left for everyone by default */

/* Gutters: no borders at all */
.table.lb .gap{ border:none !important; background:transparent !important; }

/* First cell after each gap (and the first metric in a block) gets its LEFT edge back */
.table.lb .first-in-group{ border-left-width:2px !important; }

/* Between Code and House we ONLY want the Code cell’s right border; remove House’s left */
.table.lb .after-code{ border-left-width:0 !important; }


/* === Borders: make Code↔House a single line, and remove the extra line under header === */

/* keep one horizontal line: the header draws it */
.table.lb tbody td { border-top-width: 0; }

/* kill the right edge on "Code" so only House's left edge shows */
.table.lb th.col-code,
.table.lb td.col-code { border-right-width: 0 !important; }

/* ensure House provides the single vertical line next to Code */
.table.lb th.col-house,
.table.lb td.col-house { border-left-width: 2px !important; }

/* Restore the outer left border on the Code column */
.table.lb th.col-code,
.table.lb td.col-code{
  border-left-width: 2px !important;   /* draw the table's left edge */
  border-right-width: 0 !important;     /* keep single line next to House */
}


/* coloured boxes */
.podium .block{
  border-radius: 0 !important;             /* square corners */
  box-shadow: none !important;             /* remove the inset/border look */
  border: 0 !important;                    /* ensure no border shows */
}

/* base “1st/2nd/3rd” bars */
.podium .base{
  border-radius: 0 !important;             /* square corners */
}

/* --- Podium: keep coloured blocks same height, vary ONLY the base bars --- */

/* set one height for all coloured blocks */
:root{
  --pod-block-h: 250px;   /* tweak to taste */
  --pod-base-third: 60px; /* height for 3rd base; 2nd/1st scale from this */
}

/* coloured boxes: square, no border, fixed same height */
#pod-first  .block,
#pod-second .block,
#pod-third  .block{
  height: var(--pod-block-h) !important;
  width: 60%;
  font-size:3ch;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* base bars: square corners and ratio heights (1st=2x, 2nd=1.5x, 3rd=1x) */
.podium .base{
  border-radius: 0 !important;
  font-size:6ch;
  padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;  /* avoid vertical stretch by text */
}
#pod-first  .base{ height: calc(var(--pod-base-third) * 2)   !important; }
#pod-second .base{ height: calc(var(--pod-base-third) * 1.5) !important; }
#pod-third  .base{ height: var(--pod-base-third)             !important; }


/* Podium: pull 1st/2nd/3rd closer */
:root { --pod-gap: 16px; }          /* tweak smaller/bigger to taste */

.podium{
  justify-content: center !important;  /* stop space-around pushing them apart */
  gap: var(--pod-gap) !important;      /* explicit spacing between pillars */
}

.pillar{ width: 40% !important; }      /* a touch narrower so they can sit closer */

/* Align helpers (if not already present) */
.items-center { align-items: center; }

/* Crest image sizing + spacing */
.crest {
  height: 150px;        /* adjust to taste */
  width: auto;
  margin-right: 12px;  /* space before the heading */
  display: block;
}

/* Big podium title, responsive but much larger */
.podium-title{
  margin: 0;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .2px;
  font-size: clamp(30px, 5.2vw, 62px); /* adjust max if you want it even bigger */
}


.header .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;               /* space between crest and text */
  font-weight: 900;
}

.Headercrest {
  height: 32px;            /* tweak to taste */
  width: auto;
  display: block;
}

/* one tie entry: [student] [action] [perf] [year] [house] */
.selset{
  display:grid;
  /* name | action | performance | year | house */
  grid-template-columns: minmax(360px,640px) 110px 220px 120px 220px;
  gap:10px;
  align-items:center;
}

/* default info box */
.info-box{
  min-width:200px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  background:#fff;
  font-size:14px;
  font-weight:800;
  text-align:center;
  text-transform:uppercase;
}

/* override sizes for specific boxes */
.info-box[data-role="year"]  { min-width:120px; }  /* half width */
.info-box[data-role="house"] { min-width:220px; }  /* keep nice & wide */

/* 1) Narrow the PLACE column */
.row{
  /* was: grid-template-columns: 72px 1fr; */
  grid-template-columns: 56px 1fr;   /* slimmer “1st/2nd/3rd…” */
}

/* 2) Tie-entry layout with a smaller Year column */
.selset{
  /* name | action | performance | year | house */
  /* was: minmax(360px,640px) 110px 220px 220px 220px */
  grid-template-columns: minmax(420px, 1fr) 100px 220px 140px 220px !important;
}

/* Make Year truly half-width, House wide, regardless of previous rules */
.info-box[data-role="year"]{
  width: 140px !important;
  min-width: 140px !important;
}

.info-box[data-role="house"]{
  width: 220px !important;
  min-width: 220px !important;
}