/* Understand a market: page-specific styles, all scoped under #page-market.
   Shared chrome (buttons, ownership key, cards, bands, CTA) lives in chrome.css. */

/* Hero and section rhythm, sized for this page like the other need pages */
#page-market .hero{padding-top:78px;padding-bottom:14px}
#page-market .hero h1{font-size:clamp(33px,5vw,48px);font-weight:700;max-width:780px}
#page-market .hero p.lead{font-size:19px;max-width:660px;margin-top:22px;color:var(--slate)}
#page-market .sec{padding-top:64px;padding-bottom:64px}
#page-market .sec>h2,#page-market .band-soft h2{font-size:clamp(26px,3.2vw,34px);font-weight:700;max-width:720px}
#page-market .sec>.sub,#page-market .band-soft .sub{font-size:16px;max-width:660px;margin-top:8px;color:var(--slate)}
#page-market p.body{font-size:15.5px;color:var(--slate);line-height:1.65;margin-top:16px;max-width:780px}
#page-market p.body b,#page-market p.body strong{color:var(--navy);font-weight:600}

/* The fraction strip: your numbers over our total equals your share */
#page-market .um-frac{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:40px}
#page-market .um-frac .fr{display:flex;flex-direction:column;min-width:230px;flex:0 1 300px}
#page-market .um-cell{border-radius:10px;padding:13px 18px;text-align:center}
#page-market .um-cell .cl{display:block;font-family:var(--display);font-weight:700;font-size:16px}
#page-market .um-cell .cs{display:block;font-size:12px;margin-top:3px}
#page-market .um-num{border:1.5px solid var(--muted);background:var(--bg)}
#page-market .um-num .cl{color:var(--slate)}
#page-market .um-num .cs{color:var(--muted)}
#page-market .um-line{border-top:2.5px solid var(--navy);margin:10px 0}
#page-market .um-den{border:1.5px solid var(--cyan);background:var(--cyan-tint)}
#page-market .um-den .cl{color:var(--cyan-ink)}
#page-market .um-den .cs{color:var(--cyan-ink)}
#page-market .um-eq{font-family:var(--display);font-weight:700;font-size:30px;color:var(--navy)}
#page-market .um-res{background:var(--navy);flex:0 1 260px;min-width:220px}
#page-market .um-res .cl{color:var(--bg)}
#page-market .um-res .cs{color:var(--cta-text-soft)}

/* The school-marks dialogue card */
#page-market .um-dlg{border:.5px solid var(--line);border-left:4px solid var(--cyan);border-radius:12px;background:var(--bg);padding:20px 24px;margin-top:26px;max-width:420px}
#page-market .um-dlg p{font-family:var(--display);font-size:16px;color:var(--navy);padding:3px 0}
#page-market .um-dlg p span{color:var(--muted);font-family:var(--body);font-size:13px;margin-right:8px}

/* The province and slice tables */
#page-market .um-table{width:100%;max-width:640px;border-collapse:collapse;margin-top:26px}
#page-market .um-table th{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-ink);text-align:left;padding:10px 10px;border-bottom:1.5px solid var(--navy)}
#page-market .um-table th.n,#page-market .um-table td.v{text-align:right}
#page-market .um-table td{padding:11px 10px;border-bottom:.5px solid var(--line);font-size:14.5px;color:var(--slate)}
#page-market .um-table td.v{font-family:var(--display);font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
#page-market .um-table td.lv{font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
#page-market .um-asat{font-size:12px;color:var(--muted);margin-top:10px}

/* Drill-down sequence: province to suburb, left to right, the area shape
   shrinking each step inside an equal-sized card to show it getting smaller.
   Each card is a fixed height so the chevrons can centre against the shapes. */
#page-market .um-drill{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin-top:34px}
#page-market .um-tile{flex:1 1 118px;min-width:106px;max-width:150px;text-align:center}
#page-market .um-tile svg{width:100%;height:104px;display:block;border:.5px solid var(--line);border-radius:12px;background:var(--bg)}
#page-market .um-a{fill:var(--cyan-tint);stroke:var(--cyan);stroke-width:1.6}
#page-market .um-tile .lv{font-family:var(--display);font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-ink);margin-top:8px}
#page-market .um-tile .nm{font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--navy);margin-top:1px}
#page-market .um-tile .wh{font-size:11px;color:var(--muted);line-height:1.35;margin-top:3px}
#page-market .um-chev{height:104px;display:flex;align-items:center;color:var(--muted);font-size:17px}

/* The manufacturer-example stat blocks */
#page-market .um-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px;margin-top:28px;max-width:840px}
#page-market .um-stat{border-left:3px solid var(--cyan);padding-left:16px}
#page-market .um-stat .v{display:block;font-family:var(--display);font-weight:700;font-size:24px;color:var(--navy);letter-spacing:-.02em}
#page-market .um-stat .l{display:block;font-size:13px;color:var(--slate);margin-top:4px;line-height:1.5}

@media(max-width:760px){#page-market .um-frac{flex-direction:column;align-items:stretch}#page-market .um-frac .fr,#page-market .um-res{flex-basis:auto}#page-market .um-eq{text-align:center}#page-market .um-chev{display:none}}