/* Canada box (Macro Anchor Dashboard; [goat-dash edit 2026-10-17]: test-copy badge removed). Palette + bento/chip rules copied from Goat's dashboard (body.bb blue-blocker). */
:root{--bg:#0d1117;--box:#161b22;--bd:#222b36;--tx:#d6dde6;--mu:#8b96a5;--ac:#6cb6ff;--rd:#1d2633;--up:#56d364;--dn:#f85149}
body.bb{--bg:#14110e;--box:#1e1a16;--bd:#3a322a;--tx:#f3ead8;--mu:#b8a990;--ac:#ffc93c;--rd:#2a231c;--up:#9be22d;--dn:#ff4d3d}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.45 -apple-system,system-ui,Segoe UI,Roboto,sans-serif}
header{padding:12px 16px;border-bottom:1px solid var(--bd);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
header h1{font-size:21px;font-weight:800;margin:0;letter-spacing:.2px}header small{color:var(--mu);text-align:center;font-size:14px}
@media(max-width:700px){header{grid-template-columns:1fr auto}header small{grid-column:1/-1;grid-row:2;text-align:left}}
a{color:var(--ac);text-decoration:none}
.grid{display:grid;grid-template-columns:1fr;gap:14px;padding:14px;max-width:1500px;margin:auto}
.bento{border:1px solid var(--bd);border-radius:16px;background:linear-gradient(160deg,var(--box),var(--rd))}  /* [sticky fix] no overflow:hidden here: it made .bento the sticky scroll container, so the TIME bar never pinned */
.bento .bhd{padding:14px 16px;cursor:pointer;user-select:none;border-radius:15px 15px 0 0}.bento .bhd:hover{box-shadow:inset 0 0 0 1px var(--ac)}
.bento h2{margin:0 0 8px;color:var(--ac);font-size:20px}
.bento .chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;gap:6px;align-items:baseline;border:1px solid var(--bd);border-radius:999px;padding:3px 10px;background:var(--bg);font-size:13px}
.chip i{font-style:normal;color:var(--mu);font-size:11px}.chip b{font-weight:700}
.up{color:var(--up)}.dn{color:var(--dn)}.mu{color:var(--mu)}
.bento .tap{display:block;margin-top:8px;font-size:11px;color:var(--ac);opacity:.85}
.bento .bbody{display:none;padding:0 12px 12px}.bento.open .bbody{display:block}
/* tiles */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.tile{grid-column:span 2;border:1px solid var(--bd);border-radius:12px;background:var(--bg);padding:12px 14px;display:flex;flex-direction:column;min-width:0}
.tile.wide{grid-column:span 3}.tile.full{grid-column:1/-1}
@media(max-width:1100px){.tiles{grid-template-columns:1fr 1fr}.tile,.tile.wide{grid-column:span 1}.tile.bm,.tile.nhpi{grid-column:1/-1}}  /* [layout fix] NHPI full row on tablets too */
@media(max-width:700px){.tiles{grid-template-columns:1fr}.tile,.tile.wide,.tile.bm{grid-column:1/-1}}
.tile h3{margin:0 0 6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);font-weight:700}
.big{font-size:30px;font-weight:800;line-height:1.1}.big small{font-size:14px;color:var(--mu);font-weight:600;margin-left:6px}
.sub{font-size:13px;margin-top:4px}.sub b{font-weight:700}
.chart{height:120px;margin:8px -4px 2px}
.note{font-size:12px;color:var(--mu);margin-top:6px}
.note.warn{color:var(--ac)}
.src{margin-top:auto;padding-top:8px;font-size:10.5px;line-height:1.35;color:var(--mu);border-top:1px dashed var(--bd)}
.src a{color:var(--mu);text-decoration:underline}
/* big mac */
.bm-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 6px}
.bm-trio div{border:1px solid var(--bd);border-radius:10px;padding:6px 8px;background:linear-gradient(160deg,var(--box),var(--rd))}
.bm-trio i{display:block;font-style:normal;font-size:11px;color:var(--mu)}.bm-trio b{font-size:20px;font-weight:800}
.bm-trio .off b{color:var(--mu);font-size:13px;font-weight:600}
.bm-slide{display:flex;align-items:center;gap:10px;margin:6px 0}
.bm-slide input{flex:1;accent-color:var(--ac);min-width:0}
.bm-date{font-weight:800;color:var(--ac);min-width:76px;text-align:right;font-variant-numeric:tabular-nums}
.bm-val{font-size:13px;margin:4px 0}
.bm-pp{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px;font-size:12.5px}
.bm-pp div{border-left:2px solid var(--ac);padding-left:8px}
.bm-why{margin:8px 0 2px;border:1px solid var(--bd);border-radius:10px;padding:6px 10px}
.bm-why summary{cursor:pointer;color:var(--ac);font-size:12.5px;font-weight:700}
.bm-why p{margin:6px 0 2px;font-size:13px}
.bm-cols{display:grid;grid-template-columns:1.1fr 1fr;gap:14px}
@media(max-width:1100px){.bm-cols{grid-template-columns:1fr}}
@media(max-width:480px){.big{font-size:26px}}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mu);margin-right:4px;vertical-align:middle}
.live-dot.on{background:var(--up);box-shadow:0 0 6px var(--up)}
/* shared time slider (one control for all time-based tiles) */
.timebar{position:-webkit-sticky;position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:8px 12px;border:1px solid var(--bd);border-radius:12px;background:var(--box)}
.timebar .tb-lab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mu);font-weight:700}
.timebar input{flex:1;accent-color:var(--ac);min-width:0}
#can-live{border:1px solid var(--bd);background:var(--bg);color:var(--mu);border-radius:999px;padding:3px 10px;font:700 12px system-ui;cursor:pointer}
#can-live.on{border-color:var(--up);color:var(--up);box-shadow:0 0 6px rgba(155,226,45,.35)}
.bm-rel{font-size:12.5px;color:var(--mu);margin:2px 0 4px}.bm-rel b{color:var(--ac)}
/* new housing price index tile */
.nh-lab{font-size:11.5px;color:var(--ac);border:1px dashed var(--bd);border-radius:8px;padding:3px 8px;margin:0 0 6px;display:inline-block}
.nt{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums;margin-top:4px}
.nt th{text-align:right;color:var(--mu);font-weight:600;font-size:10.5px;padding:3px 6px;border-bottom:1px solid var(--bd)}
.nt th:first-child,.nt td:first-child{text-align:left}
.nt td{text-align:right;padding:3px 6px;border-bottom:1px solid var(--bd);white-space:nowrap}
.nt tr.vic td:first-child{color:var(--ac)}
.foot{max-width:1500px;margin:0 auto;padding:0 16px 18px;font-size:10.5px;color:var(--mu)}
@media(max-width:480px){.nt{font-size:11.5px}.nt th,.nt td{padding:3px 3px}}
.nh-cap{font-size:10.5px;color:var(--mu);margin-top:2px}
.nh-cap{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mini{border:1px solid var(--bd);background:var(--bg);color:var(--mu);border-radius:999px;padding:1px 9px;font:600 10.5px system-ui;cursor:pointer;min-height:22px}
.mini[aria-pressed="true"]{border-color:var(--ac);color:var(--ac)}
.nh-llnote{font-size:10.5px;color:var(--ac);margin-top:2px}
@media(max-width:700px){.mini{min-height:28px;padding:2px 12px}}

/* [goat-dash edit 2026-10-17] header back link like the other panels */
header small a{color:var(--ac)}

/* [sticky fix 2026-10-17] TIME bar stays pinned to the viewport top across the whole Canada box; compact while stuck */
.timebar{transition:padding .15s,border-radius .15s,box-shadow .15s}
.timebar.stuck{padding:4px 12px;border-radius:0 0 12px 12px;border-top-color:transparent;box-shadow:0 6px 14px rgba(0,0,0,.55);margin-left:-12px;margin-right:-12px}
.timebar.stuck .tb-lab{display:none}
.timebar input{touch-action:none}
#canbody{overflow-anchor:none}  /* canada.js keeps the viewed tile still instead (same result in every browser) */
@media(pointer:coarse){.timebar input{height:30px}}
/* [layout fix] wide screens: NHPI gets the full row (charts left, CMA table right) so Big Mac no longer sits over an empty block */
@media(min-width:1101px){
 .tile.bm,.tile.nhpi{grid-column:1/-1}
 .tile.nhpi{display:grid;grid-template-columns:1.15fr 1fr;column-gap:18px;align-content:start}
 .tile.nhpi>*{grid-column:1}
 .tile.nhpi>.nh-lab{justify-self:start}
 .tile.nhpi>.nh-side{grid-column:2;grid-row:1 / span 8;align-self:start}
 .tile.nhpi>.src{grid-column:1/-1}
}

/* [homes btn 2026-10-17] local-only 'homes · private' link in the TIME bar (only ever added by canada.js on a local copy) */
.lbtn{text-decoration:none;color:var(--tx);white-space:nowrap;font-size:12px;font-weight:700;padding:3px 10px;cursor:pointer;flex:none}
.lbtn:hover,.lbtn:focus-visible{border-color:var(--ac);color:var(--ac)}
.timebar.stuck .lbtn{padding:2px 8px}
@media(max-width:480px){.lbtn .lb2{display:none}}