/* ==========================================================================
   Singapore Industry Decarbonisation Forum — design system
   Every colour lives in the :root block below. Re-skinning = edit this block.
   ========================================================================== */

:root {
  /* brand */
  --navy-900:#0B1F44; --navy-800:#12295C; --navy-700:#1A3A75; --navy-600:#254B8C;
  --brand-700:#164FB0; --brand-600:#1D5FD0; --brand-500:#2B7CF7; --brand-100:#DCE8FD; --brand-050:#EEF4FE;
  --green-600:#1E8E5A; --green-050:#E8F6EF;
  --amber-600:#B7791F; --amber-050:#FDF6E7;
  --red-600:#C53434;   --red-050:#FDECEC;

  /* neutrals */
  --ink:#10182B; --ink-2:#33405A; --muted:#5F6C86; --muted-2:#8A95AA;
  --line:#E3E9F2; --line-2:#EFF3F9;
  --bg:#F4F7FC; --surface:#FFFFFF;

  /* shape */
  --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(16,24,43,.06), 0 1px 3px rgba(16,24,43,.05);
  --sh-2:0 2px 6px rgba(16,24,43,.06), 0 8px 24px rgba(16,24,43,.07);
  --sh-3:0 12px 40px rgba(16,24,43,.14);

  /* Metropolis matches the official EDB event site; self-hosted, see the @font-face
     block below. The system stack behind it keeps the layout intact if a face fails
     to load. */
  --font: Metropolis, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --maxw: 1280px;
}

/* ---------------------------------------------------------------- Metropolis
   The typeface used on the official EDB event site, self-hosted from
   /assets/fonts so the app makes no third-party requests and keeps working
   behind corporate firewalls. Paths are relative to this file, which keeps
   them correct however deep the subfolder deployment sits.

   Only the four weights the design system uses are shipped (400/500/600/700)
   plus one italic; add a face here if a new weight is ever introduced.
   See assets/fonts/README.md for provenance. */
@font-face {
  font-family:Metropolis; src:url("../fonts/Metropolis-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face {
  font-family:Metropolis; src:url("../fonts/Metropolis-RegularItalic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face {
  font-family:Metropolis; src:url("../fonts/Metropolis-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
/* Upstream files SemiBold under a separate family name ("Metropolis Semi"), so a
   plain font-weight:600 falls back to Bold. Declaring it here at 600 is what makes
   buttons, labels and card titles render at the weight the design asks for. */
@font-face {
  font-family:Metropolis; src:url("../fonts/Metropolis-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face {
  font-family:Metropolis; src:url("../fonts/Metropolis-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--font); font-size:15px; line-height:1.55;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5 { margin:0 0 .5em; line-height:1.25; font-weight:700; letter-spacing:-.01em; overflow-wrap:break-word; }
h1{font-size:28px} h2{font-size:22px} h3{font-size:18px} h4{font-size:16px}
p { margin:0 0 1em; overflow-wrap:break-word; }
a { color:var(--brand-600); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; height:auto; display:block; }
hr { border:0; border-top:1px solid var(--line); margin:20px 0; }
small { font-size:12.5px; }

/* ---------------------------------------------------------------- layout */
.container { max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.container-narrow { max-width:940px; margin:0 auto; padding:0 20px; }
.stack > * + * { margin-top:16px; }
.row { display:flex; gap:16px; flex-wrap:wrap; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.grid { display:grid; gap:16px; }
.grid > *, .detail-grid > * { min-width:0; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1024px){ .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)} }
.spacer { flex:1 1 auto; }
.text-muted { color:var(--muted); }
.text-sm { font-size:13px; }
.text-center { text-align:center; }
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}

/* ---------------------------------------------------------------- card */
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.card-pad { padding:20px; }
.card-head {
  padding:16px 20px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.card-head h2,.card-head h3 { margin:0; }
.card-body { padding:20px; }
.card-foot { padding:14px 20px; border-top:1px solid var(--line); background:var(--line-2); border-radius:0 0 var(--r-lg) var(--r-lg); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:var(--r); border:1px solid transparent;
  font-family:inherit; font-size:14.5px; font-weight:600; line-height:1.2;
  cursor:pointer; transition:background .15s, border-color .15s, box-shadow .15s, transform .05s;
  text-decoration:none; white-space:nowrap;
}
.btn:hover { text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn:focus-visible { outline:3px solid var(--brand-100); outline-offset:1px; }
.btn-primary { background:var(--brand-600); color:#fff; }
.btn-primary:hover { background:var(--brand-700); color:#fff; }
.btn-navy { background:var(--navy-800); color:#fff; }
.btn-navy:hover { background:var(--navy-900); color:#fff; }
.btn-outline { background:var(--surface); border-color:var(--line); color:var(--ink-2); }
.btn-outline:hover { border-color:var(--brand-500); color:var(--brand-700); }
.btn-ghost { background:transparent; color:var(--muted); }
.btn-ghost:hover { background:var(--line-2); color:var(--ink); }
.btn-danger { background:var(--red-600); color:#fff; }
.btn-danger:hover { background:#A82A2A; color:#fff; }
.btn-success { background:var(--green-600); color:#fff; }
.btn-success:hover { background:#177849; color:#fff; }
.btn-block { width:100%; }
.btn-sm { padding:7px 12px; font-size:13px; border-radius:var(--r-sm); }
.btn-lg { padding:14px 26px; font-size:16px; }
.btn[disabled],.btn.is-disabled { opacity:.5; pointer-events:none; }

/* ---------------------------------------------------------------- forms */
.field { margin-bottom:18px; }
.label { display:block; font-weight:600; font-size:13.5px; margin-bottom:6px; color:var(--ink-2); }
.label .req { color:var(--red-600); margin-left:2px; }
.input, .select, .textarea {
  width:100%; padding:11px 13px; font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r);
  transition:border-color .15s, box-shadow .15s;
}
.input:focus,.select:focus,.textarea:focus {
  outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px var(--brand-100);
}
.input::placeholder { color:var(--muted-2); }
.textarea { min-height:110px; resize:vertical; }
.input-xs { padding:6px 9px; font-size:13px; }
.select {
  appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235F6C86' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
.field-error .input,.field-error .select,.field-error .textarea { border-color:var(--red-600); }
.error-text { color:var(--red-600); font-size:12.5px; margin-top:5px; font-weight:500; }
.help-text { color:var(--muted); font-size:12.5px; margin-top:5px; }

.check { display:flex; gap:11px; align-items:flex-start; margin-bottom:14px; }
.check input[type=checkbox] {
  width:18px; height:18px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--brand-600); cursor:pointer;
}
.check label { font-size:13.5px; color:var(--ink-2); line-height:1.5; cursor:pointer; }

/* ---------------------------------------------------------------- badges */
.badge {
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px;
  border-radius:var(--r-pill); font-size:12px; font-weight:600; line-height:1.6; white-space:nowrap;
}
.badge, .badge * { overflow-wrap:normal; }
.badge-blue{background:var(--brand-050);color:var(--brand-700)}
.badge-green{background:var(--green-050);color:var(--green-600)}
.badge-amber{background:var(--amber-050);color:var(--amber-600)}
.badge-red{background:var(--red-050);color:var(--red-600)}
.badge-grey{background:var(--line-2);color:var(--muted)}
.badge-navy{background:var(--navy-800);color:#fff}

/* ---------------------------------------------------------------- alerts */
.alert { padding:13px 16px; border-radius:var(--r); font-size:14px; border:1px solid; margin-bottom:16px; }
.alert-info{background:var(--brand-050);border-color:var(--brand-100);color:var(--brand-700)}
.alert-success{background:var(--green-050);border-color:#BFE6D3;color:#14603C}
.alert-warning{background:var(--amber-050);border-color:#F3DFB0;color:#8A5A12}
.alert-error{background:var(--red-050);border-color:#F5C9C9;color:#8E2323}

/* ---------------------------------------------------------------- table */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table th {
  text-align:left; padding:11px 14px; font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); background:var(--line-2);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.table td { padding:13px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.table tbody tr:hover { background:var(--brand-050); }
.table-empty { padding:44px 20px; text-align:center; color:var(--muted); }

/* ---------------------------------------------------------------- avatar */
.avatar {
  width:44px; height:44px; border-radius:var(--r-pill); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-600); color:#fff; font-weight:700; font-size:15px;
  letter-spacing:.02em; overflow:hidden;
}
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar-lg { width:76px; height:76px; font-size:26px; }
.avatar-xl { width:104px; height:104px; font-size:34px; }
.avatar-sm { width:34px; height:34px; font-size:12.5px; }

/* ---------------------------------------------------------------- misc */
.divider-text { display:flex; align-items:center; gap:12px; color:var(--muted-2); font-size:12.5px; margin:18px 0; }
.divider-text::before,.divider-text::after { content:""; flex:1; height:1px; background:var(--line); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------------------------------------------------------------- mobile refinements
   Phones get 16px form text — anything smaller makes iOS Safari zoom the page in on
   focus — and 44px minimum tap targets (Apple HIG / WCAG 2.5.5). */
@media (max-width:860px) {
  .input, .select, .textarea { font-size:16px; padding:12px 13px; }
  .input-xs { font-size:16px; padding:9px 11px; }
  .select { padding-right:38px; }
  .textarea { min-height:120px; }

  .btn { padding:12px 18px; min-height:44px; }
  .btn-sm { padding:9px 14px; font-size:13.5px; min-height:40px; }
  .btn-lg { min-height:50px; }

  .check { gap:13px; }
  .check input[type=checkbox] { width:22px; height:22px; margin-top:0; }
  .check label { font-size:14px; padding:2px 0; }

  /* Row checkboxes have no label to tap, so extend the hit area without moving anything. */
  .table input[type=checkbox] { width:20px; height:20px; accent-color:var(--brand-600); position:relative; }
  .table input[type=checkbox]::after { content:""; position:absolute; inset:-12px; }
  .table th, .table td { padding:12px 12px; }
}