:root {
  --bg: #f7f7f5;
  --card: #ffffff;
  --ink: #16181d;
  --muted: #6b7280;
  --line: #e6e6e2;
  --accent: #2f6f4f;
  --accent-soft: #e7f1ea;
  --ccr: #b4532a;
  --rcr: #1d6fae;
  --ocr: #2f6f4f;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}
.wrap { width: min(960px, 92vw); margin: 0 auto; }

header.site { padding: 40px 0 24px; }
header.site h1 { margin: 0; font-size: 30px; letter-spacing: -.5px; }
header.site .tag { margin: 6px 0 0; color: var(--muted); font-size: 15px; }

.controls {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 8px 0 16px;
}
#search {
  flex: 1 1 240px; min-width: 200px;
  padding: 10px 14px; font-size: 16px;   /* 16px avoids iOS focus zoom */
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  outline: none;
}
#search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 7px 12px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  color: var(--muted); cursor: pointer; user-select: none;
}
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip.primary:hover { filter: brightness(1.05); }
.count { color: var(--muted); font-size: 13px; margin-left: auto; }
.count span { color: var(--ink); font-weight: 700; }

/* Modal */
.modal {
  position: fixed; inset: 0; background: rgba(20,22,28,.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px; z-index: 50; overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal-card {
  background: var(--card); border-radius: 16px; box-shadow: var(--shadow);
  width: min(520px, 100%); padding: 24px 24px 20px; position: relative;
}
.modal-card h2 { margin: 0 0 2px; font-size: 20px; }
.modal-sub { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.modal-x {
  position: absolute; top: 12px; right: 14px; border: none; background: none;
  font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer;
}
.modal-card form label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.modal-card form input, .modal-card form select {
  display: block; width: 100%; margin-top: 5px; padding: 9px 11px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink);
  box-sizing: border-box; font-family: inherit;
}
.modal-card form input:focus, .modal-card form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.row2 { display: flex; gap: 12px; }
.row2 label { flex: 1; }
.req { color: var(--ccr); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.formMsg { font-size: 13px; margin: 10px 0 0; min-height: 1em; }
.formMsg.ok { color: var(--accent); }
.formMsg.err { color: var(--ccr); }

.src { font-size: 12px; color: var(--muted); margin: 0 0 14px; }
.src .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.src .dot.live { background: var(--accent); }
.src .dot.off { background: #c9a227; }

.statbar { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.stat {
  flex: 1 1 150px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow);
}
.stat .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.stat .v { font-size: 22px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }

.tablecard {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); overflow-x: auto; -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 16px; text-align: left; }
th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  border-bottom: 1px solid var(--line); cursor: pointer; white-space: nowrap; user-select: none;
}
th:hover { color: var(--ink); }
th.sorted { color: var(--accent); }
th .arrow { font-size: 10px; opacity: .8; }
td { border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafaf8; }
.num { text-align: right; }
td.num { text-align: right; }
/* Fee value as a green heatmap chip (colour set inline per row). */
td.fee .val {
  display: inline-block; min-width: 58px; text-align: right;
  padding: 3px 9px; border-radius: 7px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Responsive header label: short "S$/mo" on small screens. */
.lbl-sm { display: none; }
@media (max-width: 640px) { .lbl-lg { display: none; } .lbl-sm { display: inline; } }
td.rank { color: var(--muted); font-weight: 700; width: 44px; }
td.name { font-weight: 600; }
td.fee { font-weight: 700; }

.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #fff;
}
.pill.CCR { background: var(--ccr); }
.pill.RCR { background: var(--rcr); }
.pill.OCR { background: var(--ocr); }

.bar { position: relative; }
.bar .fill {
  position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-soft);
  z-index: 0; border-right: 2px solid var(--accent);
}
.bar .val { position: relative; z-index: 1; }

.foot { color: var(--muted); font-size: 13px; margin: 22px 0 50px; }
.foot p { margin: 6px 0; }

/* Clickable condo rows + affordances */
tbody tr[data-id] { cursor: pointer; }
tbody tr[data-id]:focus { outline: 2px solid var(--accent-soft); outline-offset: -2px; }
.chev { color: var(--muted); font-weight: 700; opacity: .4; }
tbody tr:hover .chev { opacity: 1; color: var(--accent); }
/* Uniform row heights: every data cell stays on one line (names ellipsize). */
#grid tbody td { height: 48px; vertical-align: middle; white-space: nowrap; }
#grid td.name .namecell { display: flex; align-items: center; gap: 7px; }
#grid td.name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#grid td.name .rcount, #grid td.name .chev { flex: none; }
.rcount {
  display: inline-block; margin-left: 7px; padding: 0 7px;
  font-size: 11px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border-radius: 999px; vertical-align: middle;
}
.hint { color: var(--muted); font-size: 12px; margin: -8px 0 14px; }
td.muted { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* Clickable managing agent */
td.agent { cursor: pointer; }
td.agent:hover { color: var(--accent); text-decoration: underline; }
.agentlink { color: var(--accent); cursor: pointer; border-bottom: 1px solid currentColor; }
.agentlink:hover { opacity: .8; }
.stat-agent { cursor: pointer; }
.stat-agent:hover { border-color: var(--accent); }

/* Condo detail modal */
.modal-card.wide { width: min(760px, 100%); }
.cd-table { margin-top: 14px; box-shadow: none; }
.cd-table table { font-size: 14px; }
.cd-table th, .cd-table td { padding: 9px 12px; }
.cd-table td.fee { font-weight: 700; }
#cdStats { margin: 4px 0 0; }
#cdStats .stat { flex: 1 1 110px; }

@media (max-width: 640px) {
  header.site { padding: 28px 0 18px; }
  th, td { padding: 10px 10px; }
  th { font-size: 11px; }
  td.name { font-size: 13px; }
  td.rank { width: 28px; }
  td.fee { white-space: nowrap; }
  /* Make the table wider than the viewport so it actually scrolls sideways… */
  #grid { min-width: 720px; }
  /* …and pin the fee column to the right so it's always visible while scrolling. */
  #grid th[data-key="fee"], #grid td.fee {
    position: sticky; right: 0; z-index: 2; background: var(--card);
    box-shadow: -8px 0 9px -7px rgba(0,0,0,.22);
  }
  #grid tbody tr:hover td.fee { background: #fafaf8; }
  /* Keep the (sticky) fee column tight: short "S$/mo" header + shrink to content. */
  #grid th[data-key="fee"] { font-size: 11px; }
  #grid th[data-key="fee"], #grid td.fee { width: 1%; padding-left: 6px; padding-right: 8px; text-align: right; }
  #grid td.fee .val { min-width: 46px; padding: 3px 8px; font-size: 13px; }
  /* The detail report table scrolls on its own too. */
  .cd-table table { min-width: 540px; }
}