/* Department dashboards on the public site: the index cards, the At-a-glance
   cards at the top of every town report, and the modal a dashboard opens in.
   Colours come from Material's own variables, so light and dark both work. */

/* ------------------------------------------------------------ town cards */

/* The index of departments is a set of summaries you click into, not a table
   to read across -- each card carries enough to compare departments without
   opening any of them. */
.town-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .8rem;
  margin: 1.2rem 0 2rem;
  max-width: none;
}
.md-typeset a.town-card, .md-typeset div.town-card {
  display: flex;
  flex-direction: column;
  padding: .9rem 1rem 1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.md-typeset a.town-card:hover {
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.tc-name {
  font-weight: 700; font-size: .82rem; line-height: 1.25;
  margin-bottom: .35rem;
}
.tc-big {
  font-size: 1.6rem; font-weight: 700; line-height: 1;
  color: var(--md-primary-fg-color);
  font-variant-numeric: tabular-nums;
}
.tc-lbl {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--md-default-fg-color--light); margin-bottom: .55rem;
}
.tc-stats {
  font-size: .66rem; line-height: 1.55;
  color: var(--md-default-fg-color--light);
  border-top: 1px solid var(--md-default-fg-color--lightest);
  padding-top: .5rem;
}
.tc-stats b { color: var(--md-default-fg-color); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- at a glance */

.md-typeset .glance-headline {
  font-size: 1.15rem; line-height: 1.4; margin: .4rem 0 1rem;
  color: var(--md-default-fg-color);
}
.md-typeset .glance-headline strong { color: var(--md-primary-fg-color); }
.glance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: .7rem;
  margin: 0 0 1.4rem;
}
.md-typeset .glance-card {
  display: flex; flex-direction: column;
  padding: .8rem .95rem .9rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  color: inherit; text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.md-typeset a.glance-card:hover {
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.gc-big {
  font-size: 1.45rem; font-weight: 700; line-height: 1.1;
  color: var(--md-primary-fg-color); font-variant-numeric: tabular-nums;
}
.gc-lbl {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--md-default-fg-color--light); margin: .2rem 0 .45rem;
}
.gc-detail {
  font-size: .7rem; line-height: 1.45; color: var(--md-default-fg-color--light);
  border-top: 1px solid var(--md-default-fg-color--lightest); padding-top: .4rem;
}

/* ------------------------------------------------------ dashboard modal */

html.dash-modal-open { overflow: hidden; }
.dash-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, .55);
  display: flex; align-items: stretch; justify-content: center;
  padding: 2.5vh 2.5vw;
}
.dash-modal__box {
  display: flex; flex-direction: column; width: 100%; max-width: 1400px;
  background: var(--md-default-bg-color); border-radius: 10px; overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
.dash-modal__bar {
  display: flex; align-items: center; gap: .8rem;
  padding: .55rem .9rem; font-size: .75rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}
.dash-modal__title { font-weight: 700; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-modal__full { color: var(--md-typeset-a-color); text-decoration: none; white-space: nowrap; }
.dash-modal__close {
  font: inherit; cursor: pointer; white-space: nowrap;
  padding: .3rem .8rem; border-radius: 999px;
  border: 1px solid var(--md-default-fg-color--lighter);
  background: transparent; color: var(--md-default-fg-color);
}
.dash-modal__close:hover { border-color: var(--md-primary-fg-color); }
.dash-modal__frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }

/* ------------------------------------------------------ landing page */

.card-pair {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  margin: 1.2rem 0 1.4rem; max-width: none;
}
@media screen and (min-width: 60em) { .card-pair { grid-template-columns: 1fr 1fr; } }
.card-pair p { margin: 0; }
.md-typeset .card-pair img { max-width: 100%; height: auto; }
.md-typeset .town-card.soon { border-style: dashed; opacity: .75; }
.md-typeset .town-card.soon .tc-big { color: var(--md-default-fg-color--light); }

/* Landing page: the animated "who searches" map, opening the interactive in the modal */
.md-typeset .map-gif { margin: 1.2em 0 0; }
.md-typeset .map-gif a { display: block; }
.md-typeset .map-gif img { display: block; width: 100%; height: auto; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; }
.md-typeset .map-gif figcaption { font-size: .8rem; color: var(--md-default-fg-color--light); margin: .5em 0 0; max-width: none; text-align: left; }

/* Cross-town matrix: the page takes the whole screen (matrix_layout.py hides the
   sidebars and drops a .matrix-page marker), the 24-column table is tightened,
   and the Town column stays put when the table scrolls sideways. */
.md-main:has(.matrix-page) .md-grid { max-width: min(100%, 140rem); }
.md-content:has(.matrix-page) .md-typeset > p,
.md-content:has(.matrix-page) .md-typeset > blockquote { max-width: 52rem; }
.md-content:has(.matrix-page) .md-typeset table:not([class]) { font-size: .64rem; }
.md-content:has(.matrix-page) .md-typeset table:not([class]) th,
.md-content:has(.matrix-page) .md-typeset table:not([class]) td { padding: .45em .6em; }
.md-content:has(.matrix-page) .md-typeset table:not([class]) th {
  vertical-align: bottom; line-height: 1.25; min-width: 0; /* the theme's 5rem floor x 24 columns overflows any screen */
  hyphens: none; overflow-wrap: normal;
}
.md-content:has(.matrix-page) .md-typeset table:not([class]) td { white-space: nowrap; }
.md-content:has(.matrix-page) .md-typeset table:not([class]) th:first-child,
.md-content:has(.matrix-page) .md-typeset table:not([class]) td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--md-default-bg-color);
  box-shadow: 1px 0 0 var(--md-default-fg-color--lightest);
}

/* ---------------------------------------------------------- feedback */

/* "Questions? Feedback?" pinned to the bottom-right of every page (see
   overrides/main.html). Shortens to "Questions?" on a phone. */
.md-typeset a.fb-fab, a.fb-fab {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem 1rem;
  border-radius: 2rem;
  border: 2px solid var(--md-primary-bg-color);
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .25);
  transition: transform .15s, box-shadow .15s;
}
.md-typeset a.fb-fab:hover, .md-typeset a.fb-fab:focus-visible {
  color: var(--md-primary-bg-color);
  background: var(--md-primary-fg-color--dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .3);
}
.fb-fab svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
@media screen and (max-width: 44.9375em) {
  .md-typeset a.fb-fab { right: .8rem; bottom: .8rem; padding: .55rem .9rem; }
  .fb-fab .fb-long { display: none; }
}
@media print { .fb-fab { display: none; } }

.fb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  margin: 1.2rem 0;
}
.md-typeset .fb-card {
  padding: .2rem 1.2rem 1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
}
.md-typeset .fb-card .md-button { margin: .25rem .3rem .25rem 0; }