/* Homepage styling for the existing compact monitoring layout. No data colours. */
:root {
  --im-bg: var(--yl-bg); --im-surface: var(--yl-surface);
  --im-surface-2: #f3ecff; --im-surface-3: #fcfaff;
  --im-line: var(--yl-border); --im-line-strong: var(--yl-control-border);
  --im-ink: var(--yl-ink); --im-ink-2: var(--yl-ink-muted); --im-ink-3: var(--yl-ink-muted);
  --im-accent: var(--yl-primary); --im-accent-soft: var(--yl-primary-soft);
  --im-focus: var(--yl-focus);
}
.topbar { background: #fcfaff; border-color: var(--yl-border); }
.topbar .brand { color: var(--yl-ink); }
.topbar .brand > svg { color: var(--yl-primary); }
.topics a[aria-current="page"], .mobile-nav a[aria-current="page"] {
  color: var(--yl-primary-hover); background: var(--yl-primary-soft); border-color: var(--yl-border);
}
.provinces a[aria-current="page"] { background: var(--yl-primary); color: #fff; border-color: var(--yl-primary); }
#refresh-button { color: var(--yl-primary-hover); background: #fff; border-color: var(--yl-control-border); border-radius: 12px; }
#refresh-button:hover { background: var(--yl-primary-soft); }
.watch-panel, .ledger-group { box-shadow: var(--yl-shadow-card); }
.group-head { background: var(--yl-card-background); }
.map-dialog { border-color: var(--yl-border); border-radius: 20px; box-shadow: 0 24px 64px rgb(43 20 90 / 22%); }
.map-header, .map-footer { background: #fcfaff; border-color: var(--yl-border); }
.map-button { color: var(--yl-primary-hover); }
.mobile-nav { background: #fcfaff; border-color: var(--yl-border); }
@media (forced-colors: active) {
  .topbar, .group-head, .mobile-nav { background: Canvas; }
  .provinces a[aria-current="page"], .topics a[aria-current="page"], .mobile-nav a[aria-current="page"] { color: LinkText; background: Canvas; border-color: LinkText; }
}
/* Four provinces must fit beside the brand on narrow screens. */
@media (max-width: 899px) {
  .provinces a { min-width: 0; padding: 8px 7px; font-size: .8125rem; }
}
@media (max-width: 399px) {
  .topbar .brand > span { font-size: .8125rem; }
  .provinces a { padding: 8px 5px; font-size: .75rem; }
}