.qtr-app {
  --qtr-navy: #14224a;
  --qtr-navy-deep: #0f1a3a;
  --qtr-green: #4cc26a;
  /* White on it is 4.83:1; its edge on the navy 3.20:1. */
  --qtr-red: #d92d20;
  --qtr-focus: #9fd0ff;
  --qtr-top-height: 64px;
  --qtr-env-height: 0px;
  --qtr-chrome-top: calc(var(--qtr-top-height) + var(--qtr-env-height));
  /* The strip plus the phone's home-indicator inset, which the footer pads. */
  --qtr-foot-height: calc(32px + env(safe-area-inset-bottom, 0px));
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  background: var(--tn-color-surface);
}
.qtr-app--banner { --qtr-env-height: 24px; }

.qtr-main {
  position: relative;
  z-index: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/*
 * A DOCUMENT PAGE HOLDS THE FOOTER BELOW THE FOLD. A page streams in after a
 * loading screen, and when that screen was shorter than the window the footer
 * sat in view and then jumped (the measured layout shift on /dashboard and
 * /survey). On a document page the page area is now at least the window under
 * the bar, so the footer starts below the fold whatever arrives first.
 *
 * Keyed on the path (the data-screen attribute, set by the layout from the
 * request and kept by ScreenMarker after a client-side move), not on what is in
 * the page area. The two window-sized map screens (Home and the 3D View) leave
 * the footer in view, as the mock-up draws them, so none of this applies
 * there. The Map is a page here: the insights band under its frame makes it
 * thousands of pixels tall (components/shell/screen-kind.ts).
 */
.qtr-app[data-screen='page'] .qtr-main { min-height: calc(100dvh - var(--qtr-chrome-top)); }
.qtr-main:focus { outline: none; }

/* ------------------------------------------------------------- the top bar */

.qtr-top {
  position: relative;
  z-index: 20;
  background: var(--qtr-navy);
  color: #ffffff;
}

.qtr-env {
  min-height: var(--qtr-env-height);
  margin: 0;
  padding: 4px 16px;
  background: var(--tn-color-warning);
  color: var(--tn-color-warning-ink);
  font-size: var(--tn-text-xs);
  font-weight: var(--tn-weight-semibold);
  line-height: var(--tn-leading-snug);
  letter-spacing: var(--tn-tracking-wider);
  text-align: center;
  text-transform: uppercase;
}

.qtr-top__bar {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 16px;
  min-height: var(--qtr-top-height);
  padding: 0 16px;
  border-bottom: 1px solid var(--tn-color-header-border);
}

.qtr-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 auto;
  min-width: 0;
  padding: 6px 0;
  color: inherit;
  text-decoration: none;
}
.qtr-brand:focus-visible {
  outline: 3px solid var(--qtr-focus);
  outline-offset: 2px;
  border-radius: 8px;
}
.qtr-brand__mark { flex: none; width: 44px; height: 44px; }
.qtr-brand__lines { display: flex; flex-direction: column; min-width: 0; }
/* The portal's name is its wordmark, set in capitals as the mock-up sets it;
   the tagline under it is the eyebrow. Nothing else in the bar is capitals. */
.qtr-top__title {
  margin: 0;
  font-size: var(--tn-text-xl);
  font-weight: var(--tn-weight-bold);
  line-height: var(--tn-leading-tight);
  text-transform: uppercase;
  white-space: nowrap;
}
.qtr-top__sub {
  margin: 2px 0 0;
  color: var(--tn-color-header-ink-muted);
  font-size: var(--tn-text-xs);
  font-weight: var(--tn-weight-medium);
  line-height: var(--tn-leading-snug);
  letter-spacing: var(--tn-tracking-wider);
  text-transform: uppercase;
  white-space: nowrap;
}

.qtr-nav {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}
.qtr-nav__list {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.qtr-nav__list > li { display: flex; }
.qtr-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tn-size-touch);
  padding: 0 12px;
  color: #ffffff;
  font-size: var(--tn-text-base);
  font-weight: var(--tn-weight-medium);
  line-height: var(--tn-leading-tight);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 -3px 0 transparent;
  transition: background-color var(--tn-duration-fast) var(--tn-easing-standard),
    box-shadow var(--tn-duration-fast) var(--tn-easing-standard);
}
/* The label stays white in EVERY state. The platform's a:hover used to win
   here (0,1,1 over 0,1,0) and set the link's dark blue on the navy bar, 1.3:1,
   so a hovered item vanished. Stated per state, with the element in the
   selector, so no later link rule can take the colour back. White on the navy
   is 15.47:1; on the hover wash (white 12% over navy) still 12.5:1. */
a.qtr-nav__link,
a.qtr-nav__link:hover,
a.qtr-nav__link:focus-visible,
a.qtr-nav__link:active,
a.qtr-nav__link[aria-current='page'],
a.qtr-brand,
a.qtr-brand:hover { color: #ffffff; }
.qtr-nav__link:hover { background: rgba(255, 255, 255, 0.12); }
.qtr-nav__link:focus-visible {
  outline: 3px solid var(--qtr-focus);
  outline-offset: -3px;
  background: rgba(255, 255, 255, 0.12);
}
.qtr-nav__link[aria-current='page'] { box-shadow: inset 0 -3px 0 var(--qtr-green); }
.qtr-nav__icon { display: inline-flex; flex: none; }
.qtr-nav__link[aria-current='page'] .qtr-nav__icon { color: var(--qtr-green); }

.qtr-top__side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin-left: auto;
}

/* The phone menu: hidden while the links fit inline. */
.qtr-top__menu { display: none; }
.qtr-top__menu-button,
.qtr-bell__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tn-size-control);
  height: var(--tn-size-control);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  list-style: none;
}
.qtr-top__menu-button::-webkit-details-marker { display: none; }
.qtr-top__menu-button::marker { content: ''; }
.qtr-top__menu-button:hover,
.qtr-bell__button:hover,
.qtr-top__menu[open] .qtr-top__menu-button { background: rgba(255, 255, 255, 0.1); }
.qtr-top__menu-button:focus-visible,
.qtr-bell__button:focus-visible {
  outline: 3px solid var(--qtr-focus);
  outline-offset: 0;
}
.qtr-top__menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 8px 16px 12px;
  background: var(--qtr-navy);
  border-top: 1px solid var(--tn-color-header-border);
  box-shadow: 0 12px 24px -8px rgba(8, 16, 40, 0.5);
}
.qtr-top__menu-panel .qtr-nav__list { flex-direction: column; gap: 2px; }
.qtr-top__menu-panel .qtr-nav__link {
  width: 100%;
  min-height: var(--tn-size-control-lg);
  padding: 0 12px;
  border-radius: 8px;
  box-shadow: inset 3px 0 0 transparent;
}
.qtr-top__menu-panel .qtr-nav__link[aria-current='page'] {
  box-shadow: inset 3px 0 0 var(--qtr-green);
  background: rgba(255, 255, 255, 0.07);
}

/* ------------------------------------------------------------------ the bell */

.qtr-bell { position: relative; }
.qtr-bell__badge {
  position: absolute;
  top: 0;
  right: -1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--qtr-red);
  color: #ffffff;
  font-size: var(--tn-text-xs);
  font-weight: var(--tn-weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--qtr-navy);
}
.qtr-bell__panel,
.qtr-user__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  padding: 12px;
  background: var(--tn-color-surface-raised);
  color: var(--tn-color-text);
  border: 1px solid var(--tn-color-border);
  border-radius: 12px;
  box-shadow: var(--tn-shadow-lg);
}
.qtr-bell__panel { width: min(360px, calc(100vw - 32px)); }
.qtr-bell__panel[hidden] { display: none; }
.qtr-bell__title {
  margin: 0 0 8px;
  font-size: var(--tn-text-sm);
  font-weight: var(--tn-weight-semibold);
}
.qtr-bell__empty { margin: 0; color: var(--tn-color-text-muted); font-size: var(--tn-text-sm); }
.qtr-bell__list { margin: 0; padding: 0; list-style: none; }
.qtr-bell__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--tn-color-border);
}
.qtr-bell__item:first-child { border-top: 0; }
.qtr-bell__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--tn-color-accent-soft);
  color: var(--tn-color-accent-soft-ink);
}
.qtr-bell__item[data-kind='edited'] .qtr-bell__icon { background: #fbf1de; color: #7a4a08; }
.qtr-bell__text { display: flex; flex-direction: column; min-width: 0; }
.qtr-bell__what { font-size: var(--tn-text-sm); line-height: var(--tn-leading-snug); overflow-wrap: anywhere; }
.qtr-bell__when { color: var(--tn-color-text-muted); font-size: var(--tn-text-xs); line-height: var(--tn-leading-snug); }
/* The placeholder the bell streams into: the same box, not yet a control. */
.qtr-bell__button--waiting { cursor: default; opacity: 0.72; }
.qtr-bell__button--waiting:hover { background: transparent; }
.qtr-bell__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--tn-color-border);
}
.qtr-bell__action {
  display: inline-flex;
  align-items: center;
  min-height: var(--tn-size-control);
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--tn-color-accent);
  font: inherit;
  font-size: var(--tn-text-sm);
  font-weight: var(--tn-weight-semibold);
  text-decoration: none;
  cursor: pointer;
}
.qtr-bell__action:hover { text-decoration: underline; }
.qtr-bell__action:disabled { color: var(--tn-color-text-faint); cursor: default; text-decoration: none; }
.qtr-bell__action:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 0; border-radius: 6px; }

/* -------------------------------------------------------------- the account */

.qtr-user { position: relative; }
.qtr-user__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tn-size-control);
  padding: 0 8px 0 4px;
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  list-style: none;
}
.qtr-user__summary::-webkit-details-marker { display: none; }
.qtr-user__summary::marker { content: ''; }
.qtr-user__summary:hover,
.qtr-user[open] .qtr-user__summary { background: rgba(255, 255, 255, 0.1); }
.qtr-user__summary:focus-visible { outline: 3px solid var(--qtr-focus); outline-offset: 0; }
.qtr-user__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--qtr-navy);
  font-size: var(--tn-text-sm);
  font-weight: var(--tn-weight-bold);
  line-height: 1;
}
.qtr-user__name {
  max-width: 16ch;
  overflow: hidden;
  font-size: var(--tn-text-base);
  font-weight: var(--tn-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qtr-user__chevron {
  display: inline-flex;
  transition: transform var(--tn-duration-fast) var(--tn-easing-standard);
}
.qtr-user[open] .qtr-user__chevron { transform: rotate(180deg); }
.qtr-user__panel { width: 272px; }
.qtr-user__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 8px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid var(--tn-color-border);
  overflow-wrap: anywhere;
}
.qtr-user__who strong { font-weight: var(--tn-weight-semibold); }
.qtr-user__who span { color: var(--tn-color-text-muted); font-size: var(--tn-text-sm); }
.qtr-user__links { margin: 0 0 8px; padding: 0; list-style: none; }
.qtr-user__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tn-size-control);
  padding: 0 8px;
  border-radius: 8px;
  color: var(--tn-color-text);
  font-size: var(--tn-text-sm);
  text-decoration: none;
}
.qtr-user__link:hover { background: var(--tn-color-surface-sunken); color: var(--tn-color-text); }
.qtr-user__link:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 0; }
.qtr-user__signout { padding: 4px; }

/* --------------------------------------------------------------- the footer */

.qtr-foot {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 16px;
  min-height: var(--qtr-foot-height);
  padding: 6px 16px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--qtr-navy);
  color: #ffffff;
  font-size: var(--tn-text-sm);
  line-height: var(--tn-leading-snug);
}
.qtr-foot__part {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
}
.qtr-foot__name { justify-self: start; }
.qtr-foot__rights { justify-self: center; color: #dfe6f5; }
.qtr-foot__credit { justify-self: end; }
.qtr-foot svg { flex: none; color: var(--qtr-green); }

/* ------------------------------------------------------ plain page frame */

.qtr-page {
  width: 100%;
  max-width: var(--tn-size-content-max);
  margin: 0 auto;
  padding: 24px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.qtr-page__title {
  margin: 0;
  color: var(--tn-color-text);
  font-size: var(--tn-text-xxl);
  font-weight: var(--tn-weight-bold);
  line-height: var(--tn-leading-tight);
  letter-spacing: var(--tn-tracking-tight);
}
.qtr-page__lede {
  margin: 0;
  max-width: var(--tn-size-prose-max);
  color: var(--tn-color-text-muted);
}
.qtr-loading {
  margin: 0;
  color: var(--tn-color-text-muted);
  font-size: var(--tn-text-sm);
}

/*
 * NARROWER SCREENS. The bar is one row, so it is budgeted by width: the name,
 * seven links and the account together need about 1390px at full size. Below
 * 1440 everything tightens (the mock-up's own 1280 fits with room to spare);
 * below 1280 the account shows its avatar alone; below 1200 the links fold
 * into the menu beside the bell.
 */

@media (max-width: 1439.98px) {
  .qtr-top__bar { gap: 12px; }
  .qtr-top__title { font-size: var(--tn-text-md); }
  .qtr-nav__link { padding: 0 8px; gap: 6px; }
  .qtr-user__name { max-width: 9ch; }
}

@media (max-width: 1279.98px) {
  .qtr-user__name { display: none; }
}

@media (max-width: 1199.98px) {
  .qtr-nav { display: none; }
  .qtr-top__menu { display: block; }
  .qtr-top__menu-panel .qtr-nav__link { padding: 0 12px; }
}

/*
 * A PHONE GIVES THE CHROME BACK TO THE MAP. The footer keeps one line (the
 * rights line; the name is already in the bar above and the credit is not
 * something a surveyor needs), so it stays 32px instead of stacking to 80.
 */
@media (max-width: 767.98px) {
  .qtr-foot { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .qtr-foot__name,
  .qtr-foot__credit { display: none; }
  .qtr-foot__rights { justify-self: center; }
}

/*
 * The banner keeps to one 24px line: the environment's name stays, the "not
 * official" clause goes. The tagline under the portal's name goes too — the
 * name wraps to two lines here and the tagline would be a third, too small to
 * read.
 */
@media (max-width: 639.98px) {
  .qtr-env__more { display: none; }
  .qtr-env { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .qtr-top__bar { gap: 8px; padding: 0 12px; }
  .qtr-top__side { gap: 2px; }
  .qtr-brand { gap: 8px; }
  .qtr-brand__mark { width: 36px; height: 36px; }
  .qtr-top__title { font-size: var(--tn-text-sm); white-space: normal; line-height: var(--tn-leading-tight); }
  .qtr-top__sub { display: none; }
  .qtr-user__chevron { display: none; }
  .qtr-user__summary { padding: 0 4px; }
  .qtr-bell { position: static; }
  .qtr-bell__panel { left: 8px; right: 8px; width: auto; top: calc(100% + 4px); }
}

/* ------------------------------------------------------------ environments */

@media (prefers-reduced-motion: reduce) {
  .qtr-nav__link,
  .qtr-user__chevron { transition: none; }
}

@media (forced-colors: active) {
  .qtr-top__bar,
  .qtr-foot { border-top: 1px solid CanvasText; border-bottom: 1px solid CanvasText; }
  .qtr-nav__link[aria-current='page'] {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
  }
  .qtr-bell__badge { border: 1px solid CanvasText; }
  .qtr-bell__panel,
  .qtr-user__panel,
  .qtr-top__menu-panel { border: 1px solid CanvasText; }
}

@media print {
  .qtr-top,
  .qtr-foot { display: none; }
  .qtr-app { display: block; min-height: 0; }
}


.cls-page {
  display: flex; flex-direction: column; gap: var(--tn-space-lg);
  width: 100%; min-width: 0;
  padding: var(--tn-space-md) var(--tn-space-sm) var(--tn-space-xl);
}
@media (min-width: 640px) { .cls-page { padding: var(--tn-space-md) var(--tn-space-md) var(--tn-space-xl); } }
@media (min-width: 1024px) { .cls-page { padding: var(--tn-space-md) var(--tn-space-lg) var(--tn-space-xl); } }

/* The map page's own header: one heading and one line of provenance. It is
   short on purpose, because the map frame's height on a desk is the viewport
   less the portal's chrome less this (see --cls-page-head in frame-styles.ts). */
.cls-page__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--tn-space-xxs) var(--tn-space-md); min-width: 0; }
.cls-page__title {
  margin: 0;
  color: var(--tn-color-text);
  font-size: var(--tn-text-xl);
  font-weight: var(--tn-weight-bold);
  line-height: var(--tn-leading-tight);
  letter-spacing: var(--tn-tracking-tight);
}
.cls-page__meta { margin: 0; color: var(--tn-color-text-muted); font-size: var(--tn-text-sm); overflow-wrap: anywhere; }

.cls-panel {
  background: var(--tn-color-surface-raised);
  border: 1px solid var(--tn-color-border-strong);
  border-radius: var(--tn-radius-lg);
  padding: var(--tn-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-md);
  min-width: 0;
}
.cls-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--tn-space-sm); }
.cls-panel__title { font-size: var(--tn-text-lg); font-weight: var(--tn-weight-semibold); }
.cls-panel__note { color: var(--tn-color-text-faint); font-size: var(--tn-text-sm); }
/* On a phone the note has the first line to itself and the live chip the
   second, so the chip turning from "Connecting" to "Live" or "Refreshing every
   30s" never re-wraps the row and moves the map under it. */
@media (max-width: 639.98px) {
  .cls-panel__note { flex: 1 1 100%; }
  .cls-conn { white-space: nowrap; }
}
.cls-panel__spacer { flex: 1 1 auto; }

.cls-work { display: flex; flex-direction: column; gap: var(--tn-space-lg); min-width: 0; }

/* The toolbar over the map: search, the classifier, what a tap does, 3D, and
   share / export / print at the far end. It wraps rather than scrolls, so on a
   phone every control is still reachable with a thumb. */
.cls-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--tn-space-sm);
  min-width: 0;
}
.cls-toolbar__spacer { flex: 1 1 auto; }
.cls-toolbar__modes {
  display: inline-flex; flex-wrap: wrap; border: 1px solid var(--tn-color-border-control);
  border-radius: var(--tn-radius-md); overflow: hidden; background: var(--tn-color-surface-raised);
}
.cls-toolbar__mode {
  appearance: none; border: 0; background: var(--tn-color-surface-raised); cursor: pointer;
  min-height: var(--tn-size-control); padding: 0 var(--tn-space-md);
  font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text-muted);
}
.cls-toolbar__modes .cls-toolbar__mode + .cls-toolbar__mode { border-left: 1px solid var(--tn-color-border); }
.cls-toolbar > .cls-toolbar__mode {
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md);
}
.cls-toolbar__mode[aria-pressed='true'] { background: var(--tn-color-action); color: var(--tn-color-action-ink); }
.cls-toolbar__mode:hover:not([aria-pressed='true']):not([disabled]) { background: var(--tn-color-surface-sunken); color: var(--tn-color-text); }
.cls-toolbar__mode[disabled] { opacity: 0.45; cursor: not-allowed; }
.cls-toolbar__mode:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
/* A PRESSED MODE NEEDS A GAP INSIDE ITS RING. The ring is the page's dark blue
   and a pressed mode is filled with the button teal, a dark on a dark (under
   1.5:1), so a ring drawn inset on it vanished: a keyboard reader tabbing onto the mode
   already in use saw nothing change at all. A band of the ring-offset colour
   between the ring and the fill — the token exists for exactly this — makes it
   a ring again. It is a box-shadow, which forced colours drops, and there the
   outline in the system colour is the indicator on its own. */
.cls-toolbar__mode[aria-pressed='true']:focus-visible { box-shadow: inset 0 0 0 5px var(--tn-color-focus-ring-offset); }

/* The map with its controls beside it on a desk; the controls UNDER it on a
   phone. The single-column order is the reading order of the markup, which is
   why the side panel is written after the map rather than floated to it. */
.cls-workspace {
  display: grid;
  gap: var(--tn-space-lg);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) { .cls-workspace { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (min-width: 1024px) { .cls-workspace { grid-template-columns: minmax(0, 1fr) 340px; } }

/* The stage holds the map, and on a desk the details card floats over the map's
   corner; it is the positioning context for that card and nothing else. */
.cls-stage { position: relative; display: flex; flex-direction: column; gap: var(--tn-space-sm); min-width: 0; }
.cls-stage__map { position: relative; min-width: 0; }

.cls-side {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--tn-color-surface-raised);
  border: 1px solid var(--tn-color-border-strong);
  border-radius: var(--tn-radius-lg);
}
@media (min-width: 900px) {
  /* Tall enough to hold a long layer tree, and it scrolls inside itself so the
     page does not jump when a panel is switched. */
  .cls-side { position: sticky; top: var(--tn-space-md); max-height: calc(100dvh - var(--tn-space-xl)); }
}
.cls-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--tn-color-border); }
.cls-tabs__tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  min-height: var(--tn-size-control); padding: 0 var(--tn-space-xs);
  font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text-muted);
  border-bottom: 3px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tn-space-xxs);
}
.cls-tabs__tab[aria-selected='true'] { color: var(--tn-color-text); border-bottom-color: var(--tn-color-accent); }
.cls-tabs__tab:hover:not([aria-selected='true']) { color: var(--tn-color-text); background: var(--tn-color-surface-sunken); }
.cls-tabs__tab:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
.cls-tabs__badge {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--tn-radius-pill);
  background: var(--tn-color-accent); color: var(--tn-color-accent-ink);
  font-size: var(--tn-text-xs); line-height: var(--tn-leading-snug); font-variant-numeric: tabular-nums;
}
.cls-tabpanel { padding: var(--tn-space-md); overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: var(--tn-space-md); }
@media (max-width: 899.98px) { .cls-tabpanel { max-height: none; } }


.cls-conn { display: inline-flex; align-items: center; gap: var(--tn-space-xxs);
  /* Wide enough for "Connecting", so the chip turning "Live" does not re-wrap the row it sits in. */
  min-width: 8rem; font-size: var(--tn-text-sm); font-weight: var(--tn-weight-medium); border-radius: var(--tn-radius-pill); padding: 2px var(--tn-space-sm); border: 1px solid var(--tn-color-border-strong); background: var(--tn-color-surface-raised); color: var(--tn-color-text-muted); }
.cls-conn__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tn-color-status-unsurveyed); flex: none; }
.cls-conn[data-state='live'] { border-color: var(--tn-color-status-approved); color: var(--tn-color-status-approved-ink); background: var(--tn-color-status-approved-soft); }
.cls-conn[data-state='live'] .cls-conn__dot { background: var(--tn-color-status-approved); animation: cls-beat 2s var(--tn-easing-standard) infinite; }
.cls-conn[data-state='connecting'] { border-color: var(--tn-color-status-pending); color: var(--tn-color-status-pending-ink); background: var(--tn-color-status-pending-soft); }
.cls-conn[data-state='connecting'] .cls-conn__dot { background: var(--tn-color-status-pending); animation: cls-beat 900ms var(--tn-easing-standard) infinite; }
.cls-conn[data-state='polling'] { border-color: var(--tn-color-status-pending); color: var(--tn-color-status-pending-ink); background: var(--tn-color-status-pending-soft); }
.cls-conn[data-state='polling'] .cls-conn__dot { background: var(--tn-color-status-pending); }
.cls-conn[data-state='stopped'] { border-color: var(--tn-color-status-rejected); color: var(--tn-color-status-rejected-ink); background: var(--tn-color-status-rejected-soft); }
.cls-conn[data-state='stopped'] .cls-conn__dot { background: var(--tn-color-status-rejected); }
@keyframes cls-beat { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.cls-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }
@media (max-width: 639.98px) { .cls-feed { max-height: 300px; } }
.cls-feed__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--tn-space-xs); align-items: baseline; padding: var(--tn-space-xs) 0; border-bottom: 1px solid var(--tn-color-border); font-size: var(--tn-text-sm); }
.cls-feed__item:last-child { border-bottom: 0; }
.cls-feed__item[data-fresh='true'] { animation: cls-slide var(--tn-duration-slow) var(--tn-easing-standard); }
@keyframes cls-slide { from { opacity: 0; transform: translateY(-6px); background: var(--tn-color-accent-soft); } to { opacity: 1; transform: none; } }
.cls-feed__dot { width: 10px; height: 10px; border-radius: 50%; align-self: center; border: 1px solid rgba(0, 0, 0, 0.18); }
.cls-feed__what { min-width: 0; overflow-wrap: anywhere; }
.cls-feed__who { color: var(--tn-color-text-faint); }
.cls-feed__when { color: var(--tn-color-text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

.cls-note {
  border-left: 3px solid var(--tn-color-border-strong);
  padding-left: var(--tn-space-md);
  color: var(--tn-color-text-muted);
  font-size: var(--tn-text-sm);
}
.cls-note--pending { border-left-color: var(--tn-color-status-pending); }


/* What the map page puts above the frame on a desk, from the top of the page
   area: its padding, the heading, the toolbar and the status line. Read by the
   height rule at UP.lg below. Measured: the toolbar wraps to two rows below
   about 1560px wide (241px in all) and fits one row from 1600px (185px). A
   page that stacks something else above the map sets its own. */
.cls-page { --cls-page-head: 241px; }
@media (min-width: 1600px) { .cls-page { --cls-page-head: 185px; } }
.cls-map { display: flex; flex-direction: column; gap: var(--tn-space-sm); min-width: 0; }
.cls-map__frame {
  height: 56vh;
  height: min(56dvh, 420px);
  min-height: 280px;
}
.cls-map__frame {
  position: relative;
  border: 1px solid var(--tn-color-border-strong);
  border-radius: var(--tn-radius-lg);
  overflow: hidden;
  background: var(--tn-color-surface-sunken);
  box-shadow: var(--tn-shadow-sm);
  touch-action: none;
  cursor: grab;
  container-type: size;
  container-name: cls-frame;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 640px) {
  .cls-map__frame { height: 62vh; height: min(62dvh, 620px); min-height: 380px; }
}
@media (min-width: 1024px) {
  /* ON A DESK THE MAP TAKES THE WINDOW. The portal's top bar carries the
     navigation, so the frame is the viewport less that bar (and the banner
     above it off production), less the footer, less what the page puts above
     the map: its heading, the toolbar and the status line. The portal's shell
     declares the first two (--qtr-chrome-top, --qtr-foot-height); the last is
     --cls-page-head above. The fallbacks are the shell's own values, for a
     page rendered outside it. Never shorter than 420px, so a short laptop
     window still gets a usable map and scrolls. The phone and tablet heights
     above keep their caps. */
  .cls-map__frame {
    height: 66vh;
    height: max(420px, calc(100dvh - var(--qtr-chrome-top, 64px) - var(--qtr-foot-height, 32px) - var(--cls-page-head, 241px)));
  }
}
.cls-map__frame:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }

/* THE CURSOR SAYS WHAT A PRESS WILL DO. A hand in select-and-pan, a closed hand
   while dragging, and a crosshair whenever a tap places a vertex or a centre —
   including over a shape, which in those modes is ground to measure on, not a
   thing to open. Controls inside the frame keep their own cursors. */
.cls-map__frame[data-panning='true'] { cursor: grabbing; }
.cls-map__frame:not([data-mode='pan']) { cursor: crosshair; }
.cls-map__frame:not([data-mode='pan']) .cls-map__overlay * { cursor: crosshair; }
.cls-map__frame [data-map-ui] { cursor: auto; }

/* Full screen is asked of the frame's container (OrthoMap FullscreenButton), and
   the frame then simply fills it. The container's own background covers the
   browser's black backdrop: nothing on this site is black. */
:fullscreen > .cls-map__frame {
  height: 100%; min-height: 0;
  border: 0; border-radius: 0; box-shadow: none;
}
:fullscreen:has(> .cls-map__frame) { background: var(--tn-color-surface-sunken); }

/* The imagery's opacity is one rule on the stack, never one per tile: tiles are
   drawn a pixel oversize, and per-tile opacity paints every seam twice. */
.cls-map__tiles { position: absolute; inset: 0; overflow: hidden; opacity: var(--cls-frame-imagery, 1); }
.cls-map__tile { position: absolute; display: block; image-rendering: auto; user-select: none; -webkit-user-drag: none; }
/* The overlay is its own compositor layer, promoted at the ROOT svg rather
   than on any shape inside it (a transform inside an SVG is never handed to
   the compositor). What changes around it — the search list opening over the
   map a row per key, the hover card, a tile arriving — is then painted without
   re-rasterising the thousands of paths under it, and a redraw of the overlay
   leaves the tiles alone. Clipped to its own box (the frame clips there
   anyway), so the layer is the frame's size and not the whole campus's at
   zoom 20. */
.cls-map__overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; will-change: transform; }

/* The pinned asset readout. Capped so that on a 390px phone it can never cover
   the control strip or the whole campus behind it. */
.cls-map__readout {
  position: absolute; left: var(--tn-space-sm); top: var(--tn-space-sm);
  max-width: min(320px, calc(100% - 88px));
  max-height: calc(100% - var(--tn-space-xl));
  overflow-y: auto;
  background: var(--tn-color-surface-overlay); border: 1px solid var(--tn-color-border-strong);
  border-radius: var(--tn-radius-md); box-shadow: var(--tn-shadow-md);
  padding: var(--tn-space-sm) var(--tn-space-md); font-size: var(--tn-text-sm);
}
.cls-map__readout dl { margin: 0; }
.cls-map__readout dt { color: var(--tn-color-text-faint); font-size: var(--tn-text-xs); text-transform: uppercase; letter-spacing: var(--tn-tracking-wide); }
.cls-map__readout dd { margin: 0 0 var(--tn-space-xs); }

.cls-map__empty {
  position: absolute; inset: auto var(--tn-space-sm) var(--tn-space-sm) var(--tn-space-sm);
  display: flex; align-items: center; gap: var(--tn-space-sm);
  background: var(--tn-color-surface-overlay); border: 1px solid var(--tn-color-border-strong);
  border-radius: var(--tn-radius-md); padding: var(--tn-space-sm) var(--tn-space-md);
  font-size: var(--tn-text-sm); color: var(--tn-color-text-muted);
}
.cls-map__empty-art { flex: none; height: auto; }
.cls-map__empty-text { margin: 0; min-width: 0; }

/* On a touch screen the coordinate readout gives the map's centre; this small
   cross is where that is. A mouse has the pointer for that and never sees it. */
.cls-frame-centre {
  display: none; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px; pointer-events: none;
  background:
    linear-gradient(var(--tn-color-text), var(--tn-color-text)) center / 2px 100% no-repeat,
    linear-gradient(var(--tn-color-text), var(--tn-color-text)) center / 100% 2px no-repeat;
  filter: drop-shadow(0 0 1px var(--tn-color-surface-raised)) drop-shadow(0 0 1px var(--tn-color-surface-raised));
}
@media (hover: none) { .cls-frame-centre { display: block; } }


.cls-frame-grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.cls-frame-grid__line { stroke: var(--tn-color-border-strong); stroke-width: 1; fill: none; }
.cls-frame-grid__line--major { stroke: var(--tn-color-text-faint); stroke-width: 1.5; }
.cls-frame-grid__label {
  fill: var(--tn-color-text-muted);
  font-size: var(--tn-text-xs);
  font-family: var(--tn-font-sans);
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--tn-color-surface-sunken);
  stroke-width: 3px;
  stroke-linejoin: round;
}


.cls-map__controls {
  position: absolute; top: var(--tn-space-sm); right: var(--tn-space-sm); z-index: 2;
  display: grid; grid-auto-flow: column; grid-auto-columns: 44px;
  grid-template-rows: repeat(auto-fit, 44px);
  gap: var(--tn-space-xxs);
  max-height: calc(100cqh - var(--tn-space-sm) * 2 - 88px);
  direction: rtl;
  pointer-events: none;
}
.cls-map__controls > * { direction: ltr; pointer-events: auto; }
/* On a narrow frame the coordinate readout is lifted over the legend (see FOOT). */
@container cls-frame (max-width: 540px) {
  .cls-map__controls { max-height: calc(100cqh - var(--tn-space-sm) * 2 - 150px); }
}
.cls-map__ctl {
  appearance: none; width: var(--tn-size-control); height: var(--tn-size-control); padding: 0; border-radius: var(--tn-radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--tn-color-border-control); background: var(--tn-color-surface-raised);
  color: var(--tn-color-text); font-size: var(--tn-text-lg); font-weight: var(--tn-weight-semibold);
  cursor: pointer; box-shadow: var(--tn-shadow-sm); line-height: 1;
}
.cls-map__ctl:hover { background: var(--tn-color-surface-sunken); }
.cls-map__ctl[disabled] { opacity: 0.5; cursor: default; }
.cls-map__ctl:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }
/* A PRESSED TOGGLE IS TEAL, as the Select tool and the Chart/Table toggle are:
   the action colour, not the page's navy accent. White on #0f6d64 is 6.19:1. */
.cls-frame-ctl[aria-pressed='true'], .cls-frame-ctl[aria-expanded='true'] {
  background: var(--tn-color-action); border-color: var(--tn-color-action); color: var(--tn-color-action-ink);
}

/* Locate: a hollow centre until there is a fix, a filled one after; a turning
   crosshair while it looks; the danger colour after a failure, beside the
   sentence that says which failure. */
.cls-frame-locate__icon path { fill: transparent; }
.cls-frame-locate[data-state='located'] .cls-frame-locate__icon path { fill: currentColor; fill-opacity: 0.22; }
.cls-frame-locate[data-state='locating'] svg { animation: cls-frame-turn 1.6s linear infinite; }
.cls-frame-locate[data-state='error'] { border-color: var(--tn-color-danger); color: var(--tn-color-danger); }
@keyframes cls-frame-turn { to { transform: rotate(360deg); } }

/* The north arrow is a badge, not a button: round, borderless, no hover. */
.cls-frame-north {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--tn-radius-pill);
  background: var(--tn-color-surface-overlay); box-shadow: var(--tn-shadow-sm);
}
.cls-frame-north--print { display: none; width: 36px; height: 36px; }


.cls-frame-display__pop {
  position: absolute; inset: 0 calc(100% + var(--tn-space-xs)) auto auto; margin: 0;
  width: 300px; max-width: calc(100cqw - 124px);
  max-height: calc(100cqh - var(--tn-space-sm) * 2);
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--tn-space-sm);
  padding: var(--tn-space-sm) var(--tn-space-md) var(--tn-space-md);
  background: var(--tn-color-surface-raised); color: var(--tn-color-text);
  border: 1px solid var(--tn-color-border-strong); border-radius: var(--tn-radius-md);
  box-shadow: var(--tn-shadow-lg);
  font-size: var(--tn-text-sm); text-align: left; cursor: auto;
  -webkit-user-select: none; user-select: none;
}
.cls-frame-display__title { margin: 0; font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); }
.cls-frame-display__group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--tn-space-xxs); }
.cls-frame-display__legend { padding: 0; margin: 0 0 var(--tn-space-xxs); font-size: var(--tn-text-xs); font-weight: var(--tn-weight-medium); color: var(--tn-color-text-muted); }
.cls-frame-display__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tn-space-xs); }
.cls-frame-display__row .cls-frame-display__legend { margin: 0; }
.cls-frame-display__value { font-variant-numeric: tabular-nums; font-weight: var(--tn-weight-semibold); }
.cls-frame-display__range { width: 100%; min-height: var(--tn-size-control); margin: 0; accent-color: var(--tn-color-accent); cursor: pointer; }
.cls-frame-display__range:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }

.cls-frame-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md); overflow: hidden;
}
.cls-frame-seg__opt { position: relative; display: flex; min-width: 0; cursor: pointer; }
.cls-frame-seg__opt + .cls-frame-seg__opt { border-left: 1px solid var(--tn-color-border); }
.cls-frame-seg__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cls-frame-seg__text {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: var(--tn-size-control); padding: 2px var(--tn-space-xxs);
  background: var(--tn-color-surface-raised); color: var(--tn-color-text-muted);
  font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold); line-height: var(--tn-leading-tight);
  overflow-wrap: anywhere;
}
.cls-frame-seg__opt:hover .cls-frame-seg__input:not(:checked) + .cls-frame-seg__text { background: var(--tn-color-surface-sunken); color: var(--tn-color-text); }
.cls-frame-seg__input:checked + .cls-frame-seg__text { background: var(--tn-color-action); color: var(--tn-color-action-ink); }
.cls-frame-seg__input:focus-visible + .cls-frame-seg__text { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
/* The checked option is filled (teal, the pressed-toggle colour), and the
   option a keyboard lands on in a radio group is the checked one — so an inset
   ring drawn straight onto the fill is hard to see on the only option it is
   ever drawn on. The band of the ring-offset colour inside the ring is what
   makes it visible. */
.cls-frame-seg__input:checked:focus-visible + .cls-frame-seg__text { box-shadow: inset 0 0 0 5px var(--tn-color-focus-ring-offset); }

.cls-frame-display__checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tn-space-xs); }
.cls-frame-check {
  display: flex; align-items: center; gap: var(--tn-space-xs); min-height: var(--tn-size-control); padding: 0 var(--tn-space-sm);
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md);
  font-size: var(--tn-text-sm); font-weight: var(--tn-weight-medium); cursor: pointer;
}
.cls-frame-check:hover { background: var(--tn-color-surface-sunken); }
.cls-frame-check__input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--tn-color-accent); cursor: pointer; }
.cls-frame-check__input:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }


.cls-frame-notices {
  position: absolute; top: var(--tn-space-sm); left: var(--tn-space-sm);
  right: calc(var(--tn-space-sm) * 2 + 44px);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--tn-space-xs);
  z-index: 1; pointer-events: none;
}
.cls-frame-notices > * { pointer-events: auto; }
/* Below this height the strip holds its seventh control in a second column
   (see CONTROLS), so the notices stop short of that column too. */
@container cls-frame (max-height: 435px) {
  .cls-frame-notices { right: calc(var(--tn-space-sm) * 2 + 92px); }
}
@container cls-frame (max-width: 540px) and (max-height: 505px) {
  .cls-frame-notices { right: calc(var(--tn-space-sm) * 2 + 92px); }
}
.cls-frame-notice {
  display: flex; align-items: center; gap: var(--tn-space-xxs); max-width: min(100%, 460px);
  padding: 0 0 0 var(--tn-space-sm);
  background: var(--tn-color-surface-overlay); color: var(--tn-color-text);
  border: 1px solid var(--tn-color-border-strong); border-left: 4px solid var(--tn-color-accent);
  border-radius: var(--tn-radius-md); box-shadow: var(--tn-shadow-md);
  font-size: var(--tn-text-sm); line-height: var(--tn-leading-snug);
}
.cls-frame-notice[data-tone='warn'] { border-left-color: var(--tn-color-warning); }
.cls-frame-notice[data-visible='false'] {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; box-shadow: none;
}
.cls-frame-notice__text { margin: 0; padding: var(--tn-space-xs) 0; flex: 1 1 auto; min-width: 0; }
.cls-frame-notice__action {
  appearance: none; flex: none; min-height: var(--tn-size-control); padding: 0 var(--tn-space-sm);
  border: 1px solid var(--tn-color-accent); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised); color: var(--tn-color-accent);
  font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); cursor: pointer; white-space: nowrap;
}
.cls-frame-notice__action:hover { background: var(--tn-color-accent-soft); }
.cls-frame-notice__close {
  appearance: none; flex: none; width: var(--tn-size-control); height: var(--tn-size-control); padding: 0;
  border: 0; border-radius: var(--tn-radius-md); background: transparent;
  color: var(--tn-color-text-muted); font-size: var(--tn-text-lg); line-height: 1; cursor: pointer;
}
.cls-frame-notice__close:hover { background: var(--tn-color-surface-sunken); color: var(--tn-color-text); }
.cls-frame-notice__action:focus-visible, .cls-frame-notice__close:focus-visible {
  outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px;
}

/* A NARROW FRAME: THE SENTENCE GETS THE WIDTH, THE ACTION GOES UNDER IT. In one
   row, a 240px notice gave the words about a hundred pixels beside "Use plain"
   and the close button, and "Drone imagery isn't available on this server"
   stood one word to a line, six lines tall, over the very buildings it was
   apologising for. */
@container cls-frame (max-width: 540px) {
  .cls-frame-notice { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start; font-size: var(--tn-text-xs); }
  .cls-frame-notice__close { grid-column: 2; grid-row: 1; }
  .cls-frame-notice__action { grid-column: 1; justify-self: start; margin: 0 0 var(--tn-space-xs); }
}


.cls-frame-foot {
  position: absolute; right: var(--tn-space-sm); bottom: var(--tn-space-sm);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--tn-space-xxs);
  max-width: calc(100% - var(--tn-space-sm) * 2);
  pointer-events: none;
}
.cls-frame-foot > * { pointer-events: auto; }
/* The row lets presses through and only what is in it catches them: on a narrow
   frame it is 80px tall with the scale bar at its foot (see below), and an
   empty box that swallowed a drag would be a dead corner of the map. */
.cls-frame-foot > .cls-frame-foot__row { pointer-events: none; }
.cls-frame-foot__row > * { pointer-events: auto; }
.cls-frame-foot__row { display: flex; align-items: flex-end; gap: var(--tn-space-xs); }

.cls-frame-coords {
  display: flex; align-items: stretch; max-width: 100%;
  background: var(--tn-color-surface-overlay); color: var(--tn-color-text);
  border: 1px solid var(--tn-color-border-strong); border-radius: var(--tn-radius-sm);
  box-shadow: var(--tn-shadow-sm);
}
.cls-frame-coords__text {
  margin: 0; padding: 3px var(--tn-space-xs); min-width: 0;
  display: grid; align-content: center;
  font-size: var(--tn-text-xs); line-height: var(--tn-leading-tight); font-variant-numeric: tabular-nums;
  -webkit-user-select: text; user-select: text; cursor: text;
}
.cls-frame-coords__text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The three lines are written by the frame after it has measured itself; each
   holds its line from the first paint, so filling them moves nothing above. */
.cls-frame-coords__label, .cls-frame-coords__lonlat, .cls-frame-coords__utm { display: block; min-block-size: 1lh; }
/* …and the readout is as wide as its longest line ("UTM 43N 714951 E 1159673 N")
   from the start, so the numbers arriving do not widen it leftwards either. */
.cls-frame-coords__text { min-inline-size: 26ch; }
.cls-frame-coords__label {
  font-size: var(--tn-text-xs); color: var(--tn-color-text-faint);
  text-transform: uppercase; letter-spacing: var(--tn-tracking-wide); font-weight: var(--tn-weight-semibold);
}
.cls-frame-coords__utm { color: var(--tn-color-text-muted); }
/* The copy button is one 40px control (44 by touch), centred beside the
   three-line readout rather than stretched to its full 51px height. */
.cls-frame-coords__copy {
  appearance: none; flex: none; align-self: center;
  width: var(--tn-size-control); height: var(--tn-size-control); margin-right: 3px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--tn-radius-sm);
  background: transparent; color: var(--tn-color-text-muted); cursor: pointer;
}
.cls-frame-coords__copy:hover { background: var(--tn-color-surface-sunken); color: var(--tn-color-text); }
.cls-frame-coords__copy:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
.cls-frame-coords__copy[data-state='copied'] { color: var(--tn-color-success); }
.cls-frame-coords__copy[data-state='failed'] { color: var(--tn-color-danger); }

.cls-map__ctl--pending { visibility: hidden; pointer-events: none; }
.cls-map__scale--pending { inline-size: 110px; block-size: 26px; visibility: hidden; }
.cls-map__scale {
  /* The frame's plate around the kit's bar (@tn/ui/map ScaleBar, plate off). */
  display: inline-flex; line-height: 0;
  background: var(--tn-color-surface-overlay); border: 1px solid var(--tn-color-border-strong);
  border-radius: var(--tn-radius-sm); padding: 2px var(--tn-space-xxs);
}

/* A READ THAT FAILED (PanelError.tsx): "Try again" beside a closed "Details for
   support", so two or three stacked notices stay short. The button is a full
   44px target on a touch screen; the reference wraps rather than widening the
   notice. */
.cls-panel-error__retry { min-height: var(--tn-size-control-compact); }
.cls-panel-error__support { flex: 1 1 14rem; min-width: 0; align-self: center; font-size: var(--tn-text-xs); }
.cls-panel-error__summary {
  display: inline-flex; align-items: center; min-height: var(--tn-size-control-compact); padding: 0 4px;
  color: var(--tn-color-text-muted); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.cls-panel-error__summary:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; border-radius: 2px; }
.cls-panel-error__ref { margin: 4px 0 0; color: var(--tn-color-text-muted); line-height: var(--tn-leading-normal); overflow-wrap: anywhere; }
.cls-panel-error__ref code { -webkit-user-select: all; user-select: all; font-family: var(--tn-font-mono); }
@media (pointer: coarse) {
  .cls-panel-error__retry, .cls-panel-error__summary { min-height: var(--tn-size-touch); }
}

/* A phone: the readout keeps both lines, a little smaller. */
@container cls-frame (max-width: 420px) {
  .cls-frame-coords__text { font-size: var(--tn-text-xs); }
}

/* A NARROW FRAME: THE READOUT RISES CLEAR OF THE LEGEND. The map legend
   (classify-panel-styles.ts) sits bottom-left at 46px up and, collapsed, is one
   44px row — so its top edge is 92px above the frame's floor, and at the height
   of this readout. On a wide frame they are a room apart. On a 366px phone frame
   the collapsed legend is 130 to 280px wide (it carries the classifier's name)
   and the readout 235px, and the legend was measured covering the first thirty
   pixels of every coordinate, which is the half of a number that matters. No
   width of readout fits beside every legend title, so on a narrow frame the
   scale row is made tall enough (80px) to lift the readout's bottom edge above
   the legend's top, with the scale bar still at the floor where the legend's
   left corner leaves it room.

   The control strip then stops 150px short of the floor rather than 88px, so
   the lifted readout never runs up into it: on the 420px phone frame that is
   five buttons and a second column of two, which the notices already make room
   for below 435px of height and, with this, below 506px on a narrow frame too.

   An EXPANDED legend on a narrow frame still covers the readout's left part.
   It is the reader's own choice to open it, and it closes with one press. */
@container cls-frame (max-width: 540px) {
  .cls-frame-foot__row { min-height: 80px; }
}


@media (prefers-reduced-motion: reduce) {
  .cls-frame-locate[data-state='locating'] svg { animation: none !important; }
}

@media (forced-colors: active) {
  .cls-map__ctl, .cls-frame-coords, .cls-frame-notice, .cls-frame-display__pop, .cls-frame-north, .cls-map__scale {
    border: 1px solid CanvasText;
  }
  .cls-frame-ctl[aria-pressed='true'], .cls-frame-ctl[aria-expanded='true'] { outline: 2px solid Highlight; outline-offset: 1px; }
  .cls-frame-seg__input:checked + .cls-frame-seg__text { outline: 2px solid Highlight; outline-offset: -4px; }
  /* Here the checked option is marked by that Highlight ring, and the rule
     above out-cascades the focus ring, so tabbing onto the checked option
     changed nothing. Focus adds a second ring in the text colour at the very
     edge, outside the Highlight one. A box-shadow is dropped in this mode
     unless the span opts out of adjustment, so it does, and names its own
     system colours. */
  .cls-frame-seg__input:checked:focus-visible + .cls-frame-seg__text {
    forced-color-adjust: none; background: Canvas; color: CanvasText;
    box-shadow: inset 0 0 0 2px CanvasText;
  }
  .cls-frame-grid__line, .cls-frame-grid__line--major { stroke: GrayText; }
  .cls-frame-grid__label { fill: CanvasText; stroke: Canvas; }
  .cls-frame-locate[data-state='located'] .cls-frame-locate__icon path { fill: Highlight; }
  .cls-frame-centre { forced-color-adjust: none; }
}

/* PAPER. The frame prints at a fixed height with the ground, the grid, the data,
   the legend and the scale — and none of the furniture: no buttons, no menu, no
   notices, no pointer readout (it would print whatever the mouse last crossed).
   The north arrow moves from the hidden strip to beside the scale bar, because
   a printed plan without one is a plan somebody will read upside down. */
@media print {
  .cls-map__controls, .cls-frame-display__pop, .cls-frame-notices, .cls-frame-coords, .cls-frame-centre {
    display: none !important;
  }
  .cls-map__frame { height: 460px; min-height: 0; box-shadow: none; cursor: auto; }
  .cls-frame-north--print { display: grid; box-shadow: none; }
  /* No readout on paper, so nothing to lift over the legend. */
  .cls-frame-foot__row { min-height: 0 !important; }
  .cls-map__scale { box-shadow: none; }
}


/* The overlay never takes the pointer: the workspace hit-tests every tap and
   hover itself. Leaving the shapes as hit targets would make the browser
   hit-test thousands of paths on every mouse move for nothing.
 */
.cls-overlay { pointer-events: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }

/* The pointer cursor, when the workspace says the mouse is over an element and
   a tap would select it. Only in the select mode and not mid-drag, so the
   measuring tools keep their own cursor and a pan keeps its grabbing hand. */
.cls-map__frame[data-mode='pan'][data-panning='false']:has(.cls-overlay[data-hovered='true']) { cursor: pointer; }

.cls-overlay__labels {
  font-family: var(--tn-font-sans);
  fill: var(--tn-color-text);
  stroke: var(--tn-color-surface-raised);
}

/* The FMB chips, the parcel numbers and the selected building's chip: the
   site's face, with figures that line up. Their colours are attributes (the
   export serialises the SVG without this sheet), so nothing here repaints them. */
.cls-overlay__chips, .cls-overlay__marker {
  font-family: var(--tn-font-sans);
  font-variant-numeric: tabular-nums;
}

/* A record that has just arrived over the live stream: one expanding ring at the
   point where the capture landed, drawn once. It answers the question a viewer
   actually has when a figure ticks up on a projected slide — not "has something
   changed" but "WHERE" — and it is gone in a second and a half.

   It grows by CSS "transform: scale", NOT by animating the SVG r attribute.
   Animating a geometry property through CSS is a Chromium and WebKit feature
   that Firefox does not implement, and the failure mode there is a ring that
   never appears at all — with nothing in the console to say so.
   "transform-box: fill-box" is what makes the scale happen about the circle's
   own centre rather than about the SVG root's origin, which would fling it off
   the frame. */
.cls-map__arrive {
  fill: none; stroke: var(--tn-color-accent); stroke-width: 2.5;
  transform-box: fill-box; transform-origin: center;
  animation: cls-arrive 1400ms var(--tn-easing-standard) forwards;
}
@keyframes cls-arrive {
  from { transform: scale(0.3); opacity: 0.95; }
  to   { transform: scale(1); opacity: 0; }
}

/* An area or a line that has just arrived: its edge flashes the accent once. */
.cls-overlay__flash { stroke-opacity: 0; animation: cls-overlay-flash 1600ms var(--tn-easing-standard) forwards; }
@keyframes cls-overlay-flash {
  0%   { stroke-opacity: 0; }
  15%  { stroke-opacity: 1; }
  45%  { stroke-opacity: 0.35; }
  60%  { stroke-opacity: 1; }
  100% { stroke-opacity: 0; }
}


.cls-overlay-card {
  position: absolute; z-index: 2; pointer-events: none;
  width: max-content; max-width: min(280px, calc(100% - var(--tn-space-md)));
  display: flex; flex-direction: column; gap: var(--tn-space-xxs);
  padding: var(--tn-space-xs) var(--tn-space-sm);
  background: var(--tn-color-surface-overlay); color: var(--tn-color-text);
  border: 1px solid var(--tn-color-border-strong); border-radius: var(--tn-radius-md);
  box-shadow: var(--tn-shadow-md);
  font-size: var(--tn-text-xs); line-height: var(--tn-leading-snug);
}
.cls-overlay-card[data-placed='false'] { visibility: hidden; }
.cls-overlay-card p { margin: 0; }
.cls-overlay-card__title { font-weight: var(--tn-weight-semibold); overflow-wrap: anywhere; }
.cls-overlay-card__class { color: var(--tn-color-text-muted); }
.cls-overlay-card__bucket { display: flex; align-items: center; gap: var(--tn-space-xs); }
.cls-overlay-card__caption { color: var(--tn-color-text-muted); }
.cls-overlay-card__facts {
  margin: 0; padding-top: var(--tn-space-xxs); border-top: 1px solid var(--tn-color-border);
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--tn-space-sm); row-gap: var(--tn-space-xxs);
}
.cls-overlay-card__facts div { display: contents; }
.cls-overlay-card__facts dt { color: var(--tn-color-text-muted); }
.cls-overlay-card__facts dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cls-overlay-swatch { flex: none; display: block; }


@media (prefers-reduced-motion: reduce) {
  .cls-map__arrive, .cls-overlay__flash { animation: none !important; }
  /* Each signal still has to MEAN something without moving. An arrival keeps a
     still accent ring and edge for the few seconds it counts as new, then they
     are simply gone. */
  .cls-map__arrive { opacity: 0.8; transform: none; }
  .cls-overlay__flash { stroke-opacity: 0.9; }
}

/* Forced colours. The overlay is a MAP: its colours are data, as much as an
   image's pixels are, so the system palette is not let near them — without
   this, the browser may repaint every bucket the same system colour and the
   classification would vanish. The selection and the labels, which are not
   data, take the system's own highlight and text colours. */
@media (forced-colors: active) {
  .cls-overlay { forced-color-adjust: none; }
  .cls-overlay__sel { stroke: Highlight; }
  .cls-overlay__glow { stroke: Highlight; }
  .cls-overlay__labels { fill: CanvasText; stroke: Canvas; }
  .cls-overlay__chip rect { fill: Canvas; stroke: CanvasText; }
  .cls-overlay__chip text { fill: CanvasText; }
  .cls-overlay-card { border: 2px solid CanvasText; }
  .cls-overlay-swatch { forced-color-adjust: none; }
}

@media print {
  .cls-overlay { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  /* Motion has no meaning on paper, and a ring caught half-grown reads as a
     mark on the map. */
  .cls-map__arrive, .cls-overlay__flash { display: none; }
  .cls-overlay-card { display: none !important; }
}


.cls-tools-map, .cls-tools-map * { pointer-events: none; }
.cls-tools-map__line { stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cls-tools-map__band { stroke-width: 2.5; stroke-dasharray: 7 5; stroke-linecap: round; }
.cls-tools-map__band--closing { stroke-width: 1.5; stroke-dasharray: 3 5; opacity: 0.75; }
.cls-tools-map__area { fill-opacity: 0.14; stroke-width: 2.5; stroke-linejoin: round; }
.cls-tools-map__area-live { fill-opacity: 0.14; }
.cls-tools-map__lasso { fill-opacity: 0.08; }
.cls-tools-map__lasso--applied { fill-opacity: 0.05; stroke-width: 2; stroke-dasharray: 10 6; stroke-linejoin: round; }
.cls-tools-map__radius { fill-opacity: 0.08; stroke-width: 2; stroke-dasharray: 8 6; }
.cls-tools-map__spoke { stroke-width: 1.5; stroke-dasharray: 3 4; }
.cls-tools-map__preview { stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0.65; }
.cls-tools-map__vertex { stroke-width: 2.5; }
.cls-tools-map__vertex--small { stroke-width: 2; }
.cls-tools-map__vertex--target { stroke-width: 4.5; }
.cls-tools-map__label {
  font-family: var(--tn-font-sans);
  font-size: var(--tn-text-xs);
  font-weight: var(--tn-weight-semibold);
  font-variant-numeric: tabular-nums;
  paint-order: stroke fill;
  stroke: var(--tn-color-surface-raised);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.cls-tools-map__label--strong { font-weight: var(--tn-weight-bold); }

/* The keyboard's crosshair: where Space puts the next point. Shown only while
   the map itself has keyboard focus, so a mouse user never sees a stray cross
   in the middle of the campus. */
.cls-tools-map__centre { opacity: 0; }
.cls-tools-map__centre path { stroke-width: 2; stroke-linecap: round; }
.cls-map__frame:focus-visible .cls-tools-map__centre { opacity: 0.9; }

/* While a tool is armed a tap draws rather than selects, and the cursor says so.
   Not while dragging: the frame's own grabbing hand is the truth then. */
.cls-map__frame[data-mode='measure-line']:not([data-panning='true']),
.cls-map__frame[data-mode='measure-area']:not([data-panning='true']),
.cls-map__frame[data-mode='select-area']:not([data-panning='true']),
.cls-map__frame[data-mode='buffer']:not([data-panning='true']) { cursor: crosshair; }


.cls-tools { display: flex; flex-direction: column; gap: var(--tn-space-md); min-width: 0; }
.cls-tools__title { margin: 0; font-size: var(--tn-text-md); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text); }

.cls-tools__picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tn-space-xs); }
.cls-tools__tool {
  appearance: none; cursor: pointer; min-height: var(--tn-size-control); min-width: 0;
  display: inline-flex; align-items: center; gap: var(--tn-space-xs);
  padding: 0 var(--tn-space-sm);
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised); color: var(--tn-color-text);
  font: inherit; font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); text-align: left;
}
.cls-tools__tool[aria-pressed='true'] { background: var(--tn-color-action); border-color: var(--tn-color-action); color: var(--tn-color-action-ink); }
.cls-tools__tool:hover:not([aria-pressed='true']) { background: var(--tn-color-surface-sunken); }
.cls-tools__glyph { flex: none; }

.cls-tools__hint {
  margin: 0; padding: var(--tn-space-xs) var(--tn-space-sm);
  border-left: 3px solid var(--tn-color-border-strong);
  border-radius: 0 var(--tn-radius-sm) var(--tn-radius-sm) 0;
  background: var(--tn-color-surface-sunken);
  color: var(--tn-color-text-muted); font-size: var(--tn-text-sm); line-height: var(--tn-leading-normal);
}
.cls-tools__hint[data-armed='true'] { border-left-color: var(--tn-color-accent); color: var(--tn-color-text); }

.cls-tools__card {
  display: flex; flex-direction: column; gap: var(--tn-space-xs); min-width: 0;
  padding: var(--tn-space-sm);
  border: 1px solid var(--tn-color-border); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised);
}
.cls-tools__card--applied { border-color: var(--tn-color-accent); background: var(--tn-color-accent-soft); }
.cls-tools__card--quiet { background: var(--tn-color-surface-sunken); border-color: transparent; }
.cls-tools__subtitle {
  margin: 0; display: flex; align-items: center; gap: var(--tn-space-xs);
  font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text);
}
.cls-tools__minor { margin: var(--tn-space-xxs) 0 0; font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text-muted); }
.cls-tools__count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--tn-radius-pill);
  background: var(--tn-color-accent-soft); color: var(--tn-color-accent-soft-ink);
  font-size: var(--tn-text-xs); line-height: var(--tn-leading-normal); text-align: center; font-variant-numeric: tabular-nums;
}
.cls-tools__meta, .cls-tools__applied { margin: 0; font-size: var(--tn-text-sm); color: var(--tn-color-text-muted); overflow-wrap: anywhere; }
.cls-tools__applied { color: var(--tn-color-accent-soft-ink); }
.cls-tools__warn {
  margin: 0; padding: var(--tn-space-xs) var(--tn-space-sm);
  border-left: 3px solid var(--tn-color-warning);
  border-radius: 0 var(--tn-radius-sm) var(--tn-radius-sm) 0;
  background: var(--tn-color-warning-soft); color: var(--tn-color-warning-soft-ink);
  font-size: var(--tn-text-sm); line-height: var(--tn-leading-normal); overflow-wrap: anywhere;
}
.cls-tools__num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.cls-tools__figure { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.cls-tools__figure-value {
  font-size: var(--tn-text-xl); font-weight: var(--tn-weight-bold); line-height: var(--tn-leading-tight);
  font-variant-numeric: tabular-nums; color: var(--tn-color-text); overflow-wrap: anywhere;
}
.cls-tools__figure-unit { font-size: var(--tn-text-xs); color: var(--tn-color-text-muted); }

.cls-tools__units { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tn-space-xs) var(--tn-space-sm); }
.cls-tools__units > div { display: flex; flex-direction: column; min-width: 0; }
.cls-tools__units dt { font-size: var(--tn-text-xs); color: var(--tn-color-text-muted); }
.cls-tools__units dd { margin: 0; font-weight: var(--tn-weight-semibold); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.cls-tools__segments, .cls-tools__classes, .cls-tools__saved, .cls-tools__nearest {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
}
.cls-tools__segments { max-height: 180px; overflow-y: auto; }
.cls-tools__segments li, .cls-tools__classes li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--tn-space-sm);
  padding: var(--tn-space-xxs) 0; border-bottom: 1px solid var(--tn-color-border);
  font-size: var(--tn-text-sm); min-width: 0;
}
.cls-tools__segments li:last-child, .cls-tools__classes li:last-child { border-bottom: 0; }

/* A grid, not a wrapping row: four buttons of different lengths in a 300px
   column wrapped into a ragged staircase, one of them alone on its line. */
.cls-tools__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--tn-space-xs); }
.cls-tools__actions:empty { display: none; }
.cls-tools__btn, .cls-tools__preset {
  appearance: none; cursor: pointer; min-height: var(--tn-size-control); max-width: 100%;
  padding: var(--tn-space-xxs) var(--tn-space-md);
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised); color: var(--tn-color-text);
  font: inherit; font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold);
  line-height: var(--tn-leading-snug); text-align: center; overflow-wrap: anywhere;
}
.cls-tools__btn:hover:not([disabled]), .cls-tools__preset:hover:not([aria-pressed='true']) {
  background: var(--tn-color-accent-soft); border-color: var(--tn-color-accent); color: var(--tn-color-accent-soft-ink);
}
.cls-tools__btn--primary { background: var(--tn-color-action); border-color: var(--tn-color-action); color: var(--tn-color-action-ink); }
.cls-tools__btn--primary:hover:not([disabled]) { background: var(--tn-color-action-hover); border-color: var(--tn-color-action-hover); color: var(--tn-color-action-ink); }
.cls-tools__btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.cls-tools__radius { display: flex; flex-direction: column; gap: var(--tn-space-xxs); }
.cls-tools__label { display: flex; justify-content: space-between; font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); }
.cls-tools__range { width: 100%; min-height: var(--tn-size-control); margin: 0; accent-color: var(--tn-color-action); cursor: pointer; }
.cls-tools__presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tn-space-xxs); }
.cls-tools__preset { border-radius: var(--tn-radius-pill); padding: 0 var(--tn-space-xxs); font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }
.cls-tools__preset[aria-pressed='true'] { background: var(--tn-color-accent-soft); border-color: var(--tn-color-accent); color: var(--tn-color-accent-soft-ink); }

.cls-tools__nearest { max-height: 320px; overflow-y: auto; border: 1px solid var(--tn-color-border); border-radius: var(--tn-radius-sm); }
.cls-tools__hit {
  appearance: none; cursor: pointer; width: 100%; min-height: var(--tn-size-control);
  display: flex; justify-content: space-between; align-items: center; gap: var(--tn-space-sm);
  padding: var(--tn-space-xxs) var(--tn-space-xs);
  border: 0; border-bottom: 1px solid var(--tn-color-border); background: transparent;
  color: var(--tn-color-text); font: inherit; font-size: var(--tn-text-sm); text-align: left;
}
.cls-tools__nearest li:last-child .cls-tools__hit { border-bottom: 0; }
.cls-tools__hit:hover { background: var(--tn-color-surface-sunken); }
.cls-tools__hit-name { display: flex; flex-direction: column; min-width: 0; font-weight: var(--tn-weight-semibold); overflow-wrap: anywhere; }
.cls-tools__hit-class { font-weight: var(--tn-weight-regular); font-size: var(--tn-text-xs); color: var(--tn-color-text-muted); }

.cls-tools__saved-item {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: var(--tn-space-xs);
  padding: var(--tn-space-xxs) 0;
  border-bottom: 1px solid var(--tn-color-border); font-size: var(--tn-text-sm);
}
.cls-tools__saved-item:last-child { border-bottom: 0; }
.cls-tools__saved-text { display: flex; flex-direction: column; min-width: 0; }
.cls-tools__saved-name { font-weight: var(--tn-weight-semibold); }
.cls-tools__saved-figure { font-variant-numeric: tabular-nums; color: var(--tn-color-text-muted); overflow-wrap: anywhere; }
.cls-tools__remove {
  appearance: none; cursor: pointer; width: var(--tn-size-control); height: var(--tn-size-control);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--tn-radius-md);
  background: transparent; color: var(--tn-color-text-muted);
}
.cls-tools__remove:hover { background: var(--tn-color-surface-sunken); color: var(--tn-color-text); border-color: var(--tn-color-border-control); }

.cls-tools__keys { margin: 0; display: flex; flex-direction: column; gap: var(--tn-space-xxs); }
.cls-tools__key { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--tn-space-xs); align-items: baseline; font-size: var(--tn-text-xs); }
.cls-tools__key dt { margin: 0; }
.cls-tools__key dd { margin: 0; color: var(--tn-color-text-muted); }
.cls-tools__key kbd {
  display: inline-block; min-width: 24px; padding: 1px 6px; text-align: center;
  font-family: var(--tn-font-mono); font-size: var(--tn-text-xs); color: var(--tn-color-text);
  background: var(--tn-color-surface-raised);
  border: 1px solid var(--tn-color-border-strong); border-bottom-width: 2px; border-radius: var(--tn-radius-sm);
}

.cls-tools__tool:focus-visible, .cls-tools__btn:focus-visible, .cls-tools__preset:focus-visible,
.cls-tools__remove:focus-visible, .cls-tools__range:focus-visible {
  outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px;
}
.cls-tools__hit:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }

@media (max-width: 899.98px) {
  /* Under the map on a phone the column is the full width, so four tools fit on one row. */
  .cls-tools__picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cls-tools__tool { flex-direction: column; justify-content: center; gap: 2px; padding: var(--tn-space-xxs); text-align: center; min-height: 56px; }
}
@media (max-width: 639.98px) {
  .cls-tools__key { grid-template-columns: 84px minmax(0, 1fr); }
}


@media (prefers-reduced-motion: reduce) {
  .cls-tools *, .cls-tools-map * { transition: none !important; animation: none !important; }
}

@media (forced-colors: active) {
  .cls-tools__tool, .cls-tools__btn, .cls-tools__preset, .cls-tools__remove { border: 1px solid ButtonText; }
  .cls-tools__tool[aria-pressed='true'], .cls-tools__preset[aria-pressed='true'] { border: 3px solid Highlight; }
  .cls-tools__card, .cls-tools__nearest { border: 1px solid CanvasText; }
  .cls-tools__hint, .cls-tools__warn { border-left-color: CanvasText; }
  .cls-tools-map__line, .cls-tools-map__band, .cls-tools-map__spoke, .cls-tools-map__preview,
  .cls-tools-map__area, .cls-tools-map__lasso--applied, .cls-tools-map__radius,
  .cls-tools-map__centre path { stroke: CanvasText; }
  .cls-tools-map__area, .cls-tools-map__area-live, .cls-tools-map__lasso, .cls-tools-map__radius { fill: none; }
  .cls-tools-map__vertex { fill: Canvas; stroke: CanvasText; }
  .cls-tools-map__label { fill: CanvasText; stroke: Canvas; }
}

@media print {
  /* A printed map keeps finished measurements, the drawn area and the radius;
     it drops what only means something under a live pointer. */
  .cls-tools-map__centre, .cls-tools-map__preview, .cls-tools-map__band { display: none; }
  .cls-tools { display: none; }
}


.cls-panel-select {
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--tn-size-control);
  padding: 0 var(--tn-space-xl) 0 var(--tn-space-sm);
  border: 1px solid var(--tn-color-border-control);
  border-radius: var(--tn-radius-md);
  background-color: var(--tn-color-surface-raised);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%2342534e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--tn-space-xs) center;
  background-size: 20px 20px;
  color: var(--tn-color-text);
  font-size: var(--tn-text-base);
  text-overflow: ellipsis;
  cursor: pointer;
}
.cls-panel-select:hover { border-color: var(--tn-color-text-muted); }

.cls-panel-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--tn-size-control);
  padding: 0 var(--tn-space-sm);
  border: 1px solid var(--tn-color-border-control);
  border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised);
  color: var(--tn-color-text);
  font-size: var(--tn-text-sm);
}
.cls-panel-input::placeholder { color: var(--tn-color-text-faint); }
.cls-panel-select:focus-visible,
.cls-panel-input:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 1px; }

.cls-panel-btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tn-space-xxs);
  min-height: var(--tn-size-control); padding: 0 var(--tn-space-md);
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised); color: var(--tn-color-text);
  font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold);
  white-space: nowrap; cursor: pointer;
}
.cls-panel-btn:hover:not([disabled]) { background: var(--tn-color-accent-soft); border-color: var(--tn-color-accent); color: var(--tn-color-accent-soft-ink); }
.cls-panel-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
/* Its one use is "Add condition" in the query builder: a query, so the query
   green that Attribute Query wears on Home (white on it 6.48:1). */
.cls-panel-btn--primary { background: var(--tn-color-success); border-color: var(--tn-color-success); color: var(--tn-color-success-ink); }
.cls-panel-btn--primary:hover:not([disabled]) { background: var(--tn-color-success-soft-ink); border-color: var(--tn-color-success-soft-ink); color: var(--tn-color-success-ink); }
.cls-panel-btn--quiet { border-color: transparent; background: transparent; color: var(--tn-color-text-muted); }

.cls-panel-btn:focus-visible,
.cls-panel-themes__btn:focus-visible,
.cls-panel-presets__chip:focus-visible,
.cls-panel-join__btn:focus-visible,
.cls-panel-legend__only:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }

/* The swatch keeps its data colour in forced colours and on paper: it is the
   thing the map is keyed by, and the word beside it is already the fallback. */
.cls-panel-swatch { display: block; flex: none; forced-color-adjust: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }

.cls-panel-check { display: block; flex: none; }
.cls-panel-check__box { fill: var(--tn-color-surface-raised); stroke: var(--tn-color-border-control); stroke-width: 1.5; }
.cls-panel-check__tick { stroke: transparent; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
[aria-pressed='true'] > .cls-panel-check .cls-panel-check__box { fill: var(--tn-color-accent); stroke: var(--tn-color-accent); }
[aria-pressed='true'] > .cls-panel-check .cls-panel-check__tick { stroke: var(--tn-color-accent-ink); }


.cls-panel-picker { display: inline-flex; align-items: center; gap: var(--tn-space-xs); min-width: 0; max-width: 100%; }
.cls-panel-picker__label { font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text-muted); white-space: nowrap; }
.cls-panel-picker__select { width: auto; min-width: 13rem; max-width: 20rem; font-weight: var(--tn-weight-medium); }
@media (max-width: 639.98px) {
  .cls-panel-picker { flex: 1 1 100%; }
  .cls-panel-picker__select { flex: 1 1 auto; width: 100%; min-width: 0; max-width: none; }
}
/* A phone zooms the page into any field under 16px when it takes focus. */
@media (max-width: 767.98px), (pointer: coarse) {
  .cls-panel-select { font-size: var(--tn-text-md); }
}


.cls-panel-classify { display: flex; flex-direction: column; gap: var(--tn-space-md); min-width: 0; }
.cls-panel-classify__title,
.cls-panel-query__title { margin: 0; font-size: var(--tn-text-md); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text); line-height: var(--tn-leading-tight); }

.cls-panel-themes { display: flex; flex-direction: column; border: 1px solid var(--tn-color-border-strong); border-radius: var(--tn-radius-md); overflow: hidden; }
.cls-panel-themes__group + .cls-panel-themes__group { border-top: 1px solid var(--tn-color-border); }
.cls-panel-themes__summary {
  display: flex; align-items: center; gap: var(--tn-space-xs);
  min-height: var(--tn-size-control); padding: var(--tn-space-xxs) var(--tn-space-sm);
  list-style: none; cursor: pointer;
  font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text);
}
.cls-panel-themes__summary::-webkit-details-marker { display: none; }
.cls-panel-themes__summary::before {
  content: ''; flex: none; width: 7px; height: 7px; margin: 0 4px 0 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--tn-duration-fast) var(--tn-easing-standard);
}
.cls-panel-themes__group[open] > .cls-panel-themes__summary::before { transform: rotate(45deg); }
.cls-panel-themes__summary:hover { background: var(--tn-color-surface-sunken); }
.cls-panel-themes__summary:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
.cls-panel-themes__name { flex: 1 1 auto; min-width: 0; }
.cls-panel-themes__current { min-width: 0; max-width: 55%; text-align: right; overflow-wrap: anywhere; color: var(--tn-color-accent-soft-ink); font-weight: var(--tn-weight-medium); font-size: var(--tn-text-xs); line-height: var(--tn-leading-snug); }
.cls-panel-themes__n { color: var(--tn-color-text-faint); font-weight: var(--tn-weight-regular); font-size: var(--tn-text-xs); font-variant-numeric: tabular-nums; }
.cls-panel-themes__list { list-style: none; margin: 0; padding: 0 var(--tn-space-sm) var(--tn-space-sm); display: flex; flex-wrap: wrap; gap: var(--tn-space-xxs); }
.cls-panel-themes__btn {
  appearance: none; min-height: var(--tn-size-control); padding: var(--tn-space-xxs) var(--tn-space-sm);
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-pill);
  background: var(--tn-color-surface-raised); color: var(--tn-color-text);
  font-size: var(--tn-text-xs); font-weight: var(--tn-weight-medium); line-height: var(--tn-leading-snug);
  text-align: left; cursor: pointer;
}
.cls-panel-themes__btn:hover:not([aria-pressed='true']) { background: var(--tn-color-accent-soft); border-color: var(--tn-color-accent); color: var(--tn-color-accent-soft-ink); }
.cls-panel-themes__btn[aria-pressed='true'],
.cls-panel-presets__chip[aria-pressed='true'],
.cls-panel-join__btn[aria-pressed='true'] { background: var(--tn-color-action); border-color: var(--tn-color-action); color: var(--tn-color-action-ink); font-weight: var(--tn-weight-semibold); }
/* A tick as well as the fill: the pressed state is never colour alone. */
.cls-panel-themes__btn[aria-pressed='true']::before,
.cls-panel-presets__chip[aria-pressed='true']::before { content: '✓'; margin-right: 6px; }

.cls-panel-classify__desc { margin: 0; font-size: var(--tn-text-sm); line-height: var(--tn-leading-normal); color: var(--tn-color-text-muted); }
.cls-panel-classify__desc strong { color: var(--tn-color-text); font-weight: var(--tn-weight-semibold); }


.cls-panel-legend { display: flex; flex-direction: column; gap: var(--tn-space-xs); min-width: 0; }
.cls-panel-legend__head { display: flex; align-items: center; justify-content: space-between; gap: var(--tn-space-sm); }
.cls-panel-legend__title,
.cls-panel-query__sub {
  margin: 0; font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tn-tracking-wide); color: var(--tn-color-text-muted);
}
.cls-panel-legend__summary { display: block; font-size: var(--tn-text-sm); color: var(--tn-color-text-muted); }
.cls-panel-legend__summary strong { color: var(--tn-color-text); font-variant-numeric: tabular-nums; }

.cls-panel-legend__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cls-panel-legend__row { display: flex; align-items: stretch; gap: 2px; min-width: 0; }
/* One compact control per row (32px with a mouse, 44 by touch): the label line
   and its 4px bar fit inside it, so the eight rows of a breakdown stay on the
   control scale rather than at the 43px their padding used to make them. */
.cls-panel-legend__toggle {
  appearance: none; flex: 1 1 auto; min-width: 0; min-height: var(--tn-size-control-compact);
  display: grid; grid-template-columns: 18px 14px minmax(0, 1fr) auto auto;
  align-items: center; column-gap: var(--tn-space-xs); row-gap: 2px;
  /* 1px, not 3px: label + gap + bar + padding + border now sum under 32px, so
     min-height sets the row at exactly the compact step (it measured 35px). */
  padding: 1px var(--tn-space-xs);
  border: 1px solid transparent; border-radius: var(--tn-radius-md);
  background: transparent; color: var(--tn-color-text);
  font-size: var(--tn-text-sm); text-align: left; cursor: pointer;
}
.cls-panel-legend__toggle:hover { background: var(--tn-color-surface-sunken); }
.cls-panel-legend__toggle:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -1px; }
.cls-panel-legend__label { min-width: 0; overflow-wrap: anywhere; line-height: var(--tn-leading-snug); }
.cls-panel-legend__count { font-variant-numeric: tabular-nums; font-weight: var(--tn-weight-semibold); text-align: right; }
.cls-panel-legend__share { min-width: 3.1em; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--tn-text-xs); color: var(--tn-color-text-faint); }
.cls-panel-legend__bar { position: relative; grid-column: 3 / -1; height: 4px; border-radius: var(--tn-radius-pill); background: var(--tn-color-neutral-soft); overflow: hidden; }
.cls-panel-legend__bar::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: var(--tn-meter-fill, 0%); border-radius: inherit; background: var(--tn-color-text-muted); }

.cls-panel-legend__row[data-shown='false'] .cls-panel-legend__label { text-decoration: line-through; color: var(--tn-color-text-faint); }
.cls-panel-legend__row[data-shown='false'] .cls-panel-legend__count { color: var(--tn-color-text-faint); font-weight: var(--tn-weight-regular); }
.cls-panel-legend__row[data-shown='false'] .cls-panel-swatch { opacity: 0.35; }
.cls-panel-legend__row[data-shown='false'] .cls-panel-legend__bar::after { background: var(--tn-color-border-strong); }
.cls-panel-legend__row[data-empty='true'] .cls-panel-legend__label,
.cls-panel-legend__row[data-empty='true'] .cls-panel-legend__count { color: var(--tn-color-text-faint); }
.cls-panel-legend__row[data-empty='true'] .cls-panel-swatch { opacity: 0.45; }

.cls-panel-legend__only {
  appearance: none; flex: none; min-width: 48px; min-height: var(--tn-size-control-compact); padding: 0 var(--tn-space-xs);
  border: 1px solid transparent; border-radius: var(--tn-radius-md);
  background: transparent; color: var(--tn-color-accent-soft-ink);
  font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold); cursor: pointer;
}
.cls-panel-legend__only:hover { background: var(--tn-color-accent-soft); border-color: var(--tn-color-accent); }

.cls-panel-legend__hint { margin: 0; font-size: var(--tn-text-xs); color: var(--tn-color-text-faint); }
.cls-panel-legend__notes {
  margin: 0; display: flex; flex-direction: column; gap: var(--tn-space-xs);
  padding: var(--tn-space-sm); border-left: 3px solid var(--tn-color-border-strong);
  border-radius: 0 var(--tn-radius-sm) var(--tn-radius-sm) 0;
  background: var(--tn-color-surface-sunken); font-size: var(--tn-text-xs); line-height: var(--tn-leading-snug);
}
.cls-panel-legend__note dt { font-weight: var(--tn-weight-semibold); color: var(--tn-color-text); }
.cls-panel-legend__note dd { margin: 2px 0 0; color: var(--tn-color-text-muted); }


.cls-panel-maplegend {
  position: absolute; left: var(--tn-space-sm); bottom: 46px; z-index: 1;
  box-sizing: border-box; width: max-content; min-width: 168px; max-width: min(280px, calc(100% - 84px));
  background: var(--tn-color-surface-overlay);
  border: 1px solid var(--tn-color-border-strong); border-radius: var(--tn-radius-md);
  box-shadow: var(--tn-shadow-md);
  color: var(--tn-color-text); font-size: var(--tn-text-xs);
  cursor: default; touch-action: pan-y;
}
.cls-panel-maplegend__summary {
  display: flex; align-items: center; gap: var(--tn-space-xs);
  min-height: var(--tn-size-control); padding: 0 var(--tn-space-sm);
  list-style: none; cursor: pointer; font-weight: var(--tn-weight-semibold);
  border-radius: var(--tn-radius-md);
}
.cls-panel-maplegend__summary::-webkit-details-marker { display: none; }
.cls-panel-maplegend__summary::after {
  content: ''; flex: none; width: 7px; height: 7px; margin-left: auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-135deg) translate(-2px, -2px);
  transition: transform var(--tn-duration-fast) var(--tn-easing-standard);
}
.cls-panel-maplegend[open] > .cls-panel-maplegend__summary::after { transform: rotate(45deg); }
/* A PHONE SHOWS THE KEY FOLDED FROM THE FIRST PAINT. The server renders it open
   (it cannot know the width), and the reader's saved choice is read after
   hydration; until then a phone draws only the summary, so folding it moves
   nothing on the map (it was 0.027 of layout shift). */
@media (max-width: 639.98px) {
  .cls-panel-maplegend:not([data-settled]) > :not(.cls-panel-maplegend__summary) { display: none; }
  .cls-panel-maplegend:not([data-settled]) > .cls-panel-maplegend__summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .cls-panel-maplegend:not([data-settled]) > .cls-panel-maplegend__summary { border-bottom: 0; border-radius: var(--tn-radius-md); }
}
.cls-panel-maplegend[open] > .cls-panel-maplegend__summary { border-bottom: 1px solid var(--tn-color-border); border-radius: var(--tn-radius-md) var(--tn-radius-md) 0 0; }
.cls-panel-maplegend__summary:hover { background: var(--tn-color-surface-sunken); }
.cls-panel-maplegend__summary:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
.cls-panel-maplegend__title { min-width: 0; overflow-wrap: anywhere; line-height: var(--tn-leading-snug); }
.cls-panel-maplegend__hidden { flex: none; padding: 0 6px; border-radius: var(--tn-radius-pill); background: var(--tn-color-neutral-soft); color: var(--tn-color-neutral-soft-ink); font-weight: var(--tn-weight-medium); font-variant-numeric: tabular-nums; }

.cls-panel-maplegend__list {
  list-style: none; margin: 0; padding: var(--tn-space-xxs);
  max-height: 150px; overflow-y: auto; overscroll-behavior: contain;
}
@media (min-width: 640px) { .cls-panel-maplegend__list { max-height: 220px; } }
@media (min-width: 1024px) { .cls-panel-maplegend__list { max-height: 280px; } }
.cls-panel-maplegend__item {
  appearance: none; box-sizing: border-box; width: 100%;
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; column-gap: var(--tn-space-xs);
  min-height: var(--tn-size-control); padding: 2px var(--tn-space-xs);
  border: 0; border-radius: var(--tn-radius-sm);
  background: transparent; color: var(--tn-color-text);
  font-size: var(--tn-text-xs); text-align: left; cursor: pointer;
}
@media (min-width: 640px) and (pointer: fine) {
  .cls-panel-maplegend__summary { min-height: var(--tn-size-control-compact); }
  .cls-panel-maplegend__item { min-height: var(--tn-size-control-compact); }
}
.cls-panel-maplegend__item:hover { background: var(--tn-color-surface-sunken); }
.cls-panel-maplegend__item:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
.cls-panel-maplegend__label { min-width: 0; overflow-wrap: anywhere; line-height: var(--tn-leading-snug); }
.cls-panel-maplegend__count { font-variant-numeric: tabular-nums; color: var(--tn-color-text-muted); }
.cls-panel-maplegend__item[aria-pressed='false'] .cls-panel-maplegend__label { text-decoration: line-through; color: var(--tn-color-text-faint); }
.cls-panel-maplegend__item[aria-pressed='false'] .cls-panel-swatch { opacity: 0.3; }
.cls-panel-maplegend__item[data-empty='true'] .cls-panel-maplegend__label,
.cls-panel-maplegend__item[data-empty='true'] .cls-panel-maplegend__count { color: var(--tn-color-text-faint); }
@media (max-width: 639.98px) {
  .cls-panel-maplegend { min-width: 0; max-width: calc(100% - 76px); }
}


.cls-panel-query { display: flex; flex-direction: column; gap: var(--tn-space-md); min-width: 0; }
.cls-panel-query__count {
  display: block; padding: var(--tn-space-sm) var(--tn-space-md);
  border-radius: var(--tn-radius-md); background: var(--tn-color-accent-soft); color: var(--tn-color-accent-soft-ink);
  font-size: var(--tn-text-sm); line-height: var(--tn-leading-snug);
}
.cls-panel-query__n { font-size: var(--tn-text-xl); font-weight: var(--tn-weight-bold); font-variant-numeric: tabular-nums; line-height: 1; }
.cls-panel-query__of { font-weight: var(--tn-weight-medium); }
.cls-panel-query__also { display: block; margin-top: 2px; font-size: var(--tn-text-xs); }
.cls-panel-query__block { display: flex; flex-direction: column; gap: var(--tn-space-xs); min-width: 0; }

/* Two to a row, as tiles: eight questions one per line was 400px of the panel
   before the first condition, and most of their labels wrap at this width
   anyway. */
.cls-panel-presets {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--tn-space-xxs);
}
.cls-panel-presets > li { display: flex; min-width: 0; }
.cls-panel-presets__chip {
  appearance: none; flex: 1 1 auto; min-width: 0; min-height: var(--tn-size-control); padding: 6px var(--tn-space-sm);
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised); color: var(--tn-color-text);
  font-size: var(--tn-text-xs); font-weight: var(--tn-weight-medium); line-height: var(--tn-leading-snug);
  text-align: left; cursor: pointer;
}
.cls-panel-presets__chip:hover:not([aria-pressed='true']) { background: var(--tn-color-accent-soft); border-color: var(--tn-color-accent); color: var(--tn-color-accent-soft-ink); }

.cls-panel-join { margin: 0; padding: 0; border: 0; min-width: 0; }
.cls-panel-join__legend { padding: 0; margin-bottom: var(--tn-space-xxs); font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text); }
.cls-panel-join__seg { display: flex; border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md); overflow: hidden; background: var(--tn-color-surface-raised); }
.cls-panel-join__btn {
  appearance: none; flex: 1 1 0; min-height: var(--tn-size-control); padding: 0 var(--tn-space-sm);
  border: 0; background: transparent; color: var(--tn-color-text-muted);
  font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); cursor: pointer;
}
.cls-panel-join__btn + .cls-panel-join__btn { border-left: 1px solid var(--tn-color-border); }
.cls-panel-join__btn:hover:not([aria-pressed='true']) { background: var(--tn-color-surface-sunken); color: var(--tn-color-text); }
.cls-panel-join__btn:focus-visible { outline-offset: -3px; }
/* Inset, the ring on the pressed half is teal on the teal fill; the band of the
   ring-offset colour between them is what makes the focus visible there. */
.cls-panel-join__btn[aria-pressed='true']:focus-visible { box-shadow: inset 0 0 0 5px var(--tn-color-focus-ring-offset); }

.cls-panel-clauses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tn-space-xs); }
/* The join, written between the conditions, so the list reads as a sentence. */
.cls-panel-clauses > .cls-panel-clause + .cls-panel-clause::before {
  display: block; margin: 0 0 var(--tn-space-xs) var(--tn-space-sm);
  font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold); letter-spacing: var(--tn-tracking-wide); text-transform: uppercase;
  color: var(--tn-color-text-faint);
}
.cls-panel-clauses[data-join='all'] > .cls-panel-clause + .cls-panel-clause::before { content: 'and'; content: 'and' / ''; }
.cls-panel-clauses[data-join='any'] > .cls-panel-clause + .cls-panel-clause::before { content: 'or'; content: 'or' / ''; }

.cls-panel-clause__set {
  display: flex; flex-direction: column; gap: var(--tn-space-xs);
  min-width: 0; margin: 0; padding: var(--tn-space-xs) var(--tn-space-sm) var(--tn-space-sm);
  border: 1px solid var(--tn-color-border-strong); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised);
}
.cls-panel-clause[data-complete='false'] .cls-panel-clause__set { border-style: dashed; border-color: var(--tn-color-status-pending); }
.cls-panel-clause__legend {
  padding: 0 var(--tn-space-xxs);
  font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold); letter-spacing: var(--tn-tracking-wide); text-transform: uppercase;
  color: var(--tn-color-text-muted);
}
.cls-panel-clause__options { display: flex; flex-wrap: wrap; gap: 0 var(--tn-space-sm); min-width: 0; margin: 0; padding: 0; border: 0; }
.cls-panel-tick {
  display: inline-flex; align-items: center; gap: var(--tn-space-xs);
  min-height: var(--tn-size-control); padding: 0 var(--tn-space-xs); border-radius: var(--tn-radius-sm);
  font-size: var(--tn-text-sm); cursor: pointer;
}
.cls-panel-tick:hover { background: var(--tn-color-surface-sunken); }
.cls-panel-tick input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--tn-color-accent); cursor: pointer; }
.cls-panel-tick input:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }

.cls-panel-clause__values { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tn-space-xs); min-width: 0; }
.cls-panel-clause__and { font-size: var(--tn-text-xs); color: var(--tn-color-text-faint); }
.cls-panel-unit {
  display: flex; align-items: stretch; flex: 1 1 7rem; min-width: 0;
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised); overflow: hidden;
}
.cls-panel-unit:focus-within { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 1px; }
.cls-panel-unit__input { flex: 1 1 auto; width: auto; min-width: 0; border: 0; border-radius: 0; font-variant-numeric: tabular-nums; }
.cls-panel-unit__input:focus-visible { outline: none; }
.cls-panel-unit__adorn {
  display: inline-flex; align-items: center; flex: none; padding: 0 var(--tn-space-xs);
  background: var(--tn-color-surface-sunken); color: var(--tn-color-text-muted);
  font-size: var(--tn-text-xs); font-weight: var(--tn-weight-medium); white-space: nowrap;
}
.cls-panel-unit[data-unit='before'] .cls-panel-unit__adorn { border-right: 1px solid var(--tn-color-border); }
.cls-panel-unit[data-unit='after'] .cls-panel-unit__adorn { border-left: 1px solid var(--tn-color-border); }

.cls-panel-clause__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--tn-space-xs); min-width: 0; }
.cls-panel-clause__sentence { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--tn-text-xs); line-height: var(--tn-leading-snug); color: var(--tn-color-text-muted); overflow-wrap: anywhere; }
.cls-panel-clause__sentence[data-complete='false'] { color: var(--tn-color-status-pending-ink); font-weight: var(--tn-weight-medium); }
.cls-panel-clause__foot .cls-panel-btn { flex: none; padding: 0 var(--tn-space-sm); }

.cls-panel-query__empty { margin: 0; font-size: var(--tn-text-sm); color: var(--tn-color-text-muted); }
.cls-panel-query__waiting { margin: 0; font-size: var(--tn-text-xs); font-weight: var(--tn-weight-medium); color: var(--tn-color-status-pending-ink); }
.cls-panel-query__actions { display: flex; flex-wrap: wrap; gap: var(--tn-space-xs); }
.cls-panel-query__actions .cls-panel-btn { flex: 1 1 auto; }


@media (prefers-reduced-motion: reduce) {
  .cls-panel-themes__summary::before,
  .cls-panel-maplegend__summary::after { transition: none; }
}

@media (forced-colors: active) {
  .cls-panel-check__box { fill: Canvas; stroke: CanvasText; }
  [aria-pressed='true'] > .cls-panel-check .cls-panel-check__box { fill: Highlight; stroke: Highlight; }
  [aria-pressed='true'] > .cls-panel-check .cls-panel-check__tick { stroke: HighlightText; }
  .cls-panel-themes__btn[aria-pressed='true'],
  .cls-panel-presets__chip[aria-pressed='true'],
  .cls-panel-join__btn[aria-pressed='true'] { border: 2px solid Highlight; }
  .cls-panel-legend__bar { border: 1px solid CanvasText; }
  .cls-panel-legend__bar::after { background: CanvasText; }
  .cls-panel-maplegend, .cls-panel-clause__set, .cls-panel-themes { border: 1px solid CanvasText; }
  .cls-panel-query__count { border: 1px solid CanvasText; }
}

/* The key prints on the map, open and without its fold or its scroll: a
   printed map is read without a mouse. The side panel and the toolbar are not
   printed at all (styles.ts hides them). */
@media print {
  .cls-panel-maplegend { box-shadow: none; border-color: #000000; background: #ffffff; max-width: 45%; }
  .cls-panel-maplegend__summary { min-height: 0; padding: 3pt 6pt; cursor: default; }
  .cls-panel-maplegend__summary::after { display: none; }
  .cls-panel-maplegend__list { max-height: none; overflow: visible; padding: 2pt 4pt; }
  .cls-panel-maplegend__item { min-height: 0; padding: 1pt 2pt; }
  .cls-panel-picker { display: none !important; }
}


.cls-layers { display: flex; flex-direction: column; gap: var(--tn-space-lg); min-width: 0; }
.cls-layers [hidden] { display: none !important; }

.cls-layers__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--tn-space-xxs) var(--tn-space-sm); }
.cls-layers__title { margin: 0; font-size: var(--tn-text-lg); font-weight: var(--tn-weight-semibold); line-height: var(--tn-leading-tight); }
.cls-layers__summary { margin: 0; font-size: var(--tn-text-sm); color: var(--tn-color-text-muted); font-variant-numeric: tabular-nums; }

.cls-layers__block { display: flex; flex-direction: column; gap: var(--tn-space-sm); min-width: 0; }
.cls-layers__subtitle {
  margin: 0; font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold);
  letter-spacing: var(--tn-tracking-wide); text-transform: uppercase; color: var(--tn-color-text-muted);
}
.cls-layers__note { margin: 0; font-size: var(--tn-text-xs); color: var(--tn-color-text-faint); line-height: var(--tn-leading-snug); }


.cls-layers__tools { display: grid; gap: var(--tn-space-xs); min-width: 0; }
.cls-layers__find-label { font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text); }
.cls-layers__find {
  width: 100%; min-height: var(--tn-size-touch); padding: 0 var(--tn-space-sm);
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface); color: var(--tn-color-text);
  font: inherit; font-size: var(--tn-text-base);
}
.cls-layers__find::placeholder { color: var(--tn-color-text-faint); }
.cls-layers__find:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 1px; }
.cls-layers__bulk { display: flex; flex-wrap: wrap; gap: var(--tn-space-xs); }
.cls-layers__btn {
  appearance: none; cursor: pointer; flex: 1 1 auto;
  min-height: var(--tn-size-touch); padding: 0 var(--tn-space-md);
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised); color: var(--tn-color-text);
  font: inherit; font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold);
}
.cls-layers__btn:hover { background: var(--tn-color-surface-sunken); }
.cls-layers__btn:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }

.cls-layers__tree { display: flex; flex-direction: column; gap: var(--tn-space-xs); min-width: 0; }

.cls-layers__pack { display: flex; flex-direction: column; min-width: 0; }
.cls-layers__packbody { display: flex; flex-direction: column; gap: var(--tn-space-xxs); padding-top: var(--tn-space-xxs); }
.cls-layers__packbody > .cls-layers__note { padding: 0 var(--tn-space-xs); }
.cls-layers__group { display: flex; flex-direction: column; min-width: 0; }

.cls-layers__grouphead { display: flex; align-items: center; min-height: var(--tn-size-touch); min-width: 0; border-radius: var(--tn-radius-sm); }
.cls-layers__grouphead[data-level='pack'] { background: var(--tn-color-surface-sunken); }
.cls-layers__grouphead[data-level='geometry'] { border-bottom: 1px solid var(--tn-color-border); border-radius: 0; }
.cls-layers__heading { margin: 0; flex: 1 1 auto; min-width: 0; font-size: var(--tn-text-sm); }
.cls-layers__grouphead[data-level='pack'] .cls-layers__heading { font-size: var(--tn-text-base); }

.cls-layers__fold {
  appearance: none; border: 0; background: transparent; cursor: pointer; text-align: left;
  width: 100%; min-height: var(--tn-size-touch); padding: 0 var(--tn-space-xs) 0 0;
  display: flex; align-items: center; gap: var(--tn-space-xxs);
  font: inherit; font-weight: var(--tn-weight-semibold); color: var(--tn-color-text); border-radius: var(--tn-radius-sm);
}
.cls-layers__fold:hover { color: var(--tn-color-accent); }
.cls-layers__fold:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
.cls-layers__chevron { flex: none; color: var(--tn-color-text-muted); transition: transform var(--tn-duration-fast) var(--tn-easing-standard); }
.cls-layers__fold[aria-expanded='true'] .cls-layers__chevron { transform: rotate(90deg); }
.cls-layers__grouptitle { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: var(--tn-leading-tight); }
.cls-layers__pack[data-hidden='true'] .cls-layers__grouphead[data-level='pack'] .cls-layers__grouptitle { color: var(--tn-color-text-muted); }

/* The 44px hit area round a group's 20px box. */
.cls-layers__hit { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--tn-size-touch); min-height: var(--tn-size-touch); cursor: pointer; }
.cls-layers__check { width: 20px; height: 20px; margin: 0; flex: none; cursor: pointer; accent-color: var(--tn-color-accent); }
.cls-layers__check:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }

.cls-layers__count { flex: none; margin-left: auto; font-size: var(--tn-text-xs); font-weight: var(--tn-weight-regular); color: var(--tn-color-text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cls-layers__of { color: var(--tn-color-text-faint); }

.cls-layers__rows { list-style: none; margin: 0; padding: 0 0 0 var(--tn-space-sm); display: flex; flex-direction: column; }
.cls-layers__row { display: flex; align-items: stretch; min-width: 0; border-bottom: 1px solid var(--tn-color-border); }
.cls-layers__row:last-child { border-bottom: 0; }
.cls-layers__label {
  flex: 1 1 auto; min-width: 0; cursor: pointer;
  display: flex; align-items: center; gap: var(--tn-space-xs);
  min-height: var(--tn-size-touch); padding: var(--tn-space-xxs) var(--tn-space-xxs) var(--tn-space-xxs) var(--tn-space-xs);
  border-radius: var(--tn-radius-sm);
}
.cls-layers__label:hover { background: var(--tn-color-surface-sunken); }
.cls-layers__glyph {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--tn-radius-sm);
  background: var(--tn-color-surface); border: 1px solid var(--tn-color-border);
  color: var(--tn-color-text-muted);
}
.cls-layers__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cls-layers__name { font-size: var(--tn-text-sm); line-height: var(--tn-leading-tight); color: var(--tn-color-text); overflow-wrap: anywhere; }
.cls-layers__meta { font-size: var(--tn-text-xs); line-height: var(--tn-leading-tight); color: var(--tn-color-text-faint); overflow-wrap: anywhere; }
.cls-layers__row[data-shown='false'] .cls-layers__name { color: var(--tn-color-text-muted); }
/* An empty class is still a row: greyed, and said in words beside the grey. */
.cls-layers__row[data-empty='true'] .cls-layers__name { color: var(--tn-color-text-faint); }
.cls-layers__row[data-empty='true'] .cls-layers__glyph { background: var(--tn-color-surface-sunken); border-style: dashed; }
.cls-layers__row[data-empty='true'] .cls-layers__glyph svg { opacity: 0.55; }

.cls-layers__only {
  appearance: none; border: 0; background: transparent; cursor: pointer; flex: none;
  min-height: var(--tn-size-touch); min-width: var(--tn-size-touch); padding: 0 var(--tn-space-xs);
  font: inherit; font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold); color: var(--tn-color-accent);
  border-radius: var(--tn-radius-sm);
}
.cls-layers__only:hover { background: var(--tn-color-accent-soft); color: var(--tn-color-accent-soft-ink); }
.cls-layers__only:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }

/* ON A DESK the side panel scrolls, so the finder stays pinned over the rows it
   narrows. The negative top cancels the panel's own padding so nothing scrolls
   visibly above it. */
@media (min-width: 900px) {
  .cls-layers__tools {
    position: sticky; top: calc(-1 * var(--tn-space-md)); z-index: 1;
    background: var(--tn-color-surface-raised);
    padding: var(--tn-space-xs) 0; margin: calc(-1 * var(--tn-space-xs)) 0;
  }
}

/* ON A PHONE the panel sits under the map in the page's own scroll. Sixty rows
   at 44px would push the charts and the results table two screens down, so the
   tree scrolls inside its own box instead. */
@media (max-width: 899.98px) {
  .cls-layers__tree {
    max-height: 65dvh; overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--tn-color-border); border-radius: var(--tn-radius-md);
    padding: var(--tn-space-xxs);
  }
}


@media (prefers-reduced-motion: reduce) {
  .cls-layers__chevron { transition: none; }
}

@media (forced-colors: active) {
  .cls-layers__btn, .cls-layers__find { border: 1px solid ButtonText; }
  .cls-layers__grouphead[data-level='pack'] { border: 1px solid CanvasText; }
  .cls-layers__glyph { border: 1px solid CanvasText; }
  .cls-layers__check { accent-color: auto; }
}

@media print {
  .cls-layers__tools, .cls-layers__only, .cls-layers__hit { display: none !important; }
  .cls-layers__tree { max-height: none; overflow: visible; border: 0; }
  .cls-layers [hidden] { display: flex !important; }
}


.cls-search { position: relative; flex: 1 1 300px; min-width: 240px; max-width: 460px; }
@media (max-width: 639.98px) {
  .cls-search { flex: 1 1 100%; min-width: 0; max-width: none; }
}

.cls-search__field {
  display: flex; align-items: center; min-height: var(--tn-size-touch);
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised);
}
.cls-search__field:focus-within { border-color: var(--tn-color-accent); box-shadow: var(--tn-shadow-focus); }
.cls-search__icon { flex: none; margin-left: var(--tn-space-sm); color: var(--tn-color-text-faint); }
.cls-search__input {
  flex: 1 1 auto; min-width: 0; height: var(--tn-size-touch); margin: 0; border: 0; background: transparent;
  padding: 0 var(--tn-space-xs); font-size: var(--tn-text-base); color: var(--tn-color-text);
}
/* The ring is drawn by the field around the whole box, so the input's own is dropped. */
.cls-search__input:focus, .cls-search__input:focus-visible { outline: none; }
.cls-search__input::placeholder { color: var(--tn-color-text-faint); opacity: 1; }
.cls-search__kbd {
  flex: none; margin-right: var(--tn-space-sm); min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-sm);
  font-family: var(--tn-font-mono); font-size: var(--tn-text-xs); color: var(--tn-color-text-faint);
  background: var(--tn-color-surface-sunken);
}
.cls-search__field:focus-within .cls-search__kbd { visibility: hidden; }
@media (pointer: coarse) { .cls-search__kbd { display: none; } }
.cls-search__clear {
  flex: none; appearance: none; width: var(--tn-size-touch); height: var(--tn-size-touch); margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--tn-radius-md); background: transparent; cursor: pointer;
  color: var(--tn-color-text-muted);
}
.cls-search__clear:hover { color: var(--tn-color-text); background: var(--tn-color-surface-sunken); }
.cls-search__clear:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }

.cls-search__popup {
  position: absolute; top: calc(100% + var(--tn-space-xxs)); left: 0; right: 0;
  z-index: var(--tn-z-overlay);
  max-height: min(440px, 62vh); overflow-y: auto; overscroll-behavior: contain;
  background: var(--tn-color-surface-raised);
  border: 1px solid var(--tn-color-border-strong); border-radius: var(--tn-radius-md);
  box-shadow: var(--tn-shadow-lg);
}
.cls-search__popup[hidden] { display: none; }
/* Wider than a narrow box on a desk, so a long asset name does not wrap three times. */
@media (min-width: 640px) { .cls-search__popup { right: auto; width: max(100%, 380px); } }
/* The list is a beat behind the typing while the debounce runs; say so quietly. */
.cls-search__popup[data-stale='true'] .cls-search__list { opacity: 0.72; }

.cls-search__list { display: flex; flex-direction: column; padding: var(--tn-space-xxs) 0; }
.cls-search__list:focus { outline: none; }
.cls-search__option {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--tn-space-sm); row-gap: 2px;
  align-items: center; min-height: var(--tn-size-touch);
  padding: var(--tn-space-xs) var(--tn-space-sm) var(--tn-space-xs) var(--tn-space-md);
  border-left: 4px solid transparent; cursor: pointer;
}
.cls-search__option + .cls-search__option { border-top: 1px solid var(--tn-color-border); }
.cls-search__option:hover { background: var(--tn-color-surface-sunken); }
.cls-search__option[aria-selected='true'] { background: var(--tn-color-accent-soft); border-left-color: var(--tn-color-accent); }
.cls-search__option:focus { outline: none; }
.cls-search__option:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
.cls-search__main { grid-column: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--tn-space-xs); min-width: 0; }
.cls-search__label { font-weight: var(--tn-weight-semibold); color: var(--tn-color-text); overflow-wrap: anywhere; }
.cls-search__label[data-mono='true'] { font-family: var(--tn-font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.cls-search__name { color: var(--tn-color-text-muted); font-size: var(--tn-text-sm); overflow-wrap: anywhere; }
.cls-search__meta { grid-column: 1; font-size: var(--tn-text-sm); color: var(--tn-color-text-muted); overflow-wrap: anywhere; }
.cls-search__why { color: var(--tn-color-text-faint); }
.cls-search__side {
  grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end;
  gap: var(--tn-space-xxs);
}
.cls-search__tag {
  display: inline-block; padding: 1px var(--tn-space-xs); border-radius: var(--tn-radius-pill);
  font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold); white-space: nowrap;
  background: var(--tn-color-warning-soft); color: var(--tn-color-warning-soft-ink);
  border: 1px solid var(--tn-color-warning);
}
.cls-search__enter { font-size: var(--tn-text-xs); color: var(--tn-color-text-faint); white-space: nowrap; }
.cls-search__message {
  margin: 0; padding: var(--tn-space-sm) var(--tn-space-md);
  font-size: var(--tn-text-sm); color: var(--tn-color-text-muted);
}
.cls-search__message--foot { border-top: 1px solid var(--tn-color-border); background: var(--tn-color-surface-sunken); }
.cls-search__message--empty { display: flex; align-items: center; gap: var(--tn-space-sm); }
.cls-search__art { flex: none; height: auto; }
.cls-search__message-text { margin: 0; min-width: 0; }

/* The occupant group (survey managers only): a heading row, then one option per
   quarter found by who lives in it. The heading repeats the group's name for
   sighted readers; the group itself is named for assistive technology. */
.cls-search__group { display: flex; flex-direction: column; border-top: 1px solid var(--tn-color-border-strong); }
.cls-search__grouphead {
  padding: var(--tn-space-xs) var(--tn-space-md) var(--tn-space-xxs);
  font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold);
  letter-spacing: var(--tn-tracking-wide); text-transform: uppercase; color: var(--tn-color-text-muted);
}
.cls-search__tag--person {
  background: var(--tn-color-accent-soft); color: var(--tn-color-accent-soft-ink);
  border-color: var(--tn-color-accent);
}
.cls-search__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tn-space-xs); }
.cls-search__retry {
  min-height: var(--tn-size-touch); padding: 0 var(--tn-space-sm);
  border: 1px solid var(--tn-color-border-strong); border-radius: var(--tn-radius-sm);
  background: var(--tn-color-surface); color: var(--tn-color-text);
  font: inherit; font-weight: var(--tn-weight-semibold); cursor: pointer;
}
.cls-search__retry:hover { background: var(--tn-color-surface-sunken); }
.cls-search__retry:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }
.cls-search__query { font-weight: var(--tn-weight-semibold); color: var(--tn-color-text); overflow-wrap: anywhere; }
.cls-search__note {
  position: absolute; top: calc(100% + var(--tn-space-xxs)); left: 0; right: 0; z-index: var(--tn-z-overlay);
  display: block; margin: 0; padding: var(--tn-space-sm) var(--tn-space-md);
  background: var(--tn-color-accent-soft); color: var(--tn-color-accent-soft-ink);
  border: 1px solid var(--tn-color-accent); border-radius: var(--tn-radius-md);
  box-shadow: var(--tn-shadow-md); font-size: var(--tn-text-sm);
}
@media (max-width: 639.98px) {
  .cls-search__option { grid-template-columns: minmax(0, 1fr); }
  .cls-search__side { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
}


.cls-search-table { gap: var(--tn-space-sm); }
.cls-search-table__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tn-space-sm) var(--tn-space-md); }
.cls-search-table__title { margin: 0; font-size: var(--tn-text-lg); font-weight: var(--tn-weight-semibold); }
.cls-search-table__count {
  display: inline-flex; align-items: center; padding: 2px var(--tn-space-sm); border-radius: var(--tn-radius-pill);
  background: var(--tn-color-accent-soft); color: var(--tn-color-accent-soft-ink);
  font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); font-variant-numeric: tabular-nums;
}
.cls-search-table__spacer { flex: 1 1 auto; }
.cls-search-table__tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--tn-space-sm); min-width: 0; }
.cls-search-table__control { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cls-search-table__control-label { font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text-muted); }
.cls-search-table__input {
  min-height: var(--tn-size-touch); width: 280px; max-width: 100%; margin: 0;
  padding: 0 var(--tn-space-sm); font-size: var(--tn-text-base); color: var(--tn-color-text);
  background: var(--tn-color-surface-raised);
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md);
}
.cls-search-table__input::placeholder { color: var(--tn-color-text-faint); opacity: 1; }
.cls-search-table__input:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 1px; }
.cls-search-table__phone { display: none; }

/* THE SCROLLER IS POSITIONED, AND THAT IS WHAT KEEPS THE PAGE STILL. The cells
   carry visually hidden words (tn-vh: "Not recorded", the asset named in each
   "Show on map") and tn-vh is position: absolute. An absolute box is clipped by
   an overflow ancestor only if that ancestor is in its containing-block chain,
   so without this line the hidden words in the right-hand columns escaped the
   scroller, landed at their static position past the card's edge, and made the
   whole document scroll sideways by the width of the table's overhang. */
.cls-search-table__scroll {
  position: relative; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--tn-color-border); border-radius: var(--tn-radius-md);
}
.cls-search-table__scroll:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }
.cls-search-table__table { width: 100%; border-collapse: collapse; font-size: var(--tn-text-sm); }
.cls-search-table__table th {
  padding: 0 var(--tn-space-xxs); text-align: left; vertical-align: bottom;
  background: var(--tn-color-surface-sunken); border-bottom: 1px solid var(--tn-color-border);
  /* Sentence case, like every table head in @tn/ui: capitals are for group labels. */
  font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold);
  color: var(--tn-color-text-muted); line-height: var(--tn-leading-tight);
}
.cls-search-table__table th[data-numeric='true'] { text-align: right; }
.cls-search-table__sort {
  appearance: none; display: inline-flex; align-items: center; gap: 2px; text-align: inherit;
  min-height: var(--tn-size-touch); margin: 0; padding: 0 2px; border: 0; background: transparent;
  cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.cls-search-table__sort:hover { color: var(--tn-color-accent); }
.cls-search-table__sort:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
.cls-search-table__table th[aria-sort='ascending'] .cls-search-table__sort,
.cls-search-table__table th[aria-sort='descending'] .cls-search-table__sort { color: var(--tn-color-text); }
.cls-search-table__sort-icon { flex: none; display: inline-flex; opacity: 0.75; }

.cls-search-table__table td {
  padding: var(--tn-space-xxs) var(--tn-space-xs); border-bottom: 1px solid var(--tn-color-border);
  vertical-align: middle; color: var(--tn-color-text);
}
.cls-search-table__table td[data-numeric='true'] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cls-search-table__table td[data-col='activity'] { font-variant-numeric: tabular-nums; }
.cls-search-table__when { white-space: nowrap; }
.cls-search-table__table tbody tr:last-child td { border-bottom: 0; }
.cls-search-table__table tbody tr { cursor: pointer; }
.cls-search-table__table tbody tr:hover { background: var(--tn-color-surface-sunken); }
.cls-search-table__table tbody tr[data-selected='true'] { background: var(--tn-color-accent-soft); }
.cls-search-table__table tbody tr[data-selected='true'] td:first-child { box-shadow: inset 4px 0 0 var(--tn-color-accent); }

/* THE ASSET COLUMN AND THE ACTION STAY PUT WHILE THE REST SCROLLS. Below a
   wide desk the table is wider than its card, and a row scrolled to its rent
   with the asset number gone off the left edge is a row of figures that belong
   to nobody — while a "Show on map" that is only reachable by scrolling sideways
   first is an action most people never find. The pinned cells carry an opaque
   ground (each row state's own) so the scrolled columns pass under them rather
   than through them. */
@media (min-width: 640px) {
  /* Wide enough that "Access Road to Dam (East)" is two lines, not four. */
  .cls-search-table__table td[data-col='asset'] { min-width: 7.5rem; }
  .cls-search-table__table td[data-col='bucket'] { min-width: 9rem; }
  .cls-search-table__table th:first-child,
  .cls-search-table__table td:first-child {
    position: sticky; left: 0; z-index: 1;
    box-shadow: inset -1px 0 0 var(--tn-color-border);
  }
  .cls-search-table__table th:first-child { background: var(--tn-color-surface-sunken); }
  .cls-search-table__table td:first-child { background: var(--tn-color-surface-raised); }
  .cls-search-table__table tbody tr:hover td:first-child { background: var(--tn-color-surface-sunken); }
  .cls-search-table__table tbody tr[data-selected='true'] td:first-child {
    background: var(--tn-color-accent-soft);
    box-shadow: inset 4px 0 0 var(--tn-color-accent), inset -1px 0 0 var(--tn-color-border);
  }
  .cls-search-table__table th.cls-search-table__action-head,
  .cls-search-table__table td[data-col='action'] {
    position: sticky; right: 0; z-index: 1;
    box-shadow: inset 1px 0 0 var(--tn-color-border);
  }
  .cls-search-table__table th.cls-search-table__action-head { background: var(--tn-color-surface-sunken); }
  .cls-search-table__table td[data-col='action'] { background: var(--tn-color-surface-raised); }
  .cls-search-table__table tbody tr:hover td[data-col='action'] { background: var(--tn-color-surface-sunken); }
  .cls-search-table__table tbody tr[data-selected='true'] td[data-col='action'] { background: var(--tn-color-accent-soft); }
}

.cls-search-table__asset { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--tn-space-xxs) var(--tn-space-xs); }
.cls-search-table__label { font-weight: var(--tn-weight-semibold); overflow-wrap: anywhere; }
.cls-search-table__label[data-mono='true'] { font-family: var(--tn-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cls-search-table__selected {
  padding: 0 6px; border-radius: var(--tn-radius-pill); font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold);
  background: var(--tn-color-accent); color: var(--tn-color-accent-ink);
}
.cls-search-table__bucket { display: inline-flex; align-items: center; gap: var(--tn-space-xs); }
.cls-search-table__pack { color: var(--tn-color-text-muted); }
.cls-search-table__swatch { flex: none; }
/* "Not recorded" and "not applicable" are both a dash, told apart by weight and
   tone rather than by fading one out. The faint dash used to carry opacity 0.7
   on top of text-faint, which measured 3.2:1 on a plain row and 2.8:1 on the
   hover and selected rows — under the 4.5:1 text needs, for the one mark that
   says the cell is empty on purpose. So the dash that asks somebody to go and
   find out is the heavier one, and the dash with nothing to ask is regular
   weight in the faint tone, at full strength (5:1 or better on every row). */
.cls-search-table__missing { color: var(--tn-color-text-muted); }
.cls-search-table__missing[data-kind='nr'] { font-weight: var(--tn-weight-bold); }
.cls-search-table__missing[data-kind='na'] { color: var(--tn-color-text-faint); font-weight: var(--tn-weight-regular); }
.cls-search-table__mixed { font-style: italic; color: var(--tn-color-text-muted); }

.cls-search-table__action { text-align: right; white-space: nowrap; }
.cls-search-table__action-head { width: 1%; }
.cls-search-table__show {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tn-size-touch); margin: 0; padding: 0 var(--tn-space-xs); cursor: pointer;
  font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); white-space: nowrap;
  color: var(--tn-color-accent); background: var(--tn-color-surface-raised);
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md);
}
.cls-search-table__show:hover { background: var(--tn-color-accent-soft); color: var(--tn-color-accent-soft-ink); border-color: var(--tn-color-accent); }
.cls-search-table__show:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }

.cls-search-table__none, .cls-search-table__empty { padding: var(--tn-space-lg) var(--tn-space-md); color: var(--tn-color-text-muted); }
.cls-search-table__empty { margin: 0; }
.cls-search-table__link {
  appearance: none; min-height: var(--tn-size-touch); margin: 0; padding: 0 var(--tn-space-xxs);
  border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: var(--tn-weight-semibold);
  color: var(--tn-color-accent); text-decoration: underline; text-underline-offset: 2px;
}

.cls-search-table__pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tn-space-sm); }
.cls-search-table__range { font-size: var(--tn-text-sm); color: var(--tn-color-text-muted); font-variant-numeric: tabular-nums; }
.cls-search-table__page-btn {
  appearance: none; min-height: var(--tn-size-control); min-width: 112px; margin: 0; padding: 0 var(--tn-space-md);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tn-space-xxs);
  cursor: pointer; font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text);
  background: var(--tn-color-surface-raised);
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md);
}
.cls-search-table__page-btn:hover:not([disabled]) { background: var(--tn-color-accent-soft); border-color: var(--tn-color-accent); color: var(--tn-color-accent-soft-ink); }
.cls-search-table__page-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.cls-search-table__page-btn:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }

/* PHONE: EACH ROW A CARD — the asset and its action on the first line, then
   the colour and the status. The other columns drop out; the details panel
   one tap away has every one of them. */
@media (max-width: 639.98px) {
  .cls-search-table__phone { display: flex; }
  .cls-search-table__tools, .cls-search-table__control { width: 100%; }
  .cls-search-table__input { width: 100%; }
  .cls-search-table__scroll { overflow-x: visible; }
  .cls-search-table__table, .cls-search-table__table tbody { display: block; width: 100%; }
  .cls-search-table__table thead { display: none; }
  .cls-search-table__table tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--tn-space-sm); row-gap: var(--tn-space-xxs);
    align-items: center; padding: var(--tn-space-sm); border-bottom: 1px solid var(--tn-color-border);
  }
  .cls-search-table__table tbody tr:last-child { border-bottom: 0; }
  .cls-search-table__table td { display: block; padding: 0; border: 0; grid-column: 1; }
  .cls-search-table__table td:not([data-card='true']):not([data-col='action']) { display: none; }
  .cls-search-table__table td[data-col='action'] { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .cls-search-table__table tbody tr[data-selected='true'] td:first-child { box-shadow: none; }
  .cls-search-table__table tbody tr[data-selected='true'] { box-shadow: inset 4px 0 0 var(--tn-color-accent); }
  .cls-search-table__table td.cls-search-table__none { display: block; grid-column: 1 / -1; padding: var(--tn-space-md); }
  .cls-search-table__range { order: -1; flex: 1 1 100%; text-align: center; }
  .cls-search-table__page-btn { flex: 1 1 0; }
}


@media (prefers-reduced-motion: reduce) {
  .cls-search__option, .cls-search__clear, .cls-search-table__show, .cls-search-table__page-btn,
  .cls-search-table__table tbody tr { transition: none !important; animation: none !important; }
}

@media (forced-colors: active) {
  .cls-search__field { border: 1px solid CanvasText; }
  .cls-search__field:focus-within { outline: 2px solid Highlight; outline-offset: 1px; }
  .cls-search__popup, .cls-search__note { border: 1px solid CanvasText; }
  .cls-search__option[aria-selected='true'] { outline: 2px solid Highlight; outline-offset: -2px; }
  .cls-search__tag, .cls-search-table__count, .cls-search-table__selected { border: 1px solid CanvasText; }
  .cls-search-table__table tbody tr[data-selected='true'] { outline: 2px solid Highlight; outline-offset: -2px; }
  .cls-search-table__show, .cls-search-table__page-btn { border: 1px solid ButtonText; }
}

/* THE PAPER SAYS WHICH PAGE IT IS. The table shows fifty rows at a time and
   prints only the fifty on screen; with the whole pager hidden, a printed page
   of 50 out of 312 looked like the complete list, and a sheet taken to a
   meeting as "every building that owes rent" would have been a sixth of it. So
   the buttons go — nobody can press them on paper — and "Rows 1–50 of 312"
   stays, in black, at the foot of the table. */
@media print {
  .cls-search, .cls-search-table__tools, .cls-search-table__page-btn, .cls-search-table__action,
  .cls-search-table__action-head, .cls-search-table__sort-icon { display: none !important; }
  .cls-search-table__pager { justify-content: flex-start; }
  .cls-search-table__range { color: #000000; font-size: 9pt; }
  .cls-search-table { break-inside: auto; }
  .cls-search-table__scroll { overflow: visible; border-color: #000000; }
  .cls-search-table__table { font-size: 9pt; }
  .cls-search-table__table thead { display: table-header-group; }
  .cls-search-table__table tr { break-inside: avoid; }
  .cls-search-table__table tbody tr[data-selected='true'] { background: none; }
  .cls-search-table__table th:first-child, .cls-search-table__table td:first-child { position: static; box-shadow: none; }
  .cls-search-table__table th.cls-search-table__action-head, .cls-search-table__table td[data-col='action'] { position: static; }
  .cls-search-table__sort { min-height: 0; }
}


.cls-details {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--tn-color-surface-raised);
  color: var(--tn-color-text);
  border: 1px solid var(--tn-color-border-strong);
  border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-sm);
  font-size: var(--tn-text-sm);
}
.cls-details[data-float='true'] {
  position: absolute; z-index: 3;
  top: var(--cls-details-top, 56px);
  right: var(--cls-details-right, 68px);
  width: 340px;
  max-width: calc(100% - var(--cls-details-right, 68px) - var(--tn-space-sm));
  max-height: var(--cls-details-max, 420px);
  box-shadow: var(--tn-shadow-lg);
}
/* The map's display menu opens exactly where the card floats; while it is open
   the card steps aside rather than covering the menu the reader just opened. */
.cls-stage:has(.cls-frame-display__pop[open]) > .cls-details[data-float='true'] { visibility: hidden; }

.cls-details__head {
  display: flex; align-items: flex-start; gap: var(--tn-space-xs);
  padding: var(--tn-space-sm) var(--tn-space-xs) var(--tn-space-xs) var(--tn-space-md);
  border-bottom: 1px solid var(--tn-color-border);
}
.cls-details__titles { flex: 1 1 auto; min-width: 0; padding-top: var(--tn-space-xxs); }
.cls-details__eyebrow {
  margin: 0; color: var(--tn-color-text-muted);
  font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold);
  letter-spacing: var(--tn-tracking-wide); text-transform: uppercase;
}
.cls-details__title {
  margin: 0; font-size: var(--tn-text-lg); font-weight: var(--tn-weight-bold);
  line-height: var(--tn-leading-tight); overflow-wrap: anywhere;
}
.cls-details__sub { margin: 0; color: var(--tn-color-text-muted); overflow-wrap: anywhere; }
.cls-details__close {
  appearance: none; flex: none; width: var(--tn-size-control); height: var(--tn-size-control); padding: 0;
  display: inline-grid; place-items: center; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--tn-radius-md);
  background: transparent; color: var(--tn-color-text-muted);
}
.cls-details__close:hover { background: var(--tn-color-surface-sunken); color: var(--tn-color-text); }
.cls-details__close:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }

/* The card scrolls inside itself when it floats, so its header — and the close
   button in it — never scrolls away. In the page flow the page scrolls instead. */
.cls-details__scroll {
  display: flex; flex-direction: column; gap: var(--tn-space-sm);
  padding: var(--tn-space-sm) var(--tn-space-md) var(--tn-space-md);
  min-height: 0;
}
.cls-details[data-float='true'] .cls-details__scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }

.cls-details__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tn-space-xs); }
.cls-details__chip {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--tn-space-xs);
  border: 1px solid var(--tn-color-border-strong); border-radius: var(--tn-radius-pill);
  font-size: var(--tn-text-xs); font-weight: var(--tn-weight-medium); color: var(--tn-color-text-muted);
}

/* The active classifier's answer for this element: which colour, and why. */
.cls-details__bucket {
  display: grid; gap: 2px; padding: var(--tn-space-xs) var(--tn-space-sm);
  border-radius: var(--tn-radius-md); background: var(--tn-color-surface-sunken);
}
.cls-details__bucket-by { font-size: var(--tn-text-xs); color: var(--tn-color-text-muted); }
.cls-details__bucket-value { display: inline-flex; align-items: center; gap: var(--tn-space-xs); font-weight: var(--tn-weight-semibold); }
.cls-details__bucket-value svg { flex: none; }
.cls-details__bucket-from { font-size: var(--tn-text-xs); color: var(--tn-color-text-muted); overflow-wrap: anywhere; }
.cls-details__summary { margin: 0; color: var(--tn-color-text-muted); }

.cls-details__muted { margin: 0; color: var(--tn-color-text-muted); font-size: var(--tn-text-sm); }
.cls-details__status { display: block; }
.cls-details__lead { margin: 0; }
.cls-details__fresh { margin: 0; color: var(--tn-color-text-faint); font-size: var(--tn-text-xs); }

/* Actions: every one a 44px target whatever the pointer, wrapping into rows. */
.cls-details-actions { display: flex; flex-direction: column; gap: var(--tn-space-xs); }
.cls-details-actions__row { display: flex; flex-wrap: wrap; gap: var(--tn-space-xs); }
.tn-btn.cls-details-actions__btn { min-height: var(--tn-size-touch); flex: 0 1 auto; }
.cls-details-actions__status { display: block; color: var(--tn-color-status-approved-ink); font-size: var(--tn-text-xs); }
.cls-details-actions__status:empty { display: none; }
.cls-details-actions__manual { display: flex; flex-direction: column; gap: var(--tn-space-xxs); }
.cls-details-actions__manual-label { font-size: var(--tn-text-xs); color: var(--tn-color-text-muted); }
.cls-details-actions__manual-input {
  width: 100%; min-height: var(--tn-size-control); padding: 0 var(--tn-space-sm);
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-sm);
  background: var(--tn-color-surface); color: var(--tn-color-text);
  font-family: var(--tn-font-mono); font-size: var(--tn-text-xs);
}
.cls-details-actions__manual-input:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 1px; }

/* The QR code: white all round, because a scanner needs the quiet zone and the
   card's grey would eat into it. */
.cls-details-qr {
  display: flex; flex-direction: column; align-items: center; gap: var(--tn-space-xs);
  padding: var(--tn-space-sm);
  border: 1px dashed var(--tn-color-border-strong); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised);
}
.cls-details-qr[hidden] { display: none; }
.cls-details-qr__code { display: block; width: 184px; height: 184px; max-width: 100%; }
.cls-details-qr__caption { margin: 0; font-size: var(--tn-text-xs); color: var(--tn-color-text-muted); text-align: center; }


.cls-details-body { display: flex; flex-direction: column; gap: var(--tn-space-sm); min-width: 0; }
.cls-details-tabs {
  display: flex; border-bottom: 1px solid var(--tn-color-border);
  margin: 0 calc(var(--tn-space-md) * -1); padding: 0 var(--tn-space-xs);
  overflow-x: auto; scrollbar-width: thin;
}
.cls-details-tabs__tab {
  appearance: none; flex: 1 1 auto; min-height: var(--tn-size-control); padding: 0 var(--tn-space-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tn-space-xxs);
  border: 0; border-bottom: 3px solid transparent; background: transparent; cursor: pointer;
  font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text-muted);
  white-space: nowrap;
}
.cls-details-tabs__tab[aria-selected='true'] { color: var(--tn-color-text); border-bottom-color: var(--tn-color-accent); }
.cls-details-tabs__tab:hover:not([aria-selected='true']) { color: var(--tn-color-text); background: var(--tn-color-surface-sunken); }
.cls-details-tabs__tab:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
.cls-details-tabs__count {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--tn-radius-pill);
  background: var(--tn-color-surface-sunken); color: var(--tn-color-text-muted);
  font-size: var(--tn-text-xs); line-height: var(--tn-leading-snug); font-variant-numeric: tabular-nums; text-align: center;
}
.cls-details-tabs__tab[aria-selected='true'] .cls-details-tabs__count { background: var(--tn-color-accent-soft); color: var(--tn-color-accent-soft-ink); }
.cls-details-tabpanel { display: flex; flex-direction: column; gap: var(--tn-space-sm); min-width: 0; border-radius: var(--tn-radius-sm); }
.cls-details-tabpanel:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }

/* A field list: the question on the left, the answer on the right, a hairline
   between rows so a long list can be read across without a ruler. */
.cls-details-fields { display: flex; flex-direction: column; gap: var(--tn-space-md); min-width: 0; }
.cls-details-fields__group { min-width: 0; }
.cls-details-fields__title {
  margin: 0 0 var(--tn-space-xxs); color: var(--tn-color-text-muted);
  font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold);
  letter-spacing: var(--tn-tracking-wide); text-transform: uppercase;
}
.cls-details-fields__list { margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
.cls-details-fields__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--tn-space-xs);
  padding: var(--tn-space-xxs) 0; border-bottom: 1px solid var(--tn-color-border);
}
.cls-details-fields__row:last-child { border-bottom: 0; }
.cls-details-fields__label { color: var(--tn-color-text-muted); overflow-wrap: anywhere; }
.cls-details-fields__value {
  margin: 0; font-weight: var(--tn-weight-medium); overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.cls-details-fields__row[data-blank='true'] .cls-details-fields__value { color: var(--tn-color-text-faint); font-weight: var(--tn-weight-regular); }
.cls-details-fields__row[data-mixed='true'] .cls-details-fields__value { color: var(--tn-color-text-muted); font-style: italic; }
.cls-details-identity { padding-bottom: var(--tn-space-xs); border-bottom: 2px solid var(--tn-color-border); }

/* Which unit of a block the Details and Tenancy tabs are showing. */
.cls-details-units { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tn-space-xxs); }
.cls-details-units__label { margin-right: var(--tn-space-xxs); font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text-muted); }
.cls-details-units__btn {
  appearance: none; min-width: var(--tn-size-control); min-height: var(--tn-size-control); padding: 0 var(--tn-space-sm); cursor: pointer;
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised); color: var(--tn-color-text);
  font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); font-variant-numeric: tabular-nums;
}
.cls-details-units__btn:hover:not([aria-pressed='true']) { background: var(--tn-color-surface-sunken); }
.cls-details-units__btn[aria-pressed='true'] { background: var(--tn-color-action); border-color: var(--tn-color-action); color: var(--tn-color-action-ink); }
.cls-details-units__btn:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }

/* The survey records of a footprint, one card each. */
.cls-details-unitlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tn-space-sm); }
.cls-details-unit {
  display: flex; flex-direction: column; gap: var(--tn-space-xs); padding: var(--tn-space-sm);
  border: 1px solid var(--tn-color-border); border-radius: var(--tn-radius-md);
}
.cls-details-unit__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tn-space-xs); }
.cls-details-unit__title { margin: 0; font-size: var(--tn-text-base); font-weight: var(--tn-weight-semibold); }
.cls-details-stamps { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.cls-details-stamps__row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--tn-space-xs); }
.cls-details-stamps__row dt { color: var(--tn-color-text-muted); }
.cls-details-stamps__row dd { margin: 0; overflow-wrap: anywhere; }

/* Photographs: two across in the card, each a link to the full image. */
.cls-details-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tn-space-xs); }
@media (max-width: 899.98px) { .cls-details[data-float='false'] .cls-details-photos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }
.cls-details-photos__item { min-width: 0; }
.cls-details-photos__link {
  display: flex; flex-direction: column; gap: 2px; min-height: var(--tn-size-control);
  color: var(--tn-color-text); text-decoration: none; border-radius: var(--tn-radius-sm);
}
.cls-details-photos__link:hover .cls-details-photos__img { border-color: var(--tn-color-accent); }
.cls-details-photos__link:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }
.cls-details-photos__img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--tn-color-border); border-radius: var(--tn-radius-sm);
  background: var(--tn-color-surface-sunken);
}
.cls-details-photos__caption { font-size: var(--tn-text-xs); color: var(--tn-color-text-muted); }

/* Arrears, said in a sentence and marked in the status colours: amber when
   something is owed, green when nothing is. The words carry it either way. */
.cls-details-arrears {
  margin: 0; padding: var(--tn-space-xs) var(--tn-space-sm); border-radius: var(--tn-radius-md);
  font-weight: var(--tn-weight-semibold);
  background: var(--tn-color-status-pending-soft); color: var(--tn-color-status-pending-ink);
  border-left: 3px solid var(--tn-color-status-pending);
}
.cls-details-arrears[data-due='none'] {
  background: var(--tn-color-status-approved-soft); color: var(--tn-color-status-approved-ink);
  border-left-color: var(--tn-color-status-approved);
}

/* The read's own states. */
.cls-details-reading { display: flex; flex-direction: column; gap: var(--tn-space-xs); }
.cls-details-failure {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--tn-space-xxs);
  padding: var(--tn-space-sm); border-radius: var(--tn-radius-md);
  border: 1px solid var(--tn-color-border-strong); border-left-width: 4px;
}
.cls-details-failure p { margin: 0; }
.cls-details-failure[data-tone='error'] { border-color: var(--tn-color-danger); background: var(--tn-color-danger-soft); color: var(--tn-color-danger-soft-ink); }
.cls-details-failure[data-tone='info'] { border-left-color: var(--tn-color-accent); background: var(--tn-color-surface-sunken); }
.cls-details-failure__title { margin: 0; font-weight: var(--tn-weight-semibold); }


.cls-details-sheet { display: flex; flex-direction: column; gap: var(--tn-space-lg); min-width: 0; page: cls-details-sheet; }
.cls-details-sheet__band { display: grid; gap: var(--tn-space-lg); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 640px) { .cls-details-sheet__band { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cls-details-sheet__band { grid-template-columns: 292px minmax(0, 1fr) 220px; } }
.cls-details-sheet__card {
  margin: 0; min-width: 0;
  display: flex; flex-direction: column; gap: var(--tn-space-sm);
  padding: var(--tn-space-md);
  background: var(--tn-color-surface-raised);
  border: 1px solid var(--tn-color-border-strong);
  border-radius: var(--tn-radius-lg);
}
.cls-details-sheet__title { margin: 0; font-size: var(--tn-text-md); font-weight: var(--tn-weight-semibold); }
.cls-details-sheet__caption { font-size: var(--tn-text-xs); color: var(--tn-color-text-muted); overflow-wrap: anywhere; }
.cls-details-sheet__plan { align-items: center; }
.cls-details-sheet__status { display: flex; }
.cls-details-sheet__qr { align-items: center; text-align: center; }
.cls-details-sheet__qr-code { display: block; width: 148px; height: 148px; }
.cls-details-sheet__qr-wait { display: block; width: 148px; height: 148px; background: var(--tn-color-surface-sunken); border-radius: var(--tn-radius-sm); }
.cls-details-sheet__link { font-family: var(--tn-font-mono); font-size: var(--tn-text-xs); color: var(--tn-color-text-muted); overflow-wrap: anywhere; word-break: break-all; }
/* PRINT IS VIOLET, wherever it is: Home's details panel, the 3D view's Asset
   sheet and this sheet's own button. White on #7c3fae is 6.61:1; on the hover
   #59277f, 10.39:1. */
.tn-btn.cls-details-sheet__print {
  background: var(--tn-color-status-rejected); border-color: var(--tn-color-status-rejected); color: var(--tn-color-header-ink);
}
.tn-btn.cls-details-sheet__print:hover, .tn-btn.cls-details-sheet__print:active {
  background: var(--tn-color-status-rejected-ink); border-color: var(--tn-color-status-rejected-ink); color: var(--tn-color-header-ink);
}
.cls-details-sheet__unit-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tn-space-xs); }
.cls-details-sheet__occupier { display: flex; flex-direction: column; gap: var(--tn-space-xxs); }
.cls-details-sheet__photo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tn-space-sm); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .cls-details-sheet__photo-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cls-details-sheet__photo { display: flex; flex-direction: column; gap: var(--tn-space-xxs); min-width: 0; }
.cls-details-sheet__photo-img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--tn-color-border); border-radius: var(--tn-radius-sm);
  background: var(--tn-color-surface-sunken);
}
.cls-details-sheet__foot { margin: 0; font-size: var(--tn-text-xs); color: var(--tn-color-text-faint); }

/* The sheet's field groups flow in columns on a wide screen and on paper. */
@media (min-width: 900px) {
  .cls-details-fields[data-layout='columns'] { display: block; columns: 2; column-gap: var(--tn-space-xl); }
  .cls-details-fields[data-layout='columns'] .cls-details-fields__group { break-inside: avoid; margin-bottom: var(--tn-space-md); }
}

/* The site plan: ground, neighbours faint, this building in the accent. Decoration
   and position, not data, so the tokens can carry it. */
.cls-details-plan { display: block; width: 100%; max-width: 260px; height: auto; border-radius: var(--tn-radius-sm); }
.cls-details-plan__ground { fill: var(--tn-color-surface-sunken); }
.cls-details-plan__other { fill: var(--tn-color-surface-raised); stroke: var(--tn-color-text-faint); stroke-width: 1; }
.cls-details-plan__self { fill: var(--tn-color-accent-soft); stroke: var(--tn-color-accent); stroke-width: 2.5; stroke-linejoin: round; }
.cls-details-plan__north-head { fill: var(--tn-color-text); }
.cls-details-plan__bar { fill: none; stroke: var(--tn-color-text); stroke-width: 2; }
/* 12.2px, not the 12px of --tn-text-xs: the plan is drawn at its own size and
   scaled to its column, and a column a few pixels narrower took "N" and the
   scale bar's "5 m" to 11.9px, under the platform's 12px floor. */
.cls-details-plan__text { fill: var(--tn-color-text); font-family: var(--tn-font-sans); font-size: 12.2px; font-weight: var(--tn-weight-semibold); }


@media (prefers-reduced-motion: reduce) {
  .cls-details *, .cls-details-sheet * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .cls-details, .cls-details-unit, .cls-details-qr, .cls-details-failure, .cls-details-sheet__card { border: 1px solid CanvasText; }
  .cls-details-tabs__tab[aria-selected='true'] { border-bottom-color: Highlight; }
  .cls-details-units__btn[aria-pressed='true'] { border: 2px solid Highlight; }
  .cls-details-plan__self { stroke: Highlight; }
  .cls-details-plan__other, .cls-details-plan__bar { stroke: CanvasText; }
  .cls-details-plan__north-head, .cls-details-plan__text { fill: CanvasText; }
  /* The QR code keeps its own two colours: a scanner needs them, whatever the theme. */
  .cls-details-qr__code, .cls-details-sheet__qr-code { forced-color-adjust: none; }
}

@page cls-details-sheet { size: A4 portrait; margin: 12mm; }

@media print {
  /* The map's printout with a selection: the card prints under the map as a
     plain block with the tab that was open; the controls do not print. */
  .cls-details[data-float='true'] { position: static; width: auto; max-width: none; max-height: none; box-shadow: none; }
  .cls-details { border-color: #000000; break-inside: avoid; }
  .cls-details[data-float='true'] .cls-details__scroll { overflow: visible; }
  .cls-details__close, .cls-details-actions, .cls-details-tabs, .cls-details-units__btn[aria-pressed='false'] { display: none !important; }
  .cls-details-units__label { display: none; }

  /* The sheet: one A4 page for a single-record building, dense but legible. */
  .cls-details-sheet-page { gap: 4mm; }
  .cls-details-sheet-page .tn-page-header__description { display: none; }
  .cls-details-sheet { gap: 4mm; font-size: 8.5pt; line-height: var(--tn-leading-snug); }
  .cls-details-sheet__band { grid-template-columns: 64mm minmax(0, 1fr) 44mm; gap: 4mm; }
  .cls-details-sheet__card { padding: 3mm; gap: 2mm; border-color: #000000; border-radius: 2mm; break-inside: avoid; }
  .cls-details-sheet__unit { break-inside: auto; }
  .cls-details-sheet__title { font-size: 10pt; }
  .cls-details-plan { max-width: 60mm; }
  .cls-details-sheet__qr-code, .cls-details-sheet__qr-wait { width: 34mm; height: 34mm; }
  .cls-details-sheet .cls-details-fields[data-layout='columns'] { display: block; columns: 2; column-gap: 6mm; }
  .cls-details-sheet .cls-details-fields__group { break-inside: avoid; margin-bottom: 2mm; }
  .cls-details-sheet .cls-details-fields__row { padding: 0.4mm 0; border-bottom-color: #bbbbbb; }
  .cls-details-sheet .cls-details-fields__title { font-size: 7.5pt; margin-bottom: 0.5mm; }
  .cls-details-sheet__photo-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3mm; }
  .cls-details-sheet__photo-img { max-height: 30mm; }
  .cls-details-sheet__link { font-size: 6.5pt; }
  .cls-details-sheet__caption, .cls-details-sheet__foot { font-size: 7pt; }
  .cls-details-sheet__qr-code, .cls-details-plan, .cls-details-sheet__photo-img { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}


.cls-tl {
  border: 1px solid var(--tn-color-border);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-color-surface-raised);
  min-width: 0;
}
.cls-tl[data-historic='true'] { border-color: var(--tn-color-warning); box-shadow: inset 4px 0 0 var(--tn-color-warning); }
.cls-tl__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--tn-space-xs);
  padding-right: var(--tn-space-xs);
}
.cls-tl__toggle {
  appearance: none; flex: 1 1 auto; display: inline-flex; align-items: center; gap: var(--tn-space-xs);
  min-height: var(--tn-size-touch); margin: 0; padding: 0 var(--tn-space-md);
  border: 0; border-radius: var(--tn-radius-lg); background: transparent; cursor: pointer;
  font: inherit; font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold);
  color: var(--tn-color-text); text-align: left;
}
.cls-tl__toggle:hover .cls-tl__title { text-decoration: underline; text-underline-offset: 3px; }
.cls-tl__toggle:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
.cls-tl__chevron {
  flex: none; width: 8px; height: 8px; margin: 0 var(--tn-space-xxs) 0 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--tn-duration-fast) var(--tn-easing-standard);
}
.cls-tl__toggle[aria-expanded='true'] .cls-tl__chevron { transform: rotate(45deg); margin-top: -4px; }
.cls-tl__state {
  flex: none; padding: 2px var(--tn-space-sm); border-radius: var(--tn-radius-pill);
  font-size: var(--tn-text-xs); font-weight: var(--tn-weight-medium);
  background: var(--tn-color-neutral-soft); color: var(--tn-color-neutral-soft-ink);
}
.cls-tl__state[data-historic='true'] { background: var(--tn-color-warning-soft); color: var(--tn-color-warning-soft-ink); }


.cls-tl__body { padding: 0 var(--tn-space-md) var(--tn-space-md); }
.cls-tl__body[hidden] { display: none; }
.cls-tl__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--tn-space-xxs) var(--tn-space-md); margin-bottom: var(--tn-space-xs);
}
.cls-tl__when {
  margin: 0; font-size: var(--tn-text-base); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text);
  font-variant-numeric: tabular-nums;
}
.cls-tl__count { margin: 0; font-size: var(--tn-text-xs); color: var(--tn-color-text-muted); font-variant-numeric: tabular-nums; }

.cls-tl__track { --cls-tl-thumb: 24px; position: relative; display: grid; }
.cls-tl__hist {
  height: 44px; overflow: hidden;
  padding: 0 calc(var(--cls-tl-thumb) / 2);
  border-bottom: 1px solid var(--tn-color-border);
}
.cls-tl__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cls-tl__col { fill: var(--tn-color-action); transition: fill var(--tn-duration-fast) linear; }
.cls-tl__col[data-after='true'] { fill: var(--tn-color-border-strong); }

.cls-tl__range {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: var(--tn-size-touch); margin: 0; padding: 0;
  background: transparent; cursor: pointer;
}
.cls-tl__range:focus { outline: none; }
.cls-tl__range:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; border-radius: var(--tn-radius-sm); }
.cls-tl__range::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--tn-radius-pill);
  background: linear-gradient(to right, var(--tn-color-action) var(--cls-tl-fill, 0%), var(--tn-color-border-strong) var(--cls-tl-fill, 0%));
}
.cls-tl__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--cls-tl-thumb); height: var(--cls-tl-thumb); margin-top: -9px;
  border-radius: 50%; border: 3px solid var(--tn-color-surface-raised);
  background: var(--tn-color-action); box-shadow: 0 0 0 1px var(--tn-color-action), var(--tn-shadow-sm);
}
.cls-tl__range::-moz-range-track {
  height: 6px; border-radius: var(--tn-radius-pill);
  background: linear-gradient(to right, var(--tn-color-action) var(--cls-tl-fill, 0%), var(--tn-color-border-strong) var(--cls-tl-fill, 0%));
}
.cls-tl__range::-moz-range-thumb {
  box-sizing: border-box; width: var(--cls-tl-thumb); height: var(--cls-tl-thumb);
  border-radius: 50%; border: 3px solid var(--tn-color-surface-raised);
  background: var(--tn-color-action); box-shadow: 0 0 0 1px var(--tn-color-action);
}

.cls-tl__scale {
  display: flex; justify-content: space-between; gap: var(--tn-space-sm);
  font-size: var(--tn-text-xs); color: var(--tn-color-text-muted);
}


.cls-tl__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tn-space-xs); margin-top: var(--tn-space-sm); }
.cls-tl__btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--tn-space-xs);
  min-width: var(--tn-size-touch); min-height: var(--tn-size-touch); margin: 0; padding: 0 var(--tn-space-sm);
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised); color: var(--tn-color-text);
  font: inherit; font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); cursor: pointer;
}
.cls-tl__btn span[aria-hidden='true'] { font-size: var(--tn-text-lg); line-height: 1; }
.cls-tl__btn:hover:not(:disabled) { background: var(--tn-color-surface-sunken); }
.cls-tl__btn:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }
.cls-tl__btn:disabled { cursor: default; color: var(--tn-color-text-faint); border-color: var(--tn-color-border); }
.cls-tl__btn--play { min-width: 104px; }
.cls-tl__btn--play .cls-tl__glyph {
  width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent currentColor;
}
.cls-tl__btn--play[data-playing='true'] .cls-tl__glyph {
  width: 12px; height: 14px; border: 0; border-left: 4px solid currentColor; border-right: 4px solid currentColor;
}
.cls-tl__btn--now { margin-left: auto; }
.cls-tl__btn--quiet { min-height: var(--tn-size-control-compact); border-color: transparent; background: transparent; color: var(--tn-color-accent); }
.cls-tl__btn--quiet:hover:not(:disabled) { background: var(--tn-color-accent-soft); }

.cls-tl__caveat {
  margin: var(--tn-space-sm) 0 0; padding: var(--tn-space-xs) var(--tn-space-sm);
  border-left: 3px solid var(--tn-color-warning); background: var(--tn-color-warning-soft);
  color: var(--tn-color-warning-soft-ink); font-size: var(--tn-text-xs); line-height: var(--tn-leading-normal);
  border-radius: 0 var(--tn-radius-sm) var(--tn-radius-sm) 0;
}
.cls-tl__empty { margin: 0; font-size: var(--tn-text-sm); color: var(--tn-color-text-muted); }

@media (max-width: 639.98px) {
  .cls-tl__body { padding: 0 var(--tn-space-sm) var(--tn-space-sm); }
  .cls-tl__toggle { padding: 0 var(--tn-space-sm); }
  .cls-tl__btn--now { margin-left: 0; }
  .cls-tl__btn--quiet { min-height: var(--tn-size-touch); }
}
/* AND UNDER ANY FINGER, whatever the width. The width query above misses the
   8-10in tablets the field staff carry, which report 800-1280px and got a 36px
   "Back to now" — the one way out of a historical view without unfolding the
   bar. pointer: coarse is false for a mouse at any size, so nothing on a desk
   grows; it is the same test the shared small button uses (@tn/ui). */
@media (pointer: coarse) {
  .cls-tl__btn--quiet { min-height: var(--tn-size-touch); }
}


@media (prefers-reduced-motion: reduce) {
  .cls-tl__chevron, .cls-tl__col { transition: none; }
}

@media (forced-colors: active) {
  .cls-tl, .cls-tl__btn { border: 1px solid CanvasText; }
  .cls-tl[data-historic='true'] { border: 2px solid Highlight; box-shadow: none; }
  .cls-tl__state { border: 1px solid CanvasText; }
  .cls-tl__col { fill: CanvasText; }
  .cls-tl__col[data-after='true'] { fill: GrayText; }
  .cls-tl__range::-webkit-slider-runnable-track { background: CanvasText; }
  .cls-tl__range::-webkit-slider-thumb { background: Highlight; border-color: Canvas; }
  .cls-tl__caveat { border: 1px solid CanvasText; }
}

@media print {
  .cls-tl { border-color: #000000; box-shadow: none; break-inside: avoid; }
  .cls-tl__chevron, .cls-tl__controls, .cls-tl__range, .cls-tl__btn--quiet { display: none !important; }
  .cls-tl__toggle { min-height: 0; padding: var(--tn-space-xs) var(--tn-space-sm); }
  .cls-tl__body[hidden] { display: none; }
  .cls-tl__caveat { background: none; border-left: 2pt solid #000000; color: #000000; }
  .cls-tl__col { fill: #000000; }
  .cls-tl__col[data-after='true'] { fill: #bbbbbb; }
}


.cls-threed {
  position: relative;
  height: 56vh;
  height: min(56dvh, 420px);
  min-height: 280px;
  border: 1px solid var(--tn-color-border-strong);
  border-radius: var(--tn-radius-lg);
  overflow: hidden;
  background: var(--tn-color-surface-sunken);
  box-shadow: var(--tn-shadow-sm);
  isolation: isolate;
}
@media (min-width: 640px) {
  .cls-threed { height: 62vh; height: min(62dvh, 620px); min-height: 380px; }
}
@media (min-width: 1024px) {
  .cls-threed { height: 66vh; height: min(66dvh, 760px); }
}
/* TWO CLASSES, NOT ONE, ON PURPOSE. maplibre-gl.css sets
   ".maplibregl-map { position: relative }" on this same element and arrives
   AFTER this sheet, so a one-class rule lost the tie: the map box collapsed to
   0px tall, MapLibre drew into a canvas nobody could see, and the 3D view was an
   empty frame (measured 26 Sep 2026). */
.cls-threed .cls-threed__map { position: absolute; inset: 0; }
.cls-threed .cls-threed__map .maplibregl-canvas { outline: none; }
.cls-threed .cls-threed__map .maplibregl-canvas:focus-visible {
  outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px;
}

/* A hand over something a tap would open; the closed hand while dragging wins. */
.cls-threed .cls-threed__map[data-pick='true'] .maplibregl-canvas-container.maplibregl-interactive { cursor: pointer; }
.cls-threed .cls-threed__map .maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; }

/* The navigation control: MapLibre draws 29 px buttons; this site's floor is 44. */
.cls-threed .maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0 var(--tn-space-sm) var(--tn-space-sm) 0; }
.cls-threed .maplibregl-ctrl-group {
  border-radius: var(--tn-radius-md);
  box-shadow: var(--tn-shadow-md);
  border: 1px solid var(--tn-color-border-strong);
  background: var(--tn-color-surface-raised);
}
.cls-threed .maplibregl-ctrl-group button {
  width: var(--tn-size-touch); height: var(--tn-size-touch);
}
.cls-threed .maplibregl-ctrl-group button:focus-visible {
  box-shadow: none; outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px;
}
.cls-threed .maplibregl-ctrl-group button + button { border-top: 1px solid var(--tn-color-border); }


.cls-threed__btn {
  appearance: none; display: inline-flex; align-items: center; gap: var(--tn-space-xs);
  min-height: var(--tn-size-touch); min-width: var(--tn-size-touch);
  padding: 0 var(--tn-space-sm); margin: 0;
  border: 1px solid var(--tn-color-border-strong); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised); color: var(--tn-color-text);
  font: inherit; font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold);
  cursor: pointer; box-shadow: var(--tn-shadow-md);
}
.cls-threed__btn:hover { background: var(--tn-color-surface-sunken); }
.cls-threed__btn:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }
.cls-threed__btn:disabled { cursor: default; color: var(--tn-color-text-faint); box-shadow: none; }

.cls-threed__reset { position: absolute; z-index: 3; top: var(--tn-space-sm); right: var(--tn-space-sm); }

.cls-threed__key {
  position: absolute; z-index: 3; top: var(--tn-space-sm); left: var(--tn-space-sm);
  display: flex; flex-direction: column; min-width: 0;
  max-width: min(320px, calc(100% - 150px));
  max-height: calc(100% - 132px);
}
.cls-threed__key-toggle { max-width: 100%; justify-content: flex-start; }
.cls-threed__key[data-open='true'] .cls-threed__key-toggle {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none;
}
.cls-threed__key-label { flex: none; }
.cls-threed__key-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: var(--tn-weight-regular); color: var(--tn-color-text-muted);
}
.cls-threed__chevron {
  flex: none; width: 8px; height: 8px; margin: 0 var(--tn-space-xxs) 3px auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--tn-duration-fast) var(--tn-easing-standard);
}
.cls-threed__key[data-open='true'] .cls-threed__chevron { transform: rotate(-135deg); margin-bottom: -3px; }
.cls-threed__key-body {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--tn-space-xs) var(--tn-space-sm);
  background: var(--tn-color-surface-raised);
  border: 1px solid var(--tn-color-border-strong); border-top: 0;
  border-radius: 0 0 var(--tn-radius-md) var(--tn-radius-md);
  box-shadow: var(--tn-shadow-md);
}
.cls-threed__key-body[hidden] { display: none; }
.cls-threed__key-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cls-threed__key-row {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center;
  column-gap: var(--tn-space-xs); min-height: 24px;
  font-size: var(--tn-text-xs); line-height: var(--tn-leading-snug); color: var(--tn-color-text);
}
.cls-threed__swatch { display: block; }
.cls-threed__key-text { overflow-wrap: anywhere; }
.cls-threed__key-n { font-variant-numeric: tabular-nums; color: var(--tn-color-text-muted); }
.cls-threed__key-empty, .cls-threed__key-foot {
  margin: 0; font-size: var(--tn-text-xs); line-height: var(--tn-leading-snug); color: var(--tn-color-text-muted);
}
.cls-threed__key-foot { margin-top: var(--tn-space-xs); padding-top: var(--tn-space-xs); border-top: 1px solid var(--tn-color-border); }

.cls-threed__note {
  position: absolute; z-index: 3; left: var(--tn-space-sm); bottom: var(--tn-space-sm);
  right: calc(var(--tn-size-touch) + 2 * var(--tn-space-sm) + var(--tn-space-xs));
  /* fit-content, not max-content: it keeps to the room the left and right
     insets leave, so on a phone the credit line and the notes wrap inside the
     frame instead of running past its edge. */
  max-width: 560px; width: fit-content;
  padding: var(--tn-space-xxs) var(--tn-space-xs);
  background: var(--tn-color-surface-raised); color: var(--tn-color-text-muted);
  border: 1px solid var(--tn-color-border); border-radius: var(--tn-radius-sm);
  font-size: var(--tn-text-xs); line-height: var(--tn-leading-snug);
}
.cls-threed__note p { margin: 0; }
/* warning-SOFT-ink: warning-ink is the white for text on a filled warning
   badge, and this note is on the white of the note box, so the one sentence
   that says why the ground is plain was white on white. */
.cls-threed__note-warn { color: var(--tn-color-warning-soft-ink); font-weight: var(--tn-weight-medium); }
@media (max-width: 639.98px) {
  .cls-threed__key { max-width: calc(100% - 128px); max-height: calc(100% - 150px); }
  .cls-threed__reset { padding: 0 var(--tn-space-xs); }
}

.cls-threed__status {
  position: absolute; z-index: 3; inset: 0; display: grid; place-content: center;
  margin: 0; font-size: var(--tn-text-sm); color: var(--tn-color-text-muted); pointer-events: none;
}

.cls-threed__fail {
  position: absolute; z-index: 4; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--tn-space-sm);
  padding: var(--tn-space-lg); text-align: center; background: var(--tn-color-surface-sunken);
}
.cls-threed__fail-title {
  margin: 0; font-size: var(--tn-text-md); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text);
}
.cls-threed__fail-body {
  margin: 0; max-width: 52ch; font-size: var(--tn-text-sm); line-height: var(--tn-leading-relaxed);
  color: var(--tn-color-text-muted);
}
.cls-threed__fail-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tn-space-xs); }


@media (prefers-reduced-motion: reduce) {
  .cls-threed__chevron { transition: none; }
}

@media (forced-colors: active) {
  .cls-threed { border: 1px solid CanvasText; }
  .cls-threed__btn, .cls-threed__key-body, .cls-threed__note { border: 1px solid CanvasText; }
  .cls-threed__btn:focus-visible { outline: 2px solid Highlight; }
  .cls-threed .maplibregl-ctrl-group { border: 1px solid ButtonText; }
  .cls-threed__swatch rect { forced-color-adjust: none; }
  .cls-threed__swatch { forced-color-adjust: none; }
}

@media print {
  .cls-threed { height: 460px; min-height: 0; box-shadow: none; break-inside: avoid; }
  .cls-threed__reset, .cls-threed__key-toggle, .cls-threed .maplibregl-ctrl { display: none !important; }
  .cls-threed__key-body, .cls-threed__note { box-shadow: none; border-color: #000000; }
  .cls-threed__key-body { border-top: 1px solid #000000; border-radius: var(--tn-radius-md); }
}


.cls-basemap { border: 0; margin: 0; padding: 0; min-width: 0; }
.cls-basemap__legend {
  padding: 0; margin: 0 0 var(--tn-space-xs);
  font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold);
  letter-spacing: var(--tn-tracking-wide); text-transform: uppercase; color: var(--tn-color-text-muted);
}
.cls-basemap__opts { display: flex; flex-direction: column; gap: var(--tn-space-xxs); min-width: 0; }
.cls-basemap__opt {
  display: flex; align-items: center; gap: var(--tn-space-xs);
  min-height: var(--tn-size-touch); min-width: 0;
  padding: var(--tn-space-xxs) var(--tn-space-sm);
  border: 1px solid var(--tn-color-border); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised); color: var(--tn-color-text);
  font-size: var(--tn-text-sm); line-height: var(--tn-leading-snug);
  cursor: pointer;
}
.cls-basemap__opt:hover { background: var(--tn-color-surface-sunken); }
.cls-basemap__opt:has(.cls-basemap__input:checked) {
  border-color: var(--tn-color-accent); background: var(--tn-color-accent-soft);
  font-weight: var(--tn-weight-semibold);
}
.cls-basemap__opt:has(.cls-basemap__input:focus-visible) {
  outline: 3px solid var(--tn-color-focus-ring); outline-offset: 1px;
}
.cls-basemap__opt[data-available='false'] {
  cursor: not-allowed; background: var(--tn-color-surface-sunken); color: var(--tn-color-text-muted);
}
.cls-basemap__input {
  flex: none; width: 20px; height: 20px; margin: 0;
  accent-color: var(--tn-color-accent); cursor: inherit;
}
.cls-basemap__input:focus-visible { outline: none; }
.cls-basemap__text { display: flex; flex-direction: column; min-width: 0; }
.cls-basemap__name { overflow-wrap: anywhere; }
.cls-basemap__why {
  font-size: var(--tn-text-xs); font-weight: var(--tn-weight-regular);
  color: var(--tn-color-text-muted); overflow-wrap: anywhere;
}

/* In the display menu the legend matches its neighbours ("Shapes", "On the map"). */
.cls-frame-display__pop .cls-basemap__legend {
  margin: 0 0 var(--tn-space-xxs); font-weight: var(--tn-weight-medium);
  letter-spacing: normal; text-transform: none;
}

/* The 3D page's toolbar: the legend beside the options, the options in a row. */
.cls-basemap[data-variant='bar'] { display: flex; align-items: center; gap: var(--tn-space-xs); }
.cls-basemap[data-variant='bar'] .cls-basemap__legend {
  float: left; margin: 0 var(--tn-space-xs) 0 0;
  font-size: var(--tn-text-sm); letter-spacing: normal; text-transform: none; white-space: nowrap;
}
.cls-basemap[data-variant='bar'] .cls-basemap__opts { flex-direction: row; flex-wrap: wrap; }
@media (min-width: 768px) {
  .cls-basemap[data-variant='bar'] .cls-basemap__why { white-space: nowrap; }
}

@media (forced-colors: active) {
  .cls-basemap__opt:has(.cls-basemap__input:checked) { outline: 2px solid Highlight; outline-offset: -2px; }
}
@media print {
  .cls-basemap { display: none; }
}


.cls-frame-attrib {
  position: absolute; z-index: 2; left: 10px; bottom: 5px;
  display: flex; align-items: flex-end; gap: 10px;
  max-width: calc(100% - 20px);
  pointer-events: none;
}
.cls-frame-attrib > * { pointer-events: auto; }
.cls-frame-attrib__logo { display: block; flex: none; width: auto; height: 18px; }
.cls-frame-attrib__text {
  min-width: 0; margin: 0; padding: 1px 6px;
  border-radius: var(--tn-radius-sm);
  background: var(--tn-color-surface-overlay); color: var(--tn-color-text);
  font-size: var(--tn-text-xs); line-height: var(--tn-leading-snug);
}
.cls-frame-attrib__link {
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
  border-radius: 2px;
}
.cls-frame-attrib__link:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 1px; }
.cls-frame-attrib__more {
  display: none; appearance: none; flex: none;
  min-height: 28px; margin: 0; padding: 0 var(--tn-space-xs);
  border: 1px solid var(--tn-color-border-strong); border-radius: var(--tn-radius-sm);
  background: var(--tn-color-surface-overlay); color: var(--tn-color-text);
  font: inherit; font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold); cursor: pointer;
}
.cls-frame-attrib__more:hover { background: var(--tn-color-surface-raised); }
.cls-frame-attrib__more:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 1px; }

/* On the /map frame the credit stops short of the scale bar and the readout,
   bottom-right, and wraps instead of running under them. */
.cls-map__frame[data-attrib='google'] > .cls-frame-attrib,
.cls-map__frame[data-attrib='osm'] > .cls-frame-attrib { max-width: calc(100% - 150px); }
/* "Nothing matches the current filters" spans the bottom edge: it rises over the credit. */
.cls-map__frame[data-attrib='google'] .cls-map__empty,
.cls-map__frame[data-attrib='osm'] .cls-map__empty { bottom: 44px; }

@container cls-frame (max-width: 540px) {
  .cls-frame-attrib[data-compact='true'] .cls-frame-attrib__more { display: inline-flex; align-items: center; }
  .cls-frame-attrib[data-compact='true'] .cls-frame-attrib__text {
    display: none; position: absolute; left: 0; bottom: calc(100% + 6px);
    width: max-content; max-width: calc(100cqw - 20px); padding: 4px 8px;
    border: 1px solid var(--tn-color-border-strong); box-shadow: var(--tn-shadow-md);
    background: var(--tn-color-surface-raised);
  }
  .cls-frame-attrib[data-compact='true'][data-open='true'] .cls-frame-attrib__text { display: block; }
}
/* 40px, not 44: the /map legend sits 46px up, and the button keeps clear of it. */
@media (pointer: coarse) {
  .cls-frame-attrib__more { min-height: var(--tn-size-control); }
}

/* In a light box (the 3D view's note): the light-outline logo, no pill. */
.cls-frame-attrib[data-on='light'] {
  position: static; max-width: none; margin-top: var(--tn-space-xxs);
  flex-wrap: wrap; align-items: center; gap: 4px 10px;
}
.cls-frame-attrib[data-on='light'] .cls-frame-attrib__text { padding: 0; background: none; color: var(--tn-color-text-muted); }

@media (forced-colors: active) {
  .cls-frame-attrib__text, .cls-frame-attrib__more { border: 1px solid CanvasText; }
  .cls-frame-attrib__logo { forced-color-adjust: none; }
}
/* On paper the credit prints in full: it is part of the picture. */
@media print {
  .cls-frame-attrib__more { display: none !important; }
  .cls-frame-attrib .cls-frame-attrib__text {
    display: block !important; position: static !important; box-shadow: none; border: 0;
  }
}


.cls-insights-band { min-width: 0; container: cls-insights-band / inline-size; }
.cls-insights-kpis {
  display: grid; margin: 0; padding: 0; gap: var(--tn-space-sm);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
@container cls-insights-band (max-width: 519.98px) {
  .cls-insights-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container cls-insights-band (min-width: 520px) {
  .cls-insights-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container cls-insights-band (min-width: 960px) {
  .cls-insights-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.cls-insights-kpi {
  --cls-insights-tone: var(--tn-color-action);
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: var(--tn-space-sm) var(--tn-space-md) var(--tn-space-md);
  background: var(--tn-color-surface-raised);
  border: 1px solid var(--tn-color-border-strong);
  border-top: 4px solid var(--cls-insights-tone);
  border-radius: var(--tn-radius-md);
}
.cls-insights-kpi[data-tone='good'] { --cls-insights-tone: var(--tn-color-status-approved); }
.cls-insights-kpi[data-tone='warn'] { --cls-insights-tone: var(--tn-color-status-pending); }
.cls-insights-kpi[data-tone='alert'] { --cls-insights-tone: var(--tn-color-status-unsurveyed); }
.cls-insights-kpi[data-tone='neutral'] { --cls-insights-tone: var(--tn-color-border-control); }
.cls-insights-kpi dd { margin: 0; }
.cls-insights-kpi__label {
  font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold);
  line-height: var(--tn-leading-snug); color: var(--tn-color-text-muted);
}
.cls-insights-kpi__value {
  font-size: var(--tn-text-xl); font-weight: var(--tn-weight-bold);
  line-height: var(--tn-leading-tight); letter-spacing: var(--tn-tracking-tight);
  color: var(--tn-color-text); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.cls-insights-kpi__slash { color: var(--tn-color-text-faint); font-weight: var(--tn-weight-regular); }
.cls-insights-kpi__exact {
  font-size: var(--tn-text-xs); color: var(--tn-color-text-muted); font-variant-numeric: tabular-nums;
}
.cls-insights-kpi__scope {
  font-size: var(--tn-text-xs); line-height: var(--tn-leading-snug); color: var(--tn-color-text-faint);
}
.cls-insights-kpi .cls-insights-kpi__view {
  margin-top: var(--tn-space-xxs); padding-top: var(--tn-space-xxs);
  border-top: 1px dashed var(--tn-color-border-strong);
  font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold);
  line-height: var(--tn-leading-snug); color: var(--tn-color-accent-soft-ink);
}

/* ONCE, WHEN THE FIGURE CHANGES. Two names for one animation: a running
   animation restarts only when its name changes, and the tile flips between
   "a" and "b" on each change (see usePulse). */
.cls-insights-kpi[data-pulse='a'] { animation: cls-insights-flash-a calc(var(--tn-duration-slow) * 3) var(--tn-easing-standard) 1; }
.cls-insights-kpi[data-pulse='b'] { animation: cls-insights-flash-b calc(var(--tn-duration-slow) * 3) var(--tn-easing-standard) 1; }
.cls-insights-kpi[data-pulse='a'] .cls-insights-kpi__value { animation: cls-insights-lift-a var(--tn-duration-slow) var(--tn-easing-standard) 1; }
.cls-insights-kpi[data-pulse='b'] .cls-insights-kpi__value { animation: cls-insights-lift-b var(--tn-duration-slow) var(--tn-easing-standard) 1; }
@keyframes cls-insights-flash-a { from { background: var(--tn-color-accent-soft); } to { background: var(--tn-color-surface-raised); } }
@keyframes cls-insights-flash-b { from { background: var(--tn-color-accent-soft); } to { background: var(--tn-color-surface-raised); } }
@keyframes cls-insights-lift-a { from { transform: translateY(4px); opacity: 0.35; } to { transform: none; opacity: 1; } }
@keyframes cls-insights-lift-b { from { transform: translateY(4px); opacity: 0.35; } to { transform: none; opacity: 1; } }


.cls-insights { min-width: 0; }
.cls-insights__grid {
  display: grid; gap: var(--tn-space-lg);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .cls-insights__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "dist feed" "cov feed" "captures captures" "rent rent";
  }
  .cls-insights__grid[data-rent='false'] {
    grid-template-areas: "dist feed" "cov feed" "captures captures";
  }
  .cls-insights-card[data-area='dist'] { grid-area: dist; }
  .cls-insights-card[data-area='cov'] { grid-area: cov; }
  .cls-insights-card[data-area='feed'] { grid-area: feed; }
  .cls-insights-card[data-area='captures'] { grid-area: captures; }
  .cls-insights-card[data-area='rent'] { grid-area: rent; }
  .cls-insights-card[data-area='feed'] .cls-insights-feed { flex: 1 1 0px; min-height: 420px; max-height: none; }
}

.cls-insights-card {
  display: flex; flex-direction: column; gap: var(--tn-space-md); min-width: 0;
  container: cls-insights-card / inline-size;
  background: var(--tn-color-surface-raised);
  border: 1px solid var(--tn-color-border-strong);
  border-radius: var(--tn-radius-lg);
  padding: var(--tn-space-lg);
}
@media (max-width: 639.98px) { .cls-insights-card { padding: var(--tn-space-md); } }
.cls-insights-card__head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--tn-space-sm);
}
.cls-insights-card__titles {
  flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--tn-space-xxs);
}
.cls-insights-card__title {
  margin: 0; font-size: var(--tn-text-lg); font-weight: var(--tn-weight-semibold);
  line-height: var(--tn-leading-snug); color: var(--tn-color-text); overflow-wrap: anywhere;
}
.cls-insights-card__sub {
  margin: 0; font-size: var(--tn-text-sm); line-height: var(--tn-leading-snug);
  color: var(--tn-color-text-muted); max-width: var(--tn-size-prose-max);
}

.cls-insights-toggle {
  flex: none; display: inline-flex; overflow: hidden;
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised);
}
.cls-insights-toggle__btn {
  appearance: none; border: 0; margin: 0; cursor: pointer;
  min-height: var(--tn-size-touch); min-width: 64px; padding: 0 var(--tn-space-md);
  background: var(--tn-color-surface-raised); color: var(--tn-color-text-muted);
  font: inherit; font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold);
}
.cls-insights-toggle__btn + .cls-insights-toggle__btn { border-left: 1px solid var(--tn-color-border); }
.cls-insights-toggle__btn[aria-pressed='true'] { background: var(--tn-color-action); color: var(--tn-color-action-ink); }
.cls-insights-toggle__btn:hover:not([aria-pressed='true']) { background: var(--tn-color-surface-sunken); color: var(--tn-color-text); }
.cls-insights-toggle__btn:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
/* The pressed half is filled with the button teal and the ring is the page's
   dark blue, 1.41:1 against it, so the inset ring alone did not show. The ring-offset band between them is what
   a keyboard reader actually sees change. */
.cls-insights-toggle__btn[aria-pressed='true']:focus-visible { box-shadow: inset 0 0 0 5px var(--tn-color-focus-ring-offset); }

.cls-insights-view { min-width: 0; }
.cls-insights-swatch { flex: none; display: inline-block; vertical-align: -2px; }

.cls-insights-note {
  margin: 0; font-size: var(--tn-text-sm); line-height: var(--tn-leading-snug);
  color: var(--tn-color-text-muted);
}
.cls-insights-empty {
  margin: 0; padding: var(--tn-space-sm) var(--tn-space-md);
  border-radius: var(--tn-radius-md); background: var(--tn-color-surface-sunken);
  font-size: var(--tn-text-sm); line-height: var(--tn-leading-snug); color: var(--tn-color-text-muted);
}
.cls-insights-empty[data-tone='warning'] {
  background: var(--tn-color-warning-soft); color: var(--tn-color-warning-soft-ink);
  border-left: 3px solid var(--tn-color-status-pending);
}

/* The tables behind the charts borrow @tn/ui's table and trim it: row headers
   are names, not column labels, so they lose the uppercase header treatment. */
.cls-insights-table { font-size: var(--tn-text-sm); }
.cls-insights-table tbody th, .cls-insights-table tfoot th {
  text-transform: none; letter-spacing: normal; white-space: normal;
  font-size: var(--tn-text-sm); font-weight: var(--tn-weight-medium);
  color: var(--tn-color-text); background: transparent;
}
.cls-insights-table .cls-insights-swatch { margin-right: var(--tn-space-xs); }
.cls-insights-table tfoot th, .cls-insights-table tfoot td {
  font-weight: var(--tn-weight-semibold); border-top: 2px solid var(--tn-color-border-strong);
  border-bottom: 0;
}
.cls-insights-table__scroll { max-height: 420px; overflow-y: auto; }
.cls-insights-table__scroll thead th { position: sticky; top: 0; z-index: 1; }

/* Shared key: a swatch, a word, a count and a share, wrapping as a line. */
.cls-insights-key {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--tn-space-xs) var(--tn-space-md);
  font-size: var(--tn-text-sm);
}
.cls-insights-key__item { display: inline-flex; align-items: center; gap: var(--tn-space-xs); }
.cls-insights-key__label { color: var(--tn-color-text); }
.cls-insights-key__count { font-weight: var(--tn-weight-semibold); font-variant-numeric: tabular-nums; }
.cls-insights-key__share { font-weight: var(--tn-weight-regular); color: var(--tn-color-text-faint); }


.cls-insights-dist {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--tn-space-sm);
}
.cls-insights-dist__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: var(--tn-space-xxs) var(--tn-space-sm); font-size: var(--tn-text-sm);
}
.cls-insights-dist__name {
  display: inline-flex; align-items: center; gap: var(--tn-space-xs); min-width: 0;
  color: var(--tn-color-text); overflow-wrap: anywhere;
}
.cls-insights-dist__figure {
  white-space: nowrap; font-weight: var(--tn-weight-semibold); font-variant-numeric: tabular-nums;
  color: var(--tn-color-text);
}
.cls-insights-dist__share { font-weight: var(--tn-weight-regular); color: var(--tn-color-text-faint); }
.cls-insights-dist__bar {
  grid-column: 1 / -1; display: block; width: 100%; height: 12px; overflow: visible;
  background: var(--tn-color-surface-sunken); border-radius: 3px;
}

.cls-insights-cov { display: flex; flex-direction: column; gap: var(--tn-space-xs); }
.cls-insights-cov__lead { margin: 0; font-size: var(--tn-text-base); color: var(--tn-color-text); font-variant-numeric: tabular-nums; }
.cls-insights-cov__figure { font-size: var(--tn-text-xl); font-weight: var(--tn-weight-bold); }
.cls-insights-cov__meter { height: 14px; }

/* position: relative IS LOAD-BEARING. Each column carries a visually hidden
   label, and tn-vh is position: absolute. Without a positioned ancestor here
   those labels are placed against the page, not this scroll box, so a month of
   columns that scrolls neatly inside the card still pushed the whole page 322px
   wider on a phone (measured 26 Sep 2026). */
.cls-insights-cols__scroll {
  position: relative;
  overflow-x: auto; overscroll-behavior-x: contain;
  padding: var(--tn-space-xxs) 0; border-radius: var(--tn-radius-sm);
}
.cls-insights-cols__scroll:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }
.cls-insights-cols {
  list-style: none; margin: 0; padding: 0 var(--tn-space-md);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(20px, 1fr);
  gap: 3px; align-items: end;
}
.cls-insights-cols__day { display: flex; flex-direction: column; min-width: 0; }
.cls-insights-cols__plot {
  height: 170px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: 2px; border-bottom: 1px solid var(--tn-color-border-control);
}
.cls-insights-cols__value {
  font-size: var(--tn-text-xs); line-height: var(--tn-leading-tight);
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tn-color-text-muted);
}
.cls-insights-cols__day[data-peak='true'] .cls-insights-cols__value {
  color: var(--tn-color-text); font-weight: var(--tn-weight-bold);
}
.cls-insights-cols__bar {
  display: block; width: 100%; max-width: 28px;
  height: calc(var(--tn-meter-fill, 0%) * 0.8);
  background: var(--tn-color-action); border-radius: 3px 3px 0 0;
}
.cls-insights-cols__day[data-zero='true'] .cls-insights-cols__bar {
  height: 2px; background: var(--tn-color-border-control); border-radius: 0;
}
.cls-insights-cols__day:hover .cls-insights-cols__bar { background: var(--tn-color-action-hover); }
.cls-insights-cols__tick {
  display: flex; justify-content: center; height: 22px; padding-top: 3px;
  font-size: var(--tn-text-xs); line-height: var(--tn-leading-tight); white-space: nowrap;
  color: var(--tn-color-text-faint); font-variant-numeric: tabular-nums;
}


.cls-insights-feed {
  list-style: none; margin: 0; padding: 0; max-height: 480px; overflow-y: auto;
  border-top: 1px solid var(--tn-color-border);
}
@media (max-width: 639.98px) { .cls-insights-feed { max-height: 380px; } }
.cls-insights-feed__item + .cls-insights-feed__item { border-top: 1px solid var(--tn-color-border); }
.cls-insights-feed__row {
  appearance: none; margin: 0; width: 100%; min-height: var(--tn-size-touch);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start;
  gap: var(--tn-space-xxs) var(--tn-space-sm); padding: var(--tn-space-xs);
  border: 0; border-radius: var(--tn-radius-sm); background: transparent;
  font: inherit; text-align: left; color: var(--tn-color-text); cursor: pointer;
}
.cls-insights-feed__row:hover { background: var(--tn-color-surface-sunken); }
.cls-insights-feed__row:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
.cls-insights-feed__row[data-live='true'] { animation: cls-insights-arrive var(--tn-duration-slow) var(--tn-easing-standard) 1; }
@keyframes cls-insights-arrive { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cls-insights-feed__dot {
  width: 10px; height: 10px; margin-top: 6px; border-radius: 50%;
  background: var(--tn-color-border-control); box-shadow: 0 0 0 1px var(--tn-color-surface-raised);
}
.cls-insights-feed__dot[data-kind='captured'] { background: var(--tn-color-action); }
.cls-insights-feed__dot[data-kind='edited'] { background: var(--tn-color-status-pending); }
.cls-insights-feed__what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cls-insights-feed__line { font-size: var(--tn-text-sm); line-height: var(--tn-leading-snug); overflow-wrap: anywhere; }
.cls-insights-feed__name { font-weight: var(--tn-weight-semibold); }
.cls-insights-feed__unit { color: var(--tn-color-text-muted); }
.cls-insights-feed__class { color: var(--tn-color-text-faint); }
.cls-insights-feed__who {
  font-size: var(--tn-text-xs); line-height: var(--tn-leading-snug); color: var(--tn-color-text-muted);
  overflow-wrap: anywhere;
}
.cls-insights-feed__when {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-size: var(--tn-text-xs); color: var(--tn-color-text-faint);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cls-insights-feed__live {
  padding: 0 var(--tn-space-xs); border-radius: var(--tn-radius-pill);
  background: var(--tn-color-accent-soft); color: var(--tn-color-accent-soft-ink);
  font-weight: var(--tn-weight-semibold);
}

.cls-insights-rent { display: grid; gap: var(--tn-space-lg); grid-template-columns: minmax(0, 1fr); }
.cls-insights-rent__block { display: flex; flex-direction: column; gap: var(--tn-space-sm); min-width: 0; }
.cls-insights-rent__block + .cls-insights-rent__block {
  padding-top: var(--tn-space-md); border-top: 1px solid var(--tn-color-border);
}
/* Three blocks side by side only when the CARD is wide enough to hold them —
   the card, not the viewport, because the rail and the side panel both take
   width the viewport does not know about. */
@container cls-insights-card (min-width: 760px) {
  .cls-insights-rent { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cls-insights-rent__block + .cls-insights-rent__block {
    padding-top: 0; border-top: 0;
    padding-left: var(--tn-space-lg); border-left: 1px solid var(--tn-color-border);
  }
}
.cls-insights-rent__title {
  margin: 0; font-size: var(--tn-text-base); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text);
}
.cls-insights-rent__bar {
  display: block; width: 100%; height: 16px; overflow: hidden;
  border-radius: var(--tn-radius-sm); background: var(--tn-color-surface-sunken);
}
.cls-insights-rent__total {
  margin: 0; font-size: var(--tn-text-sm); color: var(--tn-color-text-muted); font-variant-numeric: tabular-nums;
}
.cls-insights-rent__total strong {
  font-size: var(--tn-text-xl); font-weight: var(--tn-weight-bold); color: var(--tn-color-text);
}
.cls-insights-rent__exact { color: var(--tn-color-text-faint); }

.cls-insights-bands {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tn-space-xs);
}
.cls-insights-bands__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: var(--tn-space-xxs) var(--tn-space-sm); font-size: var(--tn-text-sm);
}
.cls-insights-bands__name { display: inline-flex; align-items: center; gap: var(--tn-space-xs); min-width: 0; }
.cls-insights-bands__count { font-weight: var(--tn-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cls-insights-bands__bar {
  grid-column: 1 / -1; display: block; width: 100%; height: 8px;
  border-radius: 2px; background: var(--tn-color-surface-sunken);
}

.cls-insights-owing {
  list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tn-color-border);
}
.cls-insights-owing > li + li { border-top: 1px solid var(--tn-color-border); }
.cls-insights-owing__row {
  appearance: none; margin: 0; width: 100%; min-height: var(--tn-size-touch);
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
  gap: var(--tn-space-sm); padding: var(--tn-space-xxs) var(--tn-space-xs);
  border: 0; border-radius: var(--tn-radius-sm); background: transparent;
  font: inherit; font-size: var(--tn-text-sm); text-align: left; color: var(--tn-color-text); cursor: pointer;
}
.cls-insights-owing__row:hover { background: var(--tn-color-surface-sunken); }
.cls-insights-owing__row:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
.cls-insights-owing__name {
  font-weight: var(--tn-weight-semibold); color: var(--tn-color-accent);
  text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere;
}
.cls-insights-owing__due { font-weight: var(--tn-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cls-insights-owing__months {
  min-width: 5.5em; text-align: right; color: var(--tn-color-text-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}


@media (prefers-reduced-motion: reduce) {
  .cls-insights-kpi, .cls-insights-kpi__value, .cls-insights-feed__row {
    animation: none !important; transition: none !important;
  }
}

@media (forced-colors: active) {
  .cls-insights-kpi, .cls-insights-card { border: 1px solid CanvasText; }
  .cls-insights-kpi { border-top-width: 4px; }
  .cls-insights-toggle__btn[aria-pressed='true'] {
    forced-color-adjust: none; background: Highlight; color: HighlightText;
  }
  .cls-insights-cols__bar, .cls-insights-feed__dot {
    forced-color-adjust: none; background: CanvasText;
  }
  .cls-insights-cols__day[data-zero='true'] .cls-insights-cols__bar { background: GrayText; }
  .cls-insights-dist__bar, .cls-insights-bands__bar, .cls-insights-rent__bar { border: 1px solid CanvasText; }
  .cls-insights-feed__row:focus-visible, .cls-insights-owing__row:focus-visible,
  .cls-insights-toggle__btn:focus-visible { outline: 3px solid Highlight; }
  /* The pressed half is filled with Highlight and opts out of adjustment, so a
     Highlight ring on it is the same ring-on-its-own-colour failure: the band
     between ring and fill is HighlightText here, not white. */
  .cls-insights-toggle__btn[aria-pressed='true']:focus-visible { box-shadow: inset 0 0 0 5px HighlightText; }
}

@media print {
  .cls-insights-toggle { display: none !important; }
  .cls-insights-view[hidden] { display: block !important; }
  .cls-insights-card, .cls-insights-kpi, .cls-insights-rent__block { break-inside: avoid; }
  .cls-insights-card, .cls-insights-kpi { border-color: #000000; }
  .cls-insights-kpi, .cls-insights-kpi__value, .cls-insights-feed__row { animation: none !important; }
  .cls-insights-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cls-insights__grid { grid-template-columns: minmax(0, 1fr); gap: 12pt; }
  .cls-insights-feed, .cls-insights-cols__scroll, .cls-insights-table__scroll,
  .cls-insights .tn-table-scroll { max-height: none; overflow: visible; }
  .cls-insights-cols { grid-auto-columns: minmax(0, 1fr); padding: 0; }
  .cls-insights-cols__value { font-size: 7pt; }
  .cls-insights-cols__bar, .cls-insights-feed__dot,
  .cls-insights-dist__bar, .cls-insights-bands__bar, .cls-insights-rent__bar, .tn-meter__fill {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}


.cls-export {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--tn-space-xs);
  margin-left: auto;
  min-width: 0;
}
.cls-export__item { display: flex; }
.cls-export__btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--tn-space-xxs);
  min-height: var(--tn-size-touch); padding: 0 var(--tn-space-md);
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised); color: var(--tn-color-text);
  font: inherit; font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold);
  white-space: nowrap;
}
.cls-export__btn:hover { background: var(--tn-color-surface-sunken); }
.cls-export__btn[aria-expanded='true'] {
  background: var(--tn-color-action); border-color: var(--tn-color-action); color: var(--tn-color-action-ink);
}
.cls-export__btn:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }
.cls-export__icon { flex: none; }

.cls-export__pop {
  position: absolute; top: calc(100% + var(--tn-space-xs)); right: 0;
  z-index: var(--tn-z-overlay);
  width: min(26rem, calc(100vw - var(--tn-space-xl)));
  max-height: min(72vh, 40rem); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--tn-space-sm);
  padding: var(--tn-space-md);
  background: var(--tn-color-surface-raised);
  border: 1px solid var(--tn-color-border-strong); border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-lg);
  color: var(--tn-color-text);
}
.cls-export__pop[hidden] { display: none; }
.cls-export__title {
  margin: 0; font-size: var(--tn-text-md); font-weight: var(--tn-weight-semibold);
  line-height: var(--tn-leading-tight);
}
.cls-export__subtitle {
  margin: var(--tn-space-xs) 0 0; padding-top: var(--tn-space-sm);
  border-top: 1px solid var(--tn-color-border);
  font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold);
}
.cls-export__note, .cls-export__empty {
  margin: 0; color: var(--tn-color-text-muted); font-size: var(--tn-text-xs); line-height: var(--tn-leading-snug);
}
.cls-export__count { margin: 0; font-size: var(--tn-text-sm); }
.cls-export__figure { font-variant-numeric: tabular-nums; }

.cls-export__action {
  appearance: none; cursor: pointer; flex: none;
  min-height: var(--tn-size-touch); padding: 0 var(--tn-space-md);
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised); color: var(--tn-color-text);
  font: inherit; font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold);
}
.cls-export__action:hover { background: var(--tn-color-surface-sunken); }
/* The primary action here is "Copy link" in the Share panel, not a download,
   so it keeps the primary teal every other primary button has. The downloads
   are the file rows below (.cls-export__file). */
.cls-export__action--primary {
  align-self: flex-start;
  background: var(--tn-color-action); border-color: var(--tn-color-action); color: var(--tn-color-action-ink);
}
.cls-export__action--primary:hover { background: var(--tn-color-action-hover); }
.cls-export__action--quiet { color: var(--tn-color-text-muted); }
.cls-export__action:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }

.cls-export__status { display: block; font-size: var(--tn-text-xs); line-height: var(--tn-leading-snug); }
.cls-export__status:empty { display: none; }
/* SOFT-INK, NOT INK. success-ink is the white written ON a filled success
   badge; this line has no fill and sits on the white popover, so in that token
   "Link copied" was white on white and the one confirmation the menu gives was
   not there to read. success-soft-ink is the dark green of the pale badges and
   reads at better than 8:1 on the popover's white. */
.cls-export__status[data-tone='ok'] { color: var(--tn-color-success-soft-ink); }
.cls-export__status[data-tone='error'] {
  color: var(--tn-color-danger); font-weight: var(--tn-weight-semibold);
  border-left: 3px solid var(--tn-color-danger); padding-left: var(--tn-space-xs);
}


.cls-export__copybox, .cls-export__input {
  width: 100%; min-width: 0; min-height: var(--tn-size-touch);
  padding: 0 var(--tn-space-sm);
  border: 1px solid var(--tn-color-border-control); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface); color: var(--tn-color-text);
  font: inherit; font-size: var(--tn-text-sm);
}
.cls-export__copybox { font-family: var(--tn-font-mono); font-size: var(--tn-text-xs); }
.cls-export__copybox:focus-visible, .cls-export__input:focus-visible {
  outline: 3px solid var(--tn-color-focus-ring); outline-offset: 1px;
}
.cls-export__form { display: flex; flex-direction: column; gap: var(--tn-space-xxs); margin: 0; }
.cls-export__label { font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold); }
.cls-export__row { display: flex; gap: var(--tn-space-xs); }
.cls-export__saved { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cls-export__saved-item {
  display: flex; align-items: center; gap: var(--tn-space-xs);
  padding: var(--tn-space-xs) 0; border-top: 1px solid var(--tn-color-border);
}
.cls-export__saved-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cls-export__saved-name {
  font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); overflow-wrap: anywhere;
}
.cls-export__saved-meta { font-size: var(--tn-text-xs); color: var(--tn-color-text-muted); }


.cls-export__files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tn-space-xs); }
.cls-export__file {
  appearance: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: var(--tn-space-sm);
  min-height: var(--tn-size-touch); padding: var(--tn-space-xs) var(--tn-space-sm);
  border: 1px solid var(--tn-color-border); border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised); color: var(--tn-color-text);
  font: inherit; text-align: left; text-decoration: none;
}
.cls-export__file:hover { border-color: var(--tn-color-accent); background: var(--tn-color-accent-soft); }
.cls-export__file:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 1px; }
.cls-export__file[aria-busy='true'] { cursor: progress; border-style: dashed; }
.cls-export__file[disabled] { opacity: 0.7; }
.cls-export__file-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cls-export__file-name { font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); }
.cls-export__file-desc { font-size: var(--tn-text-xs); color: var(--tn-color-text-muted); line-height: var(--tn-leading-snug); }
.cls-export__file-kind {
  flex: none; padding: 2px var(--tn-space-xs); border-radius: var(--tn-radius-sm);
  background: var(--tn-color-neutral-soft); color: var(--tn-color-neutral-soft-ink);
  font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold); letter-spacing: var(--tn-tracking-wide);
}

/* The printed caption: nothing on screen, where every word of it is already
   in the toolbar, the legend and the note over the map. */
.cls-export__caption { display: none; }

@media (max-width: 639.98px) {
  .cls-export__btn { padding: 0 var(--tn-space-sm); }
  .cls-export__row { flex-wrap: wrap; }
  .cls-export__row .cls-export__action { flex: 1 1 auto; }
}


@media print {
  @page { size: A4; margin: 12mm; }

  .cls-work > .cls-toolbar { display: block !important; margin: 0; }
  .cls-work > .cls-toolbar > :not(.cls-export) { display: none !important; }
  .cls-work > .cls-toolbar > .cls-export { display: block !important; margin: 0; }
  .cls-export > :not(.cls-export__caption) { display: none !important; }
  .cls-export .cls-export__caption {
    display: block !important;
    padding: 4pt 6pt;
    border: 1px solid var(--tn-color-text);
    border-radius: var(--tn-radius-sm);
    color: var(--tn-color-text);
    font-size: 9pt; line-height: var(--tn-leading-snug);
    break-inside: avoid;
  }
  .cls-export__caption p { margin: 0; }
  .cls-export__caption-title { font-size: 10.5pt; font-weight: var(--tn-weight-semibold); }
  .cls-export__caption-key { font-weight: var(--tn-weight-semibold); }

  .cls-side, .cls-tabs, .cls-search, .cls-conn,
  .cls-panel__head .tn-btn, .cls-details button, .cls-details .tn-btn {
    display: none !important;
  }

  .cls-kpis { break-inside: avoid; }
  .cls-stage__map { break-inside: avoid; page-break-inside: avoid; }
  .cls-stage__map > .cls-map__frame {
    width: var(--cls-export-frame-w, 100%) !important;
    height: var(--cls-export-frame-h, 150mm) !important;
    min-height: 0 !important;
    max-width: none !important;
    zoom: var(--cls-export-zoom, 1);
    box-shadow: none;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
}


@media (prefers-reduced-motion: reduce) {
  .cls-export__pop, .cls-export__btn, .cls-export__file { transition: none !important; animation: none !important; }
}

@media (forced-colors: active) {
  .cls-export__btn, .cls-export__action, .cls-export__file, .cls-export__copybox, .cls-export__input {
    border: 1px solid ButtonText;
  }
  .cls-export__btn[aria-expanded='true'] { border: 2px solid Highlight; }
  .cls-export__pop { border: 1px solid CanvasText; }
  .cls-export__file-kind { border: 1px solid CanvasText; }
  .cls-export__status[data-tone='error'] { border-left-color: CanvasText; }
}


.qh {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--qtr-chrome-top) - var(--qtr-foot-height));
  min-height: 0;
}
.qh-work {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
}
.qh-down { padding: 24px 16px; overflow: auto; }

/* ---------------------------------------------------------------- the frame */

.qh-frame {
  position: relative;
  z-index: 0;
  min-height: 0;
  overflow: hidden;
  container: qh-frame / size;
  background: var(--tn-color-surface-sunken);
}
.qh-frame > .cls-map__frame {
  position: absolute;
  inset: 0;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.qh-frame > .cls-map__frame:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
/* The frame's own strip is replaced by the tool strip and the map buttons. */
.qh-frame .cls-map__controls { display: none; }
/* The scale bar and the readout, bottom-left of the lane; the readout only when asked for. */
.qh-frame .cls-frame-foot { right: auto; left: 12px; bottom: 12px; align-items: flex-start; }
.qh-frame[data-rq='open'] .cls-frame-foot { left: 340px; }
/* On a desk the card is open from the first paint ("auto"), so the scale bar
   starts beside it rather than jumping there once the workspace has hydrated. */
@media (min-width: 1280px) {
  .qh-frame[data-rq='auto'] .cls-frame-foot { left: 340px; }
}
.qh-frame[data-coords='off'] .cls-frame-coords { display: none; }
/* The base map's credit (Google's logo and copyright, or OpenStreetMap's)
   owns the bottom-left corner of the map (basemap-styles.ts), so the scale bar
   and the selection chip stand on it rather than behind it. */
.qh-frame > .cls-map__frame:not([data-attrib='none']) .cls-frame-foot { bottom: 40px; }
/* Short of the legend, bottom-right; on a phone the legend is up top, so the whole width. */
.qh-frame > .cls-map__frame > .cls-frame-attrib { max-width: calc(100% - 300px); }
.qh-frame:has(> .cls-map__frame:not([data-attrib='none'])) .qh-pick { bottom: 40px; }
.qh-frame:has(> .cls-map__frame:not([data-attrib='none'])) .qh-pop { max-height: calc(100cqh - 52px); }
/* The Rent Query card stops 40px short of the bottom, as the scale bar does,
   so it never runs over the credit (at 1280x720 the card reached it). */
@media (min-width: 768px) {
  .qh-frame:has(> .cls-map__frame:not([data-attrib='none'])) .qrq { max-height: calc(100% - 112px); }
}
/* The notices sit in the lane, right of the Rent Query card (whose header
   stays on screen even when folded) and left of the map buttons or details. */
.qh-frame .cls-frame-notices { top: 72px; left: 340px; right: 68px; align-items: center; }
.qh-frame[data-details='open'] .cls-frame-notices { right: 336px; }

/* ------------------------------------------------------------ the tool strip */

.qh-tools {
  position: absolute;
  z-index: 12;
  left: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.qh-tool, .qh-tools .cls-map__ctl, .qh-mapbtns .cls-map__ctl {
  appearance: none;
  position: relative;
  width: var(--tn-size-control);
  height: var(--tn-size-control);
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tn-color-border);
  border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised);
  color: var(--qtr-navy);
  box-shadow: var(--tn-shadow-sm);
  cursor: pointer;
  line-height: 1;
}
.qh-tool:hover, .qh-tools .cls-map__ctl:hover, .qh-mapbtns .cls-map__ctl:hover { background: var(--tn-color-surface-sunken); }
.qh-tool:focus-visible, .qh-tools .cls-map__ctl:focus-visible, .qh-mapbtns .cls-map__ctl:focus-visible {
  outline: 3px solid var(--tn-color-focus-ring);
  outline-offset: 2px;
}
.qh-tool[aria-pressed='true'], .qh-tool[aria-expanded='true'], .qh-tool[data-armed='true'],
.qh-tools .cls-map__ctl[aria-pressed='true'],
.qh-mapbtns .cls-map__ctl[aria-expanded='true'], .qh-mapbtns .cls-map__ctl[aria-pressed='true'] {
  background: var(--qtr-navy);
  border-color: var(--qtr-navy);
  color: var(--tn-color-header-ink);
}
.qh-tools__locate { display: inline-flex; }
.qh-zoom {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tn-color-border);
  border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised);
  box-shadow: var(--tn-shadow-sm);
  overflow: hidden;
}
.qh-zoom__btn {
  appearance: none;
  width: 44px;
  height: var(--tn-size-control);
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--qtr-navy);
  cursor: pointer;
}
.qh-zoom__btn + .qh-zoom__btn { border-top: 1px solid var(--tn-color-border); }
.qh-zoom__btn:hover { background: var(--tn-color-surface-sunken); }
.qh-zoom__btn:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
.qh-zoom__btn[disabled], .qh-more__item[disabled] { opacity: 0.45; cursor: default; }
.qh-phone { display: none; }

/* The popovers open beside the strip, one at a time, never taller than the map. */
.qh-pop {
  position: absolute;
  left: calc(100% + 8px);
  top: 0;
  width: 300px;
  max-width: calc(100cqw - 80px);
  max-height: calc(100cqh - 24px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--tn-color-surface-raised);
  color: var(--tn-color-text);
  border: 1px solid var(--tn-color-border-strong);
  border-radius: var(--tn-radius-md);
  box-shadow: var(--tn-shadow-lg);
  font-size: var(--tn-text-base);
  line-height: var(--tn-leading-normal);
  animation: qh-pop-in var(--tn-duration-fast) var(--tn-easing-standard);
}
.qh-pop__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 16px;
  border-bottom: 1px solid var(--tn-color-border);
}
.qh-pop__title { flex: 1; min-width: 0; margin: 0; font-size: var(--tn-text-base); font-weight: var(--tn-weight-semibold); }
.qh-pop__close {
  flex: none;
  width: var(--tn-size-control);
  height: var(--tn-size-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--tn-radius-sm);
  background: transparent;
  color: var(--tn-color-text-muted);
  cursor: pointer;
}
.qh-pop__close:hover { background: var(--tn-color-surface-sunken); color: var(--tn-color-text); }
.qh-pop__close:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
.qh-pop__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 16px 16px;
}
.qh-more { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.qh-more__item {
  width: 100%;
  min-height: var(--tn-size-control);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--tn-radius-sm);
  background: transparent;
  color: var(--tn-color-text);
  font: inherit;
  font-size: var(--tn-text-md);
  text-align: left;
  cursor: pointer;
}
.qh-more__item:hover { background: var(--tn-color-surface-sunken); }
.qh-more__item[aria-pressed='true'] { background: var(--tn-color-accent-soft); color: var(--tn-color-accent-soft-ink); }
.qh-more__item:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
@keyframes qh-pop-in {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ the search pill */

.qh-search {
  position: absolute;
  z-index: 13;
  left: 68px;
  top: 12px;
  width: min(420px, 40%);
  min-width: 260px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-right: 4px;
  background: var(--tn-color-surface-raised);
  border: 1px solid var(--tn-color-border);
  border-radius: var(--tn-radius-pill);
  box-shadow: var(--tn-shadow-lg);
}
.qh-search:has(.cls-search__input:focus) { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }
.qh-search .cls-search { flex: 1 1 auto; min-width: 0; max-width: none; }
.qh-search .cls-search__field {
  min-height: var(--tn-size-control);
  border: 0;
  border-radius: var(--tn-radius-pill);
  background: transparent;
}
.qh-search .cls-search__field:focus-within { box-shadow: none; }
.qh-search .cls-search__icon { margin-left: 14px; color: var(--qtr-navy); }
.qh-search .cls-search__input { height: var(--tn-size-control); font-size: var(--tn-text-base); }
.qh-search .cls-search__input::placeholder { color: var(--tn-color-text-muted); }
.qh-search .cls-search__popup { top: calc(100% + 6px); }
.qh-search__filter {
  flex: none;
  position: relative;
  width: var(--tn-size-control);
  height: var(--tn-size-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--tn-radius-pill);
  background: transparent;
  color: var(--qtr-navy);
  cursor: pointer;
}
.qh-search__filter:hover { background: var(--tn-color-surface-sunken); }
.qh-search__filter[aria-expanded='true'] { background: var(--tn-color-accent-soft); color: var(--tn-color-accent-soft-ink); }
.qh-search__filter:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 0; }
.qh-search__dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--qtr-red);
  box-shadow: 0 0 0 2px var(--tn-color-surface-raised);
}

/* ------------------------------------------------------------ the map buttons */

.qh-mapbtns {
  position: absolute;
  /* Over the legend (10): the Map display popover drops down this column and
     its lower rows (Labels, Icons) must not go under the legend card. */
  z-index: 11;
  right: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qh-frame[data-details='open'] .qh-mapbtns { right: 324px; }

/* ----------------------------------------------------------------- the legend */

.qh-legend { position: absolute; z-index: 10; right: 12px; bottom: 12px; }
.qh-frame[data-details='open'] .qh-legend { right: 324px; }
/* Open or closed: one of the card and its Legend button shows. Before the
   browser has said (auto), open on a desk and closed below 1280px (below). */
.qh-legend__key { display: none; }
.qh-legend[data-open='false'] .qh-legend__card { display: none; }
.qh-legend[data-open='false'] .qh-legend__key { display: inline-flex; }
.qh-legend__key {
  align-items: center;
  gap: 6px;
  min-height: var(--tn-size-control-compact);
  padding: 0 12px;
  border: 1px solid var(--tn-color-border);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-color-surface-raised);
  color: var(--qtr-navy);
  box-shadow: var(--tn-shadow-sm);
  font: inherit;
  font-size: var(--tn-text-sm);
  font-weight: var(--tn-weight-semibold);
  cursor: pointer;
}
.qh-legend__key:hover { background: var(--tn-color-surface-sunken); }
.qh-legend__key:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }
.qh-legend__card {
  width: 236px;
  box-sizing: border-box;
  padding: 4px 4px 6px;
  background: var(--qtr-navy);
  color: var(--tn-color-header-ink);
  border-radius: var(--tn-radius-md);
  box-shadow: var(--tn-shadow-lg);
}
.qh-legend__head { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin: 0 0 2px 4px; }
.qh-legend__title { margin: 0; font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); line-height: var(--tn-leading-snug); }
.qh-legend__unit { font-size: var(--tn-text-xs); font-weight: var(--tn-weight-regular); color: var(--tn-color-header-ink-muted); }
.qh-legend__close {
  appearance: none;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--tn-radius-sm);
  background: transparent;
  color: var(--tn-color-header-ink);
  cursor: pointer;
}
.qh-legend__close:hover { background: var(--qtr-navy-deep); }
.qh-legend__close:focus-visible { outline: 3px solid var(--qtr-focus); outline-offset: -1px; }
.qh-legend__list { list-style: none; margin: 0; padding: 0; }
.qh-legend__item {
  width: 100%;
  min-height: 24px;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 1px 4px;
  border: 0;
  border-radius: var(--tn-radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--tn-text-sm);
  line-height: var(--tn-leading-snug);
  text-align: left;
  cursor: pointer;
}
.qh-legend__item:hover { background: var(--qtr-navy-deep); }
.qh-legend__item:focus-visible { outline: 3px solid var(--qtr-focus); outline-offset: -1px; }
.qh-legend__swatch { flex: none; display: block; color: var(--tn-color-header-ink); }
.qh-legend__count { font-variant-numeric: tabular-nums; color: var(--tn-color-header-ink-muted); }
.qh-legend__item[aria-pressed='false'] .qh-legend__label { text-decoration: line-through; opacity: 0.7; }
.qh-legend__item[aria-pressed='false'] .qh-legend__swatch { opacity: 0.35; }
.qh-legend__fmb {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  padding: 3px 4px 0;
  border-top: 1px solid var(--qtr-navy-deep);
  font-size: var(--tn-text-sm);
  line-height: var(--tn-leading-snug);
}
.qh-legend__note { margin: 3px 4px 0; font-size: var(--tn-text-xs); line-height: var(--tn-leading-snug); color: var(--tn-color-header-ink-muted); }

/* ------------------------------------------------- notices and a plain pick */

.qh-notices {
  position: absolute;
  z-index: 10;
  top: 72px;
  left: 340px;
  right: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.qh-notices > * { pointer-events: auto; }
.qh-frame[data-details='open'] .qh-notices { right: 336px; }
.qh-readnote {
  max-width: 420px;
  box-sizing: border-box;
  padding: 10px 12px;
  background: var(--tn-color-surface-raised);
  color: var(--tn-color-text);
  border: 1px solid var(--tn-color-border);
  border-left: 4px solid var(--tn-color-warning);
  border-radius: var(--tn-radius-md);
  box-shadow: var(--tn-shadow-lg);
  font-size: var(--tn-text-sm);
  line-height: var(--tn-leading-snug);
  overflow-wrap: anywhere;
}
.qh-readnote__title { margin: 0; font-size: var(--tn-text-base); font-weight: var(--tn-weight-semibold); }
.qh-readnote__list { margin: 4px 0 8px; padding-left: 18px; }
.qh-readnote__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.qh-readnote__retry {
  min-height: var(--tn-size-control-compact);
  padding: 0 14px;
  border: 1px solid var(--qtr-navy);
  border-radius: var(--tn-radius-sm);
  background: var(--qtr-navy);
  color: var(--tn-color-header-ink);
  font: inherit;
  font-weight: var(--tn-weight-semibold);
  cursor: pointer;
}
.qh-readnote__retry:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }
.qh-readnote__ref summary { cursor: pointer; color: var(--tn-color-text-muted); }
.qh-readnote__ref p { margin: 4px 0 0; font-family: var(--tn-font-mono); font-size: var(--tn-text-xs); }
.qh-pick {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 12px;
  max-width: min(420px, calc(100% - 24px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 14px;
  background: var(--tn-color-surface-raised);
  color: var(--tn-color-text);
  border: 1px solid var(--tn-color-border);
  border-radius: var(--tn-radius-pill);
  box-shadow: var(--tn-shadow-lg);
  font-size: var(--tn-text-base);
}
.qh-pick__text { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.qh-pick__close {
  flex: none;
  width: var(--tn-size-control-compact);
  height: var(--tn-size-control-compact);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tn-color-text-muted);
  cursor: pointer;
}
.qh-pick__close:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }

/* ------------------------------------------------------------ before mount */

/* Until the workspace knows the viewport the Rent Query card is "auto": open
   on a desk, folded on a tablet, a closed sheet on a phone. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .qh-frame[data-rq='auto'] .qrq-body { display: none; }
  .qh-frame[data-details='open'] .qh-mapbtns,
  .qh-frame[data-details='open'] .qh-legend { right: 304px; }
  .qh-frame[data-details='open'] .cls-frame-notices,
  .qh-frame[data-details='open'] .qh-notices { right: 316px; }
}

/* On a tablet and a phone the legend starts closed, behind its Legend
   button: with rows tall enough for a finger it would cover a third of the map. */
@media (max-width: 1279.98px) {
  .qh-legend[data-open='auto'] .qh-legend__card { display: none; }
  .qh-legend[data-open='auto'] .qh-legend__key { display: inline-flex; }
  .qh-legend__key { min-height: var(--tn-size-touch); }
  .qh-legend__card { max-height: calc(100cqh - 88px); overflow-y: auto; }
  .qh-legend[data-open='true'] .qh-legend__card { animation: qh-pop-in var(--tn-duration-fast) var(--tn-easing-standard); }
}

/* --------------------------------------------------------------- touch sizes */

@media (pointer: coarse) {
  .qh-legend__item, .qh-legend__key { min-height: var(--tn-size-touch); }
  .qh-legend__close { width: var(--tn-size-touch); height: var(--tn-size-touch); }
  .qh-pop__close, .qh-pick__close, .qh-search__filter { width: var(--tn-size-touch); height: var(--tn-size-touch); }
  .qh-readnote__retry { min-height: var(--tn-size-touch); }
}

/* --------------------------------------------------------------------- phone */

@media (max-width: 767.98px) {
  .qh-frame[data-rq='auto'] .qrq { display: none; }
  /* One sheet at a time: the query sheet hides the details' peek. */
  .qh-frame[data-sheet='rq'] .qqd { display: none; }
  .qh-search { left: 12px; right: 12px; width: auto; min-width: 0; }
  .qh-search .cls-search__input { font-size: var(--tn-text-md); }
  .qh-search__filter { width: var(--tn-size-touch); height: var(--tn-size-touch); }
  .qh-tools { top: 68px; }
  .qh-desk { display: none; }
  .qh-phone { display: inline-flex; }
  .qh-pop { max-height: calc(100cqh - 80px); }
  .qh-mapbtns, .qh-frame[data-details='open'] .qh-mapbtns { top: 68px; right: 12px; }
  /* Under the four map buttons (four 44px buttons and their 8px gaps from 68px). */
  .qh-legend, .qh-frame[data-details='open'] .qh-legend { top: 276px; bottom: auto; right: 12px; }
  .qh-legend__card { width: min(236px, calc(100cqw - 24px)); max-height: calc(100cqh - 288px); }
  .qh-legend__item, .qh-legend__key { min-height: var(--tn-size-touch); }
  .qh-legend__close { width: var(--tn-size-touch); height: var(--tn-size-touch); }
  .qh-frame .cls-frame-foot, .qh-frame[data-rq='open'] .cls-frame-foot { left: 12px; }
  .qh-frame > .cls-map__frame > .cls-frame-attrib { max-width: calc(100% - 20px); }
  /* Google's line runs to two rows here: the scale bar stands above both. */
  .qh-frame > .cls-map__frame:not([data-attrib='none']) .cls-frame-foot { bottom: 48px; }
  .qh-frame[data-details='open'] .cls-frame-foot { bottom: 84px; }
  /* Over the details' peek, as the scale bar is; the scale bar over it. */
  .qh-frame[data-details='open'] > .cls-map__frame .cls-frame-attrib { bottom: 89px; }
  .qh-frame[data-details='open'] > .cls-map__frame:not([data-attrib='none']) .cls-frame-foot { bottom: 132px; }
  .qh-frame:has(> .cls-map__frame:not([data-attrib='none'])) .qh-pop { max-height: calc(100cqh - 124px); }
  /* The Rent Query sheet covers the bottom of the map, credit and all. While
     a base map needs a credit the sheet stands at a fixed height that leaves
     the top 208px of the map in view (search, a notice, the credit), and the
     credit rides on the sheet's top edge, between the tool buttons and the
     map buttons, so neither column covers it. In that strip Google's line
     folds behind "Map data" (QuartersWorkspace passes compactCredit), and
     opens upward within the same lane. */
  .qh-frame:has(> .cls-map__frame:not([data-attrib='none'])) .qrq {
    height: min(60dvh, 76%, 100% - 208px);
    max-height: none;
  }
  .qh-frame[data-sheet='rq'] > .cls-map__frame:not([data-attrib='none']) > .cls-frame-attrib {
    left: 68px;
    bottom: calc(min(60dvh, 76%, 100% - 208px) + 5px);
    max-width: calc(100% - 136px);
  }
  .qh-frame[data-sheet='rq'] > .cls-map__frame > .cls-frame-attrib[data-compact='true'] .cls-frame-attrib__text {
    max-width: calc(100cqw - 136px);
  }
  .qh-frame .cls-frame-notices, .qh-notices,
  .qh-frame[data-rq='open'] .cls-frame-notices, .qh-frame[data-rq='open'] .qh-notices,
  .qh-frame[data-details='open'] .cls-frame-notices, .qh-frame[data-details='open'] .qh-notices {
    top: 68px;
    left: 68px;
    right: 68px;
  }
  .qh-pick { bottom: 12px; }
}

/* ------------------------------------------------ motion, colours, print */

@media (prefers-reduced-motion: reduce) {
  .qh-pop, .qh-legend__card { animation: none; }
}
@media (forced-colors: active) {
  .qh-tool, .qh-zoom, .qh-search, .qh-pop, .qh-legend__card, .qh-readnote, .qh-pick { border: 1px solid CanvasText; }
  .qh-legend__swatch { forced-color-adjust: none; }
  .qh-tool[aria-pressed='true'], .qh-tool[aria-expanded='true'], .qh-legend__item[aria-pressed='true'] { outline: 2px solid Highlight; }
}
@media print {
  .qh { height: auto; }
  .qh-frame { height: 70vh; }
  .qh-tools, .qh-mapbtns, .qh-search, .qh-rq, .qh-notices, .qh-pick, .qh-legend__key, .qh-legend__close { display: none; }
  /* Paper has no button to open it: a printed map always carries its key. */
  .qh-legend[data-open] .qh-legend__card { display: block; }
}


.qrq {
  position: absolute;
  z-index: 10;
  left: 68px;
  top: 72px;
  width: 260px;
  max-width: calc(100% - 80px);
  max-height: calc(100% - 84px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--tn-color-surface-raised);
  color: var(--tn-color-text);
  border: 1px solid var(--tn-color-border);
  border-radius: var(--tn-radius-md);
  box-shadow: var(--tn-shadow-lg);
  font-size: var(--tn-text-base);
  line-height: var(--tn-leading-normal);
}
.qrq-handle { display: none; }
.qrq-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-bottom: 1px solid var(--tn-color-border);
}
.qrq[data-open='false'] .qrq-head { border-bottom: 0; }
.qrq-title { flex: 1; min-width: 0; margin: 0; font-size: var(--tn-text-base); line-height: var(--tn-leading-snug); }
.qrq-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tn-size-control-compact);
  padding: 4px 8px;
  border: 0;
  border-radius: var(--tn-radius-sm);
  background: transparent;
  color: var(--qtr-navy);
  font: inherit;
  font-weight: var(--tn-weight-bold);
  text-align: left;
  cursor: pointer;
}
.qrq-toggle:hover { background: var(--tn-color-surface); }
.qrq-toggle-text { flex: 1; }
.qrq-toggle-icon, .qrq-chevron { flex: none; }
.qrq-chevron { transition: transform var(--tn-duration-base) var(--tn-easing-standard); }
.qrq[data-open='false'] .qrq-chevron { transform: rotate(180deg); }
.qrq-close { display: none; }
.qrq-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
}
.qrq-body[hidden] { display: none; }
.qrq-form { margin: 0; }
/* Compact on a desktop (32px controls, 6px apart), so the card holds its five
   choices AND three result rows and "View All Results" at 1280x720, as the
   mock-up draws it. Touch sizes come back below 640px and under a coarse
   pointer (the phone block below, and the theme's own touch sizes). */
.qrq-fields { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.qrq-field {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
}
.qrq-label { font-size: var(--tn-text-sm); font-weight: var(--tn-weight-medium); color: var(--tn-color-text-muted); }
.qrq-select {
  width: 100%;
  min-width: 0;
  min-height: var(--tn-size-control-compact);
  padding: 3px 6px;
  box-sizing: border-box;
  border: 1px solid var(--tn-color-border-control);
  border-radius: var(--tn-radius-sm);
  background-color: var(--tn-color-surface-raised);
  color: var(--tn-color-text);
  font: inherit;
  font-size: var(--tn-text-base);
  cursor: pointer;
}
.qrq-select:disabled {
  background-color: var(--tn-color-neutral-soft);
  border-color: var(--tn-color-border-strong);
  color: var(--tn-color-text-faint);
  cursor: not-allowed;
}
.qrq-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.qrq-apply, .qrq-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tn-size-control-compact);
  padding: 3px 12px;
  border-radius: var(--tn-radius-sm);
  font: inherit;
  font-size: var(--tn-text-base);
  font-weight: var(--tn-weight-semibold);
  cursor: pointer;
}
.qrq-apply { border: 1px solid var(--qtr-navy); background: var(--qtr-navy); color: var(--tn-color-header-ink); }
.qrq-apply:hover { background: var(--qtr-navy-deep); }
.qrq-reset { border: 1px solid var(--tn-color-border-strong); background: var(--tn-color-surface-raised); color: var(--tn-color-text); }
.qrq-reset:hover { background: var(--tn-color-surface); }
.qrq-pending { margin: 8px 0 0; font-size: var(--tn-text-xs); color: var(--tn-color-warning-soft-ink); }
.qrq-results { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--tn-color-border); }
.qrq-results-title { margin: 0 0 6px; font-size: var(--tn-text-sm); font-weight: var(--tn-weight-bold); color: var(--tn-color-text); }
.qrq-results-count { font-variant-numeric: tabular-nums; }
.qrq-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--tn-color-border);
  border-radius: var(--tn-radius-sm);
}
.qrq-item + .qrq-item { border-top: 1px solid var(--tn-color-border); }
/* The mock-up lists three; a taller screen has room for all five. */
@media (max-height: 859.98px) and (min-width: 768px) {
  .qrq-item:nth-child(n + 4) { display: none; }
}
.qrq-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tn-size-control-compact);
  padding: 3px 8px;
  border: 0;
  background: transparent;
  color: var(--tn-color-text);
  font: inherit;
  font-size: var(--tn-text-sm);
  text-align: left;
  cursor: pointer;
}
.qrq-row:hover { background: var(--tn-color-surface); }
.qrq-house { display: block; flex: none; }
.qrq-row-name { font-weight: var(--tn-weight-semibold); overflow-wrap: anywhere; }
.qrq-row-rent { font-weight: var(--tn-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qrq-row-rent[data-missing='true'] { font-size: var(--tn-text-xs); font-weight: var(--tn-weight-medium); color: var(--tn-color-text-muted); }
.qrq-empty {
  margin: 0; display: grid; justify-items: center; gap: 6px; text-align: center;
  font-size: var(--tn-text-sm); color: var(--tn-color-text-muted);
}
.qrq-empty__art { display: block; max-width: 100%; height: auto; }
.qrq-empty__text { margin: 0; }
.qrq-all {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: var(--tn-size-control-compact);
  margin: 4px 0 0 auto;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--tn-radius-sm);
  background: transparent;
  color: var(--qtr-navy);
  font: inherit;
  font-size: var(--tn-text-sm);
  font-weight: var(--tn-weight-bold);
  cursor: pointer;
}
.qrq-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.qrq :is(button, select, a):focus-visible,
.qrq-drawer :is(button, a, [tabindex]):focus-visible {
  outline: 3px solid var(--tn-color-focus-ring);
  outline-offset: 2px;
}

/* The results drawer: a modal dialog along the right edge. */
.qrq-drawer {
  box-sizing: border-box;
  width: min(1000px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--tn-radius-lg) 0 0 var(--tn-radius-lg);
  background: var(--tn-color-surface-raised);
  color: var(--tn-color-text);
  box-shadow: var(--tn-shadow-xl);
  font-size: var(--tn-text-base);
  line-height: var(--tn-leading-normal);
}
.qrq-drawer[open] { animation: qrq-drawer-in var(--tn-duration-base) var(--tn-easing-standard); }
.qrq-drawer::backdrop { background: var(--tn-color-scrim); }
@keyframes qrq-drawer-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.qrq-drawer-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  height: 100%;
  padding: 16px 24px 24px;
}
.qrq-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.qrq-drawer-heading { min-width: 0; }
.qrq-drawer-title { margin: 0; font-size: var(--tn-text-xl); line-height: var(--tn-leading-snug); color: var(--qtr-navy); }
.qrq-drawer-summary { margin: 4px 0 0; color: var(--tn-color-text-muted); overflow-wrap: anywhere; }
.qrq-drawer-count { font-weight: var(--tn-weight-bold); color: var(--tn-color-text); }
.qrq-drawer-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  min-height: var(--tn-size-control);
  padding: 4px 12px;
  border: 1px solid var(--tn-color-border-strong);
  border-radius: var(--tn-radius-sm);
  background: var(--tn-color-surface-raised);
  color: var(--tn-color-text);
  font: inherit;
  font-weight: var(--tn-weight-semibold);
  cursor: pointer;
}
.qrq-drawer-close:hover { background: var(--tn-color-surface); }
.qrq-drawer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.qrq-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tn-size-control);
  padding: 4px 16px;
  border: 1px solid var(--tn-color-status-rejected);
  border-radius: var(--tn-radius-sm);
  /* A DOWNLOAD BUTTON IS VIOLET, here as on Reports: one action, one colour
     (Print is violet too). White on #7c3fae is 6.61:1; on #59277f, 10.39:1. */
  background: var(--tn-color-status-rejected);
  color: var(--tn-color-header-ink);
  font-weight: var(--tn-weight-semibold);
  text-decoration: none;
}
.qrq-download:hover, .qrq-download:active {
  background: var(--tn-color-status-rejected-ink); border-color: var(--tn-color-status-rejected-ink);
}
.qrq-drawer-note { flex: 1 1 240px; margin: 0; font-size: var(--tn-text-sm); color: var(--tn-color-text-muted); }
.qrq-drawer-empty {
  margin: 0; padding: 16px; border-radius: var(--tn-radius-sm); background: var(--tn-color-surface);
  display: grid; justify-items: center; gap: 8px; text-align: center;
}
.qrq-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--tn-color-border);
  border-radius: var(--tn-radius-md);
}
.qrq-table { width: 100%; border-collapse: collapse; font-size: var(--tn-text-base); }
.qrq-table th, .qrq-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--tn-color-border);
  text-align: left;
  vertical-align: middle;
}
.qrq-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0;
  background: var(--tn-color-surface);
}
.qrq-table tbody tr:hover { background: var(--tn-color-surface); }
.qrq-sort {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: var(--tn-size-control);
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--tn-color-text);
  font: inherit;
  font-weight: var(--tn-weight-bold);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.qrq-th[data-numeric='true'] .qrq-sort { justify-content: flex-end; }
.qrq-sort-icon { flex: none; }
.qrq-sort-up, .qrq-sort-down { opacity: 0.35; }
.qrq-sort-icon[data-dir='ascending'] .qrq-sort-up,
.qrq-sort-icon[data-dir='descending'] .qrq-sort-down { opacity: 1; }
.qrq-cell-id { font-weight: var(--tn-weight-semibold); }
.qrq-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tn-size-control-compact);
  padding: 2px 4px;
  border: 0;
  border-radius: var(--tn-radius-sm);
  background: transparent;
  color: var(--qtr-navy);
  font: inherit;
  font-weight: var(--tn-weight-semibold);
  text-align: left;
  cursor: pointer;
}
/* A quarter's name stays on one line; a narrow screen scrolls the table instead. */
.qrq-pick-text { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.qrq-cell-mono { font-family: var(--tn-font-mono); font-size: var(--tn-text-sm); white-space: nowrap; }
.qrq-unit { font-family: var(--tn-font-sans); color: var(--tn-color-text-muted); }
.qrq-cell-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qrq-table td.qrq-cell-num { text-align: right; }
.qrq-partial { display: block; font-size: var(--tn-text-xs); color: var(--tn-color-text-muted); }
.qrq-missing { color: var(--tn-color-text-muted); }
.qrq-status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--tn-radius-pill);
  font-size: var(--tn-text-xs);
  font-weight: var(--tn-weight-bold);
  line-height: var(--tn-leading-snug);
  background: var(--tn-color-neutral-soft);
  color: var(--tn-color-neutral-soft-ink);
}
.qrq-status[data-status='Active'] { background: var(--tn-color-success-soft); color: var(--tn-color-success-soft-ink); }
.qrq-status[data-status='Exempt'] { background: var(--tn-color-action-soft); color: var(--tn-color-action-soft-ink); }
.qrq-status[data-status='Suspended'] { background: var(--tn-color-warning-soft); color: var(--tn-color-warning-soft-ink); }

/* Tablet and phone: bigger targets. */
@media (max-width: 1279.98px) {
  .qrq-row, .qrq-all, .qrq-pick { min-height: var(--tn-size-touch); }
}

/* Phone: the panel is a bottom sheet across the map frame. */
@media (max-width: 767.98px) {
  .qrq {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    max-width: none;
    /* The frame is itself about 60dvh on a phone: keep the top of the map in view. */
    max-height: min(60dvh, 76%);
    border-radius: var(--tn-radius-lg) var(--tn-radius-lg) 0 0;
    animation: qrq-sheet-in var(--tn-duration-base) var(--tn-easing-standard);
  }
  .qrq[data-open='false'] { display: none; }
  .qrq-handle {
    display: block;
    width: 40px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: var(--tn-color-border-strong);
  }
  .qrq-chevron { display: none; }
  .qrq-toggle { min-height: var(--tn-size-touch); font-size: var(--tn-text-md); }
  .qrq-close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--tn-size-touch);
    height: var(--tn-size-touch);
    border: 0;
    border-radius: var(--tn-radius-sm);
    background: transparent;
    color: var(--tn-color-text);
    cursor: pointer;
  }
  .qrq-field { grid-template-columns: 104px minmax(0, 1fr); }
  .qrq-label { font-size: var(--tn-text-base); }
  .qrq-select { min-height: var(--tn-size-touch); font-size: var(--tn-text-md); }
  .qrq-apply, .qrq-reset { min-height: var(--tn-size-touch); font-size: var(--tn-text-md); }
  .qrq-row { font-size: var(--tn-text-base); }
  .qrq-all { font-size: var(--tn-text-base); }
  .qrq-drawer { width: 100vw; border-radius: 0; }
  .qrq-drawer-inner { padding: 12px 16px 16px; }
  .qrq-drawer-title { font-size: var(--tn-text-lg); }
  .qrq-drawer-close, .qrq-download, .qrq-sort { min-height: var(--tn-size-touch); }
}
@keyframes qrq-sheet-in {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .qrq, .qrq-drawer[open], .qrq-chevron { animation: none; transition: none; }
}
@media (forced-colors: active) {
  .qrq, .qrq-drawer, .qrq-list, .qrq-table-wrap { border: 1px solid CanvasText; }
  .qrq-apply, .qrq-download { border: 1px solid ButtonText; }
  .qrq-status { border: 1px solid CanvasText; }
}
@media print {
  .qrq { display: none; }
}


.qqd, .qqd-history { --qqd-blue: #1c5cab; }
.qqd {
  position: absolute;
  z-index: 10;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: 300px;
  max-width: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--tn-color-surface-raised);
  color: var(--tn-color-text);
  border: 1px solid var(--tn-color-border);
  border-radius: var(--tn-radius-md);
  box-shadow: var(--tn-shadow-lg);
  font-size: var(--tn-text-base);
  line-height: var(--tn-leading-normal);
}
.qqd-grip { display: none; }
.qqd-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 12px;
  border-bottom: 1px solid var(--tn-color-border);
}
.qqd-head-icon { display: inline-flex; flex: none; color: var(--qqd-blue); }
.qqd-head-text { flex: 1; min-width: 0; }
.qqd-title { margin: 0; font-size: var(--tn-text-md); font-weight: var(--tn-weight-bold); line-height: var(--tn-leading-snug); color: var(--qtr-navy); }
.qqd-peek { display: none; }
.qqd-expand { display: none; }
.qqd-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--tn-size-control-compact);
  height: var(--tn-size-control-compact);
  border: 0;
  border-radius: var(--tn-radius-sm);
  background: transparent;
  color: var(--tn-color-text);
  cursor: pointer;
}
.qqd-close:hover { background: var(--tn-color-surface); }
.qqd-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 12px 12px;
}
/* Each block keeps its own height and the BODY scrolls; a shrinking list with
   overflow hidden would otherwise collapse to nothing on a short screen. */
.qqd-body > *, .qqd-rent > * { flex: none; }

.qqd-units { min-width: 0; margin: 0; padding: 0; border: 0; }
.qqd-units-legend {
  float: left;
  margin: 0 8px 0 0;
  padding: 0;
  font-size: var(--tn-text-xs);
  font-weight: var(--tn-weight-semibold);
  /* Level with the unit buttons beside it, which are compact controls. */
  line-height: var(--tn-size-control-compact);
  color: var(--tn-color-text-muted);
}
.qqd-units-list { display: flex; flex-wrap: wrap; gap: 8px; }
.qqd-unit {
  min-width: var(--tn-size-control-compact);
  min-height: var(--tn-size-control-compact);
  padding: 2px 12px;
  border: 1px solid var(--tn-color-border-strong);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-color-surface-raised);
  color: var(--tn-color-text);
  font: inherit;
  font-size: var(--tn-text-sm);
  font-weight: var(--tn-weight-semibold);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.qqd-unit:hover { background: var(--tn-color-surface); }
.qqd-unit[aria-pressed='true'] { border-color: var(--qtr-navy); background: var(--qtr-navy); color: var(--tn-color-header-ink); }

.qqd-list {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--tn-color-border);
  border-radius: var(--tn-radius-sm);
}
.qqd-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); line-height: var(--tn-leading-snug); }
.qqd-row + .qqd-row { border-top: 1px solid var(--tn-color-border); }
.qqd-label {
  padding: 3px 8px;
  background: var(--tn-color-surface);
  color: var(--tn-color-text-muted);
  font-size: var(--tn-text-sm);
  overflow-wrap: anywhere;
}
.qqd-value {
  margin: 0;
  padding: 3px 8px;
  color: var(--tn-color-text);
  font-size: var(--tn-text-sm);
  font-weight: var(--tn-weight-semibold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.qqd-row[data-blank='true'] .qqd-value { font-weight: var(--tn-weight-regular); color: var(--tn-color-text-muted); }
.qqd-note { display: block; font-size: var(--tn-text-xs); font-weight: var(--tn-weight-regular); color: var(--tn-color-text-muted); }
.qqd-row[data-tone='total'] .qqd-label,
.qqd-row[data-tone='total'] .qqd-value {
  background: var(--tn-color-success-soft);
  color: var(--tn-color-success-soft-ink);
  font-weight: var(--tn-weight-bold);
}
.qqd-row[data-tone='total'] .qqd-value { font-size: var(--tn-text-base); }
.qqd-row[data-tone='total'][data-blank='true'] .qqd-value { font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); }
.qqd-row[data-tone='total'] .qqd-note { color: var(--tn-color-success-soft-ink); }
.qqd-withheld { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--tn-weight-medium); color: var(--tn-color-text-muted); }
.qqd-withheld svg { flex: none; }

.qqd-rent { display: flex; flex-direction: column; gap: 8px; }
.qqd-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--tn-text-base);
  font-weight: var(--tn-weight-bold);
  color: var(--qtr-navy);
}
.qqd-section-icon { display: inline-flex; color: var(--tn-color-text); }
.qqd-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--tn-radius-pill);
  font-size: var(--tn-text-xs);
  font-weight: var(--tn-weight-bold);
  line-height: var(--tn-leading-snug);
  background: var(--tn-color-neutral-soft);
  color: var(--tn-color-neutral-soft-ink);
}
.qqd-chip[data-status='Active'] { background: var(--tn-color-success-soft); color: var(--tn-color-success-soft-ink); }
.qqd-chip[data-status='Exempt'] { background: var(--tn-color-action-soft); color: var(--tn-color-action-soft-ink); }
.qqd-chip[data-status='Suspended'] { background: var(--tn-color-warning-soft); color: var(--tn-color-warning-soft-ink); }

.qqd-foot {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--tn-color-border);
}
.qqd-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qqd-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  padding: 6px 2px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--tn-radius-sm);
  color: var(--tn-color-header-ink);
  font: inherit;
  font-size: var(--tn-text-sm);
  font-weight: var(--tn-weight-semibold);
  line-height: var(--tn-leading-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--tn-duration-fast) var(--tn-easing-standard);
}
.qqd-action[data-tone='history'] { background: var(--qqd-blue); }
.qqd-action[data-tone='query'] { background: var(--tn-color-success); }
.qqd-action[data-tone='print'] { background: var(--tn-color-status-rejected); }
.qqd-action:hover { opacity: 0.88; }
.qqd-staff { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; font-size: var(--tn-text-sm); }
.qqd-staff-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--qtr-navy);
  font-weight: var(--tn-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.qqd-skeleton { display: flex; flex-direction: column; gap: 8px; }
.qqd-skeleton-row {
  height: 22px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--tn-color-skeleton-base) 25%, var(--tn-color-skeleton-sheen) 50%, var(--tn-color-skeleton-base) 75%);
  background-size: 200% 100%;
  animation: qqd-shimmer 1.4s linear infinite;
}
.qqd-skeleton-row:nth-child(4n) { width: 72%; }
@keyframes qqd-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
.qqd-notice {
  display: block;
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--tn-radius-sm);
  background: var(--tn-color-surface);
  color: var(--tn-color-text);
  font-size: var(--tn-text-sm);
}
.qqd-notice[data-tone='error'] { background: var(--tn-color-danger-soft); color: var(--tn-color-danger-soft-ink); }
.qqd-notice-text { display: block; margin: 0; }
.qqd-retry {
  min-height: var(--tn-size-control-compact);
  margin-top: 8px;
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: var(--tn-radius-sm);
  background: var(--tn-color-surface-raised);
  color: inherit;
  font: inherit;
  font-weight: var(--tn-weight-semibold);
  cursor: pointer;
}
.qqd-ref { margin-top: 8px; font-size: var(--tn-text-xs); }
.qqd-ref summary { cursor: pointer; }
.qqd-ref code { overflow-wrap: anywhere; }

.qqd :is(button, a, summary):focus-visible,
.qqd-history :is(button, a):focus-visible {
  outline: 3px solid var(--tn-color-focus-ring);
  outline-offset: 2px;
}

/* The history dialog. */
.qqd-history {
  box-sizing: border-box;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--tn-radius-lg);
  background: var(--tn-color-surface-raised);
  color: var(--tn-color-text);
  box-shadow: var(--tn-shadow-xl);
  font-size: var(--tn-text-base);
  line-height: var(--tn-leading-normal);
}
.qqd-history[open] { animation: qqd-history-in var(--tn-duration-base) var(--tn-easing-standard); }
.qqd-history::backdrop { background: var(--tn-color-scrim); }
@keyframes qqd-history-in {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.qqd-history-inner { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 20px; }
.qqd-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.qqd-history-title { margin: 0; font-size: var(--tn-text-lg); line-height: var(--tn-leading-snug); color: var(--qtr-navy); overflow-wrap: anywhere; }
.qqd-history-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  min-height: var(--tn-size-control);
  padding: 4px 12px;
  border: 1px solid var(--tn-color-border-strong);
  border-radius: var(--tn-radius-sm);
  background: var(--tn-color-surface-raised);
  color: var(--tn-color-text);
  font: inherit;
  font-weight: var(--tn-weight-semibold);
  cursor: pointer;
}
.qqd-history-close:hover { background: var(--tn-color-surface); }
.qqd-history .cls-details-stamps { gap: 0; }
.qqd-history .cls-details-stamps__row {
  grid-template-columns: 104px minmax(0, 1fr);
  padding: 8px 0;
  border-bottom: 1px solid var(--tn-color-border);
}
.qqd-history .cls-details-stamps__row dt { font-weight: var(--tn-weight-semibold); }
.qqd-history-limit {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--tn-radius-sm);
  background: var(--tn-color-warning-soft);
  color: var(--tn-color-warning-soft-ink);
  font-size: var(--tn-text-sm);
}

/* Tablet: a slimmer panel, and touch-sized targets. */
@media (max-width: 1279.98px) {
  .qqd { width: 280px; }
  .qqd-close { width: var(--tn-size-touch); height: var(--tn-size-touch); }
  .qqd-unit, .qqd-retry, .qqd-staff-link { min-height: var(--tn-size-touch); }
}

/* Phone: a bottom sheet that peeks, then opens from its expand button. */
@media (max-width: 767.98px) {
  .qqd {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    /* The frame is itself about 60dvh on a phone: keep the top of the map in view. */
    max-height: min(60dvh, 76%);
    border-radius: var(--tn-radius-lg) var(--tn-radius-lg) 0 0;
    animation: qqd-sheet-in var(--tn-duration-base) var(--tn-easing-standard);
  }
  .qqd-grip {
    display: block;
    flex: none;
    width: 40px;
    height: 4px;
    margin: 6px auto 0;
    border-radius: 2px;
    background: var(--tn-color-border-strong);
  }
  .qqd-head { padding: 2px 4px 4px 12px; }
  .qqd[data-expanded='false'] .qqd-head { border-bottom: 0; }
  .qqd-title { font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text-muted); }
  .qqd-peek { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0; font-size: var(--tn-text-md); line-height: var(--tn-leading-snug); }
  .qqd-peek-id { font-weight: var(--tn-weight-bold); color: var(--qtr-navy); overflow-wrap: anywhere; }
  .qqd-peek-total { font-weight: var(--tn-weight-semibold); font-variant-numeric: tabular-nums; }
  .qqd-expand, .qqd-close { width: var(--tn-size-touch); height: var(--tn-size-touch); }
  .qqd-expand {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--tn-radius-sm);
    background: transparent;
    color: var(--tn-color-text);
    cursor: pointer;
  }
  .qqd-expand svg { transition: transform var(--tn-duration-base) var(--tn-easing-standard); }
  .qqd-expand[aria-expanded='true'] svg { transform: rotate(180deg); }
  .qqd[data-expanded='false'] .qqd-body,
  .qqd[data-expanded='false'] .qqd-foot { display: none; }
  .qqd-label, .qqd-value { font-size: var(--tn-text-base); padding: 8px; }
  /* A tighter stack keeps the footer short so the rows keep the room. */
  .qqd-action { gap: 2px; min-height: 52px; font-size: var(--tn-text-base); }
}
@keyframes qqd-sheet-in {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .qqd, .qqd-history[open], .qqd-skeleton-row, .qqd-expand svg { animation: none; transition: none; }
  .qqd-action { transition: none; }
}
@media (forced-colors: active) {
  .qqd, .qqd-history, .qqd-list { border: 1px solid CanvasText; }
  .qqd-action, .qqd-unit { border: 1px solid ButtonText; }
  .qqd-chip { border: 1px solid CanvasText; }
  .qqd-unit[aria-pressed='true'] { outline: 2px solid Highlight; }
}
@media print {
  .qqd { display: none; }
}


.qb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ figure cards */
.qb-kpis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.qb-kpi {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "tile text" "delta delta";
  align-items: center;
  align-content: center;
  column-gap: 12px;
  row-gap: 4px;
  min-width: 0;
  padding: 12px 16px;
  background: var(--tn-color-surface-raised);
  border: 1px solid var(--tn-color-border);
  border-radius: var(--tn-radius-md);
  box-shadow: var(--tn-shadow-xs);
}
.qb-kpi__tile {
  grid-area: tile;
  display: block;
  width: 48px;
  height: 48px;
  color: var(--tn-color-surface-raised);
}
.qb-kpi__text { grid-area: text; min-width: 0; display: grid; gap: 2px; }
.qb-kpi__label {
  margin: 0;
  font-size: var(--tn-text-xs);
  line-height: var(--tn-leading-snug);
  font-weight: var(--tn-weight-semibold);
  color: var(--tn-color-text-muted);
  overflow-wrap: anywhere;
}
.qb-kpi__value {
  margin: 0;
  font-size: var(--tn-text-xxxl);
  line-height: var(--tn-leading-tight);
  font-weight: var(--tn-weight-bold);
  color: var(--tn-color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.qb-kpi__suffix {
  font-size: var(--tn-text-xs);
  font-weight: var(--tn-weight-semibold);
  color: var(--tn-color-text-muted);
}
/* A card whose figure is words ("Not recorded"), not a number: smaller, and
   free to wrap, so it is never clipped at the card's edge. A number keeps its
   size and its one line. Outranks the band's own size (.qb .qb-kpi__value). */
.qb-kpi .qb-kpi__value[data-words='true'] {
  font-size: var(--tn-text-lg);
  line-height: var(--tn-leading-snug);
  white-space: normal;
  overflow-wrap: anywhere;
}

.qb-delta {
  grid-area: delta;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: var(--tn-text-xs);
  line-height: var(--tn-leading-snug);
  font-weight: var(--tn-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.qb-delta__arrow { flex: none; width: 12px; height: 12px; }
.qb-delta--good { color: var(--tn-color-success); }
.qb-delta--bad { color: var(--tn-color-danger); }
.qb-delta--warn { color: var(--tn-color-warning); }
.qb-delta--flat, .qb-delta--none { color: var(--tn-color-text-muted); font-weight: var(--tn-weight-medium); }

/* -------------------------------------------------------------- the cards */
.qb-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 16px;
  background: var(--tn-color-surface-raised);
  border: 1px solid var(--tn-color-border);
  border-radius: var(--tn-radius-md);
  box-shadow: var(--tn-shadow-xs);
}
.qb-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 18px;
}
.qb-card__title {
  margin: 0;
  font-size: var(--tn-text-sm);
  line-height: var(--tn-leading-snug);
  font-weight: var(--tn-weight-bold);
  color: var(--tn-color-text);
}
.qb-link {
  display: inline-block;
  padding: 4px 6px;
  margin: -4px -6px;
  font-size: var(--tn-text-xs);
  line-height: var(--tn-leading-snug);
  font-weight: var(--tn-weight-semibold);
  color: var(--tn-color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: var(--tn-radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.qb-link:hover { color: var(--tn-color-accent-hover); }
.qb-link:focus-visible, .qb:focus-visible {
  outline: 3px solid var(--tn-color-focus-ring);
  outline-offset: 2px;
}
.qb-note { margin: 8px 0 0; font-size: var(--tn-text-xs); line-height: var(--tn-leading-normal); color: var(--tn-color-text-muted); }

/* ------------------------------------------------------------- rent donut */
.qb-donut { position: relative; }
.qb-donut__body { display: flex; align-items: center; gap: 12px; min-width: 0; }
.qb-donut__ring { flex: none; display: block; width: 88px; height: 88px; }
.qb-donut__track { stroke: var(--tn-color-surface-sunken); }
.qb-donut__centre { fill: var(--tn-color-text); font-weight: var(--tn-weight-bold); font-variant-numeric: tabular-nums; }
.qb-donut__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  min-width: 0;
  font-size: var(--tn-text-xs);
  line-height: var(--tn-leading-normal);
  color: var(--tn-color-text);
}
.qb-donut__item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}
.qb-dot { display: block; width: 10px; height: 10px; }
.qb-donut__band { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qb-donut__pct { font-weight: var(--tn-weight-bold); font-variant-numeric: tabular-nums; text-align: right; }
.qb-donut__empty { margin: 0; font-size: var(--tn-text-xs); line-height: var(--tn-leading-normal); color: var(--tn-color-text-muted); }
.qb-donut__more { display: flex; }
.qb-donut__more > summary { list-style: none; }
.qb-donut__more > summary::-webkit-details-marker { display: none; }
.qb-donut__pop { margin-top: 8px; }

.qb-table {
  border-collapse: collapse;
  font-size: var(--tn-text-xs);
  line-height: var(--tn-leading-normal);
  color: var(--tn-color-text);
  font-variant-numeric: tabular-nums;
}
.qb-table caption { caption-side: top; text-align: left; font-weight: var(--tn-weight-bold); padding: 0 0 4px; }
.qb-table th, .qb-table td {
  padding: 4px 8px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--tn-color-border);
}
.qb-table thead th { color: var(--tn-color-text-muted); font-weight: var(--tn-weight-semibold); }
.qb-table tbody th { font-weight: var(--tn-weight-medium); }
.qb-table tfoot th, .qb-table tfoot td { font-weight: var(--tn-weight-bold); border-bottom: 0; }
.qb-table .qb-num { text-align: right; }

/* --------------------------------------------------------- recent activity */
.qb-act__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.qb-act__row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--tn-text-xs);
  line-height: var(--tn-leading-normal);
  color: var(--tn-color-text);
}
.qb-act__icon { display: block; width: 16px; height: 16px; }
.qb-act__icon--captured { color: var(--tn-color-action); }
.qb-act__icon--edited { color: var(--tn-color-status-pending); }
.qb-act__glyph { stroke: var(--tn-color-surface-raised); }
.qb-act__what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-act__name { font-weight: var(--tn-weight-bold); }
.qb-act__when { color: var(--tn-color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qb-act__empty { margin: 0; font-size: var(--tn-text-xs); line-height: var(--tn-leading-normal); color: var(--tn-color-text-muted); }

/* ------------------------------------------------ the band under the map */
.qb {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 1.5fr) minmax(0, 2fr);
  gap: 8px;
  min-width: 0;
  padding: 6px 12px;
  background: var(--tn-color-surface);
  border-top: 1px solid var(--tn-color-border);
}
.qb:focus-visible { outline-offset: -3px; }
.qb .qb-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.qb .qb-kpi { padding: 6px 10px; column-gap: 10px; row-gap: 4px; }
.qb .qb-kpi__tile { width: 40px; height: 40px; }
.qb .qb-kpi__value { font-size: var(--tn-text-xxl); line-height: var(--tn-leading-tight); }
.qb .qb-card { padding: 6px 12px; }
.qb .qb-donut__ring { width: 60px; height: 60px; }
.qb .qb-donut__legend { line-height: var(--tn-leading-tight); }
.qb .qb-donut__pop {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 1;
  margin: 0;
  width: max-content;
  max-width: min(380px, calc(100vw - 32px));
  padding: 12px;
  background: var(--tn-color-surface-raised);
  border: 1px solid var(--tn-color-border-strong);
  border-radius: var(--tn-radius-md);
  box-shadow: var(--tn-shadow-lg);
}

@media (max-width: 1279.98px) {
  .qb { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .qb .qb-kpis { grid-column: 1 / -1; }
}

/* A phone: one strip that scrolls sideways inside itself, card by card. */
@media (max-width: 767.98px) {
  .qb {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
  }
  .qb .qb-kpis { display: flex; flex: none; gap: 8px; }
  .qb .qb-kpi { flex: 0 0 164px; scroll-snap-align: start; }
  .qb .qb-donut { flex: 0 0 272px; scroll-snap-align: start; }
  .qb .qb-act { flex: 0 0 min(320px, calc(100vw - 48px)); scroll-snap-align: start; }
  /* The strip clips anything above it, so the table opens over the card itself. */
  .qb .qb-donut__pop {
    top: 26px;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    padding: 0 12px 8px;
    overflow: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0 0 var(--tn-radius-md) var(--tn-radius-md);
    box-shadow: none;
  }
}

@media (pointer: coarse), (max-width: 767.98px) {
  .qb-link { padding: 14px 10px; margin: -14px -10px; }
}

@media (prefers-reduced-motion: reduce) {
  .qb { scroll-behavior: auto; }
}

@media (forced-colors: active) {
  .qb-kpi, .qb-card, .qb .qb-donut__pop { border-color: CanvasText; }
  .qb-kpi__tile, .qb-donut__ring, .qb-dot, .qb-act__icon { forced-color-adjust: none; }
  .qb-delta { color: CanvasText; }
}

@media print {
  .qb { break-inside: avoid; }
  .qb-donut__more { display: none; }
}


.qdb { gap: var(--tn-space-xl); }

.qdb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.qdb-head { display: flex; flex-direction: column; gap: var(--tn-space-xs); min-width: 0; }

/* ---------------------------------------------------------------- sections */
.qdb-section { display: flex; flex-direction: column; gap: var(--tn-space-md); min-width: 0; }
.qdb-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--tn-space-xs) var(--tn-space-md);
  min-width: 0;
}
.qdb-section__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 20rem; }
.qdb-section__title {
  margin: 0;
  color: var(--tn-color-text);
  font-size: var(--tn-text-xl);
  font-weight: var(--tn-weight-semibold);
  line-height: var(--tn-leading-tight);
  letter-spacing: var(--tn-tracking-tight);
  scroll-margin-top: var(--tn-space-md);
  border-radius: var(--tn-radius-sm);
}
.qdb-section__title:focus { outline: none; }
.qdb-section__title:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 4px; }
.qdb-section__sub {
  margin: 0;
  max-width: var(--tn-size-prose-max);
  color: var(--tn-color-text-muted);
  font-size: var(--tn-text-sm);
  line-height: var(--tn-leading-normal);
}

/* ------------------------------------------------------------------ layout */
.qdb-pair, .qdb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tn-space-md);
  align-items: stretch;
  min-width: 0;
}
.qdb-grid > .cls-insights-card[data-area] { grid-area: auto; min-width: 0; }
@media (min-width: 900px) {
  .qdb-pair { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .qdb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qdb-grid > .qdb-card[data-area='captures'],
  .qdb-grid > .cls-insights-card[data-area='rent'] { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------- cards */
.qdb-card {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-sm);
  min-width: 0;
  padding: var(--tn-space-md);
  background: var(--tn-color-surface-raised);
  border: 1px solid var(--tn-color-border);
  border-radius: var(--tn-radius-md);
  box-shadow: var(--tn-shadow-xs);
}
/* A chart frame fills its card; the card is the one surface. Its title takes
   the size of the insight cards' titles beside it in the same grid. */
.qdb-card > .tn-chart-frame { flex: 1 1 auto; min-width: 0; margin: 0; }
.qdb-card > .tn-chart-frame .tn-chart-frame__title { font-size: var(--tn-text-lg); }
.qdb-empty {
  margin: 0;
  color: var(--tn-color-text-muted);
  font-size: var(--tn-text-sm);
  line-height: var(--tn-leading-normal);
}

/* The month of captures under the "Surveyed" figure: a shape, not a number. */
.qdb-kpi-trend { margin: var(--tn-space-xxs) 0 0; line-height: 0; }
.qdb-kpi-trend svg { display: block; max-width: 100%; }

/* --------------------------------------------------------------- breakdown */
.qdb-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qdb-field__label {
  color: var(--tn-color-text);
  font-size: var(--tn-text-sm);
  font-weight: var(--tn-weight-semibold);
  line-height: var(--tn-leading-snug);
}
.qdb-select {
  min-height: var(--tn-size-control);
  max-width: 100%;
  padding: 4px var(--tn-space-lg) 4px var(--tn-space-sm);
  font: inherit;
  font-size: var(--tn-text-base);
  line-height: var(--tn-leading-snug);
  color: var(--tn-color-text);
  background-color: var(--tn-color-surface-raised);
  border: 1px solid var(--tn-color-border-control);
  border-radius: var(--tn-radius-sm);
}
.qdb-select:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }

/* ---------------------------------------------------------------- activity */
.qdb-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-xs);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.qdb-chip, .qdb-more {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-xs);
  min-height: var(--tn-size-control-compact);
  padding: 4px var(--tn-space-sm);
  font: inherit;
  font-size: var(--tn-text-sm);
  font-weight: var(--tn-weight-semibold);
  line-height: var(--tn-leading-tight);
  color: var(--tn-color-text);
  background: var(--tn-color-surface-raised);
  border: 1px solid var(--tn-color-border-strong);
  border-radius: var(--tn-radius-pill);
  cursor: pointer;
  transition: background-color var(--tn-duration-fast) var(--tn-easing-standard);
}
.qdb-chip:hover, .qdb-more:hover { background: var(--tn-color-surface-sunken); }
/* A pressed toggle is a button: the action teal it always was, not the page's
   link blue. White on #0f6d64 is 6.19:1. */
.qdb-chip[aria-pressed='true'] {
  color: var(--tn-color-action-ink);
  background: var(--tn-color-action);
  border-color: var(--tn-color-action);
}
.qdb-chip:focus-visible, .qdb-more:focus-visible {
  outline: 3px solid var(--tn-color-focus-ring);
  outline-offset: 2px;
}
.qdb-chip__count { font-weight: var(--tn-weight-medium); font-variant-numeric: tabular-nums; }
.qdb-more { align-self: flex-start; border-radius: var(--tn-radius-sm); }

.qdb-feed__status {
  display: block;
  margin: 0;
  color: var(--tn-color-text-muted);
  font-size: var(--tn-text-sm);
  line-height: var(--tn-leading-normal);
}
.qdb-feed__list { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.qdb-feed__list > li { border-bottom: 1px solid var(--tn-color-border); }
.qdb-feed__list > li:last-child { border-bottom: 0; }
.qdb-feed__row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tn-space-sm);
  min-height: var(--tn-size-touch);
  padding: 6px var(--tn-space-xs);
  font-size: var(--tn-text-base);
  line-height: var(--tn-leading-snug);
  color: var(--tn-color-text);
  text-decoration: none;
  border-radius: var(--tn-radius-sm);
}
.qdb-feed__row:hover { background: var(--tn-color-surface-sunken); }
.qdb-feed__row:hover .qdb-feed__name { text-decoration: underline; text-underline-offset: 2px; }
.qdb-feed__row:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
/* The kind's shared icon, white on the kind's colour: the verb says it in words too. */
.qdb-feed__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: var(--tn-color-surface-raised);
  background: var(--tn-color-action);
}
.qdb-kind--edited { background: var(--tn-color-status-pending); }
.qdb-feed__what { min-width: 0; overflow-wrap: anywhere; }
.qdb-feed__name { font-weight: var(--tn-weight-semibold); color: var(--tn-color-accent); }
.qdb-feed__when {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--tn-text-sm);
  line-height: var(--tn-leading-snug);
  color: var(--tn-color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.qdb-feed__when time { color: var(--tn-color-text); font-weight: var(--tn-weight-semibold); }
.qdb-feed__stamp { font-size: var(--tn-text-xs); }

/* ------------------------------------------------------------------ loading */
.qdb-skel-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--tn-space-md);
}

/* ---------------------------------------------------- touch and small screens */
@media (max-width: 639.98px) {
  .qdb { gap: var(--tn-space-lg); }
  .qdb-feed__row { grid-template-columns: 24px minmax(0, 1fr); padding: var(--tn-space-xs) 4px; }
  .qdb-feed__when { grid-column: 2; flex-direction: row; flex-wrap: wrap; gap: 4px var(--tn-space-xs); align-items: baseline; }
  .qdb-field, .qdb-select { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .qdb-chip, .qdb-more { transition: none; }
}
@media (forced-colors: active) {
  .qdb-card, .qdb-chip, .qdb-more, .qdb-select { border: 1px solid CanvasText; }
  .qdb-chip[aria-pressed='true'] { outline: 2px solid Highlight; }
  .qdb-feed__icon { forced-color-adjust: auto; border: 1px solid CanvasText; }
}
@media print {
  .qdb-filter, .qdb-more, .qdb-field { display: none; }
  .qdb-card { box-shadow: none; break-inside: avoid; }
}


.qrp { gap: var(--tn-space-lg); }

.qrp-head { display: flex; flex-direction: column; gap: var(--tn-space-xs); min-width: 0; }

.qrp-section { display: flex; flex-direction: column; gap: var(--tn-space-sm); min-width: 0; }
.qrp-section__head { display: flex; flex-direction: column; gap: var(--tn-space-xs); }
.qrp-section__title {
  margin: 0;
  color: var(--tn-color-text);
  font-size: var(--tn-text-md);
  font-weight: var(--tn-weight-semibold);
  line-height: var(--tn-leading-snug);
}
.qrp-section__sub {
  margin: 0;
  max-width: var(--tn-size-prose-max);
  color: var(--tn-color-text-muted);
  font-size: var(--tn-text-sm);
  line-height: var(--tn-leading-normal);
}

/* ------------------------------------------------------- the status line */

.qrp-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tn-space-xs) var(--tn-space-sm);
  min-height: var(--tn-size-touch);
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--tn-color-text-muted);
  font-size: var(--tn-text-sm);
  line-height: var(--tn-leading-normal);
}
.qrp-status[data-tone='idle'] { padding-left: 0; padding-right: 0; }
.qrp-status[data-tone='busy'] {
  background: var(--tn-color-accent-soft);
  color: var(--tn-color-accent-soft-ink);
}
.qrp-status[data-tone='ok'] {
  background: var(--tn-color-success-soft);
  border-color: var(--tn-color-success);
  color: var(--tn-color-success-soft-ink);
}
.qrp-status[data-tone='error'] {
  background: var(--tn-color-danger-soft);
  border-color: var(--tn-color-danger);
  color: var(--tn-color-danger-soft-ink);
}
.qrp-status__icon { display: inline-flex; flex: none; }
.qrp-status__text {
  display: block;
  flex: 1 1 16rem;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.qrp-status__retry {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tn-size-control);
  padding: 0 16px;
  border: 1px solid var(--tn-color-border-control);
  border-radius: 8px;
  background: var(--tn-color-surface-raised);
  color: var(--tn-color-text);
  font: inherit;
  font-size: var(--tn-text-base);
  font-weight: var(--tn-weight-semibold);
  line-height: var(--tn-leading-tight);
  cursor: pointer;
}
.qrp-status__retry:hover { border-color: var(--tn-color-action); color: var(--tn-color-action); }
.qrp-status__retry:disabled { cursor: not-allowed; opacity: 0.6; }

.qrp-spinner {
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tn-spin 0.8s linear infinite;
}

/* ---------------------------------------------------------- the file cards */

.qrp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--tn-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.qrp-card {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-sm);
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--tn-color-border);
  border-radius: 12px;
  background: var(--tn-color-surface-raised);
  box-shadow: var(--tn-shadow-sm);
}
.qrp-card__head { display: flex; align-items: center; gap: var(--tn-space-sm); min-width: 0; }
.qrp-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--qtr-navy);
  color: var(--tn-color-header-ink);
}
.qrp-card[data-tone='accent'] .qrp-card__icon { background: var(--tn-color-action); }
.qrp-card[data-tone='approved'] .qrp-card__icon { background: var(--tn-color-status-approved); }
.qrp-card[data-tone='success'] .qrp-card__icon { background: var(--tn-color-success); }
.qrp-card[data-tone='violet'] .qrp-card__icon { background: var(--tn-color-status-rejected); }
.qrp-card__names { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qrp-card__title {
  margin: 0;
  color: var(--tn-color-text);
  font-size: var(--tn-text-md);
  font-weight: var(--tn-weight-semibold);
  line-height: var(--tn-leading-snug);
}
.qrp-card__file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.qrp-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--tn-radius-pill);
  background: var(--tn-color-neutral-soft);
  color: var(--tn-color-neutral-soft-ink);
  font-size: var(--tn-text-xs);
  font-weight: var(--tn-weight-semibold);
  line-height: var(--tn-leading-normal);
}
.qrp-card__name {
  color: var(--tn-color-text-muted);
  font-family: var(--tn-font-mono);
  font-size: var(--tn-text-xs);
  overflow-wrap: anywhere;
}
.qrp-card__holds,
.qrp-card__reach {
  margin: 0;
  color: var(--tn-color-text);
  font-size: var(--tn-text-sm);
  line-height: var(--tn-leading-normal);
}
.qrp-card__reach { color: var(--tn-color-text-muted); }
.qrp-card__reach a {
  color: var(--tn-color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.qrp-card__reach a:hover { color: var(--tn-color-accent-hover); }
.qrp-card__reach a:focus-visible {
  outline: 3px solid var(--tn-color-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}
.qrp-card__privacy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--tn-color-surface-sunken);
  color: var(--tn-color-text-muted);
  font-size: var(--tn-text-xs);
  line-height: var(--tn-leading-normal);
}
.qrp-card__privacy svg { flex: none; margin-top: 2px; }
.qrp-card__privacy[data-privacy='full'] {
  background: var(--tn-color-warning-soft);
  color: var(--tn-color-warning-soft-ink);
}
.qrp-card__privacy[data-privacy='redacted'] {
  background: var(--tn-color-neutral-soft);
  color: var(--tn-color-neutral-soft-ink);
}

.qrp-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  min-height: var(--tn-size-control-lg);
  padding: 0 20px;
  /* A DOWNLOAD BUTTON IS VIOLET, here as in Home's Rent Query drawer: one
     action, one colour (Print is violet too). White on #7c3fae is 6.61:1; on
     the hover and pressed #59277f, 10.39:1. */
  border: 1px solid var(--tn-color-status-rejected);
  border-radius: 8px;
  background: var(--tn-color-status-rejected);
  color: var(--tn-color-header-ink);
  font-size: var(--tn-text-base);
  font-weight: var(--tn-weight-semibold);
  line-height: var(--tn-leading-tight);
  text-decoration: none;
  transition: background-color var(--tn-duration-fast) var(--tn-easing-standard);
}
.qrp-download:hover, .qrp-download:active {
  background: var(--tn-color-status-rejected-ink); border-color: var(--tn-color-status-rejected-ink);
}
.qrp-download[data-busy='true'] { cursor: progress; }
.qrp-download[data-waiting='true'] { cursor: not-allowed; opacity: 0.6; }
.qrp-download:focus-visible,
.qrp-status__retry:focus-visible,
.qrp-link:focus-visible {
  outline: 3px solid var(--tn-color-focus-ring);
  outline-offset: 2px;
}

/* ------------------------------------------------------ the map links */

.qrp-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--tn-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.qrp-link {
  display: flex;
  align-items: flex-start;
  gap: var(--tn-space-sm);
  height: 100%;
  min-height: var(--tn-size-touch);
  padding: var(--tn-space-md);
  border: 1px solid var(--tn-color-border);
  border-radius: 12px;
  background: var(--tn-color-surface-raised);
  box-shadow: var(--tn-shadow-sm);
  color: var(--tn-color-text);
  text-decoration: none;
  transition: border-color var(--tn-duration-fast) var(--tn-easing-standard),
    box-shadow var(--tn-duration-fast) var(--tn-easing-standard);
}
.qrp-link:hover { border-color: var(--tn-color-accent); box-shadow: var(--tn-shadow-md); }
.qrp-link:hover .qrp-link__title { text-decoration: underline; text-underline-offset: 3px; }
.qrp-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--qtr-navy);
  color: var(--tn-color-header-ink);
}
.qrp-link__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qrp-link__title { color: var(--tn-color-accent); font-weight: var(--tn-weight-semibold); }
.qrp-link__desc { color: var(--tn-color-text-muted); font-size: var(--tn-text-sm); line-height: var(--tn-leading-normal); }

@media (max-width: 639.98px) {
  .qrp-card { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .qrp-spinner { animation: none; border-right-color: currentColor; border-style: dotted; }
  .qrp-download,
  .qrp-link { transition: none; }
}

@media (forced-colors: active) {
  .qrp-card,
  .qrp-link,
  .qrp-status { border: 1px solid CanvasText; }
  .qrp-download { border: 1px solid ButtonText; }
  .qrp-card__icon,
  .qrp-link__icon { border: 1px solid CanvasText; }
}

@media print {
  .qrp-download,
  .qrp-status { display: none; }
  .qrp-card,
  .qrp-link { box-shadow: none; break-inside: avoid; }
}


/*
 * Colour. The two coverage tiles wear the portal navy and the action teal:
 * existing tokens only, no new raw colour.
 * The tiles keep their colours; only the page around them (ground, cards,
 * text, links, the class table's group rows) is white and dark blue, so a
 * tile never reads the accent token, which is the page's link blue.
 * Glyph ink is the header ink (white, at least 3.6:1 on every one of these
 * grounds).
 */
.qsv {
  gap: var(--tn-space-lg);
}

.qsv-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--tn-space-xs) var(--tn-space-lg);
}
.qsv-head__text { display: flex; flex-direction: column; gap: var(--tn-space-xs); min-width: 0; }
.qsv-fresh {
  margin: 0;
  color: var(--tn-color-text-faint);
  font-size: var(--tn-text-xs);
  font-variant-numeric: tabular-nums;
}

.qsv-section { display: flex; flex-direction: column; gap: var(--tn-space-sm); min-width: 0; }
.qsv-section__title {
  margin: 0;
  color: var(--tn-color-text);
  font-size: var(--tn-text-md);
  font-weight: var(--tn-weight-semibold);
  line-height: var(--tn-leading-snug);
}
.qsv-section__sub {
  margin: 0;
  max-width: var(--tn-size-prose-max);
  color: var(--tn-color-text-muted);
  font-size: var(--tn-text-sm);
  line-height: var(--tn-leading-normal);
}

/* ------------------------------------------------ the field survey links */

.qsv-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--tn-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.qsv-action {
  display: flex;
  align-items: flex-start;
  gap: var(--tn-space-sm);
  min-height: var(--tn-size-touch);
  height: 100%;
  padding: var(--tn-space-md);
  border: 1px solid var(--tn-color-border);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-color-surface-raised);
  box-shadow: var(--tn-shadow-sm);
  color: var(--tn-color-text);
  text-decoration: none;
  transition: border-color var(--tn-duration-fast) var(--tn-easing-standard),
    box-shadow var(--tn-duration-fast) var(--tn-easing-standard);
}
.qsv-action:hover { border-color: var(--tn-color-accent); box-shadow: var(--tn-shadow-md); }
.qsv-action:hover .qsv-action__title { text-decoration: underline; text-underline-offset: 3px; }
.qsv-action:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }
.qsv-action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--qtr-navy);
  color: var(--tn-color-header-ink);
}
.qsv-action[data-tone='review'] .qsv-action__icon { background: var(--tn-color-status-approved); }
.qsv-action__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qsv-action__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tn-color-accent);
  font-weight: var(--tn-weight-semibold);
}
.qsv-action__desc {
  color: var(--tn-color-text-muted);
  font-size: var(--tn-text-sm);
  line-height: var(--tn-leading-normal);
}

/* --------------------------------------------------------------- the tiles */

.qsv-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tn-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.qsv-tile {
  display: flex;
  align-items: flex-start;
  gap: var(--tn-space-sm);
  min-width: 0;
  padding: var(--tn-space-md);
  border: 1px solid var(--tn-color-border);
  border-radius: 12px;
  background: var(--tn-color-surface-raised);
  box-shadow: var(--tn-shadow-sm);
}
.qsv-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--qtr-navy);
  color: var(--tn-color-header-ink);
}
.qsv-tile[data-tone='quarters'] .qsv-tile__icon { background: var(--tn-color-action); }
.qsv-tile__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.qsv-tile__label {
  margin: 0;
  color: var(--tn-color-text-muted);
  font-size: var(--tn-text-sm);
  font-weight: var(--tn-weight-medium);
  line-height: var(--tn-leading-snug);
}
.qsv-tile__value {
  margin: 0;
  color: var(--tn-color-text);
  font-size: var(--tn-text-xxl);
  font-weight: var(--tn-weight-bold);
  line-height: var(--tn-leading-tight);
  font-variant-numeric: tabular-nums;
}
.qsv-tile__scope {
  margin: 0;
  color: var(--tn-color-text-faint);
  font-size: var(--tn-text-xs);
  line-height: var(--tn-leading-snug);
}
.qsv-tile .tn-meter { margin-top: 6px; }

/* ---------------------------------------------------------------- the cards */

.qsv-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--tn-space-md);
  align-items: start;
}
.qsv-card {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-md);
  min-width: 0;
  padding: var(--tn-space-lg);
  border: 1px solid var(--tn-color-border);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-color-surface-raised);
  box-shadow: var(--tn-shadow-sm);
}
.qsv-card__head { display: flex; flex-direction: column; gap: var(--tn-space-xxs); }
.qsv-card__title {
  margin: 0;
  color: var(--tn-color-text);
  font-size: var(--tn-text-md);
  font-weight: var(--tn-weight-semibold);
  line-height: var(--tn-leading-snug);
}
.qsv-card__sub {
  margin: 0;
  color: var(--tn-color-text-muted);
  font-size: var(--tn-text-sm);
  line-height: var(--tn-leading-normal);
}
.qsv-card__note {
  margin: 0;
  padding-top: var(--tn-space-sm);
  border-top: 1px solid var(--tn-color-border);
  color: var(--tn-color-text-muted);
  font-size: var(--tn-text-xs);
  line-height: var(--tn-leading-relaxed);
}

/* The occupancy split: @tn/ui's stacked bar, its legend carrying the figures. */
.qsv-split { margin: 0; }
/* The captures chart is a card of its own: its title is a card title. */
.qsv-captures .tn-chart-frame { margin: 0; }
.qsv-captures .tn-chart-frame__title { font-size: var(--tn-text-md); }

/* ------------------------------------------------------ records by class */

.qsv-classes .tn-table td,
.qsv-classes .tn-table th { white-space: nowrap; }
/* The class names are ROW headers, so they are th for a screen reader; the
   table's column-header look (small capitals on a sunken ground) is taken off. */
.qsv-classes .tn-table tbody th {
  min-width: 12ch;
  padding: var(--tn-space-xs) var(--tn-space-sm);
  border-bottom: 1px solid var(--tn-color-border);
  background: transparent;
  color: var(--tn-color-text);
  font-size: var(--tn-text-sm);
  font-weight: var(--tn-weight-semibold);
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
}
.qsv-classes .tn-table tbody tr:last-child th { border-bottom: none; }
/* The area heading row that opens each row group. */
.qsv-classes .tn-table tbody tr.qsv-group th {
  padding: var(--tn-space-xs) var(--tn-space-sm);
  border-top: 1px solid var(--tn-color-border-strong);
  border-bottom: 1px solid var(--tn-color-border);
  background: var(--tn-color-accent-soft);
  color: var(--tn-color-accent-soft-ink);
  font-size: var(--tn-text-xs);
  font-weight: var(--tn-weight-bold);
  letter-spacing: var(--tn-tracking-wide);
  text-transform: uppercase;
}
.qsv-classes .tn-table tbody tr.qsv-group:hover { background: transparent; }
.qsv-of { color: var(--tn-color-text-faint); font-weight: var(--tn-weight-regular); }
.qsv-classes__foot { margin: 0; color: var(--tn-color-text-muted); font-size: var(--tn-text-xs); }
.qsv-classes__chart { margin: 0; }

/* ------------------------------------------------------------ narrower */

@media (max-width: 1023.98px) {
  .qsv-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .qsv { gap: var(--tn-space-md); }
  .qsv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tn-space-sm); }
  .qsv-tile { flex-direction: column; gap: var(--tn-space-xs); padding: var(--tn-space-sm); }
  .qsv-tile__icon { width: 40px; height: 40px; border-radius: 10px; }
  .qsv-tile__value { font-size: var(--tn-text-xl); }
  .qsv-card { padding: var(--tn-space-md); }

  /*
   * THE CLASS TABLE STAYS A TABLE ON A PHONE. The platform's table turns each
   * row into a card below this width, which for forty rows is a page many
   * thousands of pixels long. A class and its count fit a phone as a table:
   * the headers wrap, and anything wider still scrolls inside the table's own
   * focusable region, never the page.
   */
  .qsv-classes .tn-table { display: table; width: 100%; }
  .qsv-classes .tn-table thead { display: table-header-group; }
  .qsv-classes .tn-table tbody { display: table-row-group; }
  .qsv-classes .tn-table tr { display: table-row; padding: 0; }
  .qsv-classes .tn-table th,
  .qsv-classes .tn-table td { display: table-cell; width: auto; }
  .qsv-classes .tn-table td {
    padding: var(--tn-space-xs) var(--tn-space-xs);
    border-bottom: 1px solid var(--tn-color-border);
  }
  .qsv-classes .tn-table tbody tr:last-child td { border-bottom: none; }
  .qsv-classes .tn-table td::before { content: none; }
  .qsv-classes .tn-table [data-align='end'] { text-align: right; }
  .qsv-classes .tn-table thead th {
    padding: var(--tn-space-xs);
    white-space: normal;
    vertical-align: bottom;
  }
  .qsv-classes .tn-table tbody th { min-width: 0; padding: var(--tn-space-xs); }
}
@media (max-width: 359.98px) {
  .qsv-tiles { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ environments */

@media (prefers-reduced-motion: reduce) {
  .qsv-action { transition: none; }
}

@media (forced-colors: active) {
  .qsv-action,
  .qsv-tile,
  .qsv-card { border: 1px solid CanvasText; }
  .qsv-tile__icon,
  .qsv-action__icon { border: 1px solid CanvasText; }
  .qsv-pack { border: 1px solid CanvasText; }
}

@media print {
  .qsv-actions { display: none; }
  .qsv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qsv-grid { grid-template-columns: minmax(0, 1fr); }
  .qsv-tile,
  .qsv-card { box-shadow: none; border-color: var(--tn-color-text); break-inside: avoid; }
}


.qab {
  gap: var(--tn-space-lg);
}
/* The heading beside @tn/ui's campus drawing; on a phone the drawing goes. */
.qab-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-md) var(--tn-space-xl);
}
.qab-head__text { display: flex; flex: 1 1 28rem; flex-direction: column; gap: var(--tn-space-xs); min-width: 0; }
.qab-head__art { display: block; flex: none; width: 240px; max-width: 100%; height: auto; }

.qab-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--tn-space-md);
  align-items: start;
}
.qab-col { display: flex; flex-direction: column; gap: var(--tn-space-md); min-width: 0; }

.qab-card {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-sm);
  min-width: 0;
  padding: var(--tn-space-lg);
  border: 1px solid var(--tn-color-border);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-color-surface-raised);
  box-shadow: var(--tn-shadow-sm);
}
.qab-card__title {
  display: flex;
  align-items: center;
  gap: var(--tn-space-xs);
  margin: 0;
  color: var(--tn-color-text);
  font-size: var(--tn-text-md);
  font-weight: var(--tn-weight-semibold);
  line-height: var(--tn-leading-snug);
}
.qab-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--tn-radius-md);
  background: var(--qtr-navy);
  color: var(--tn-color-header-ink);
}
/* Identity only: every card is named by its heading. Existing tokens only (no
   new raw colour): the action teal and the platform's violet, both at least
   5:1 under the white glyph. The tiles keep their colours; the page's blue
   (accent) is for its links. */
.qab-card[data-tone='sources'] .qab-card__icon { background: var(--tn-color-action); }
.qab-card[data-tone='privacy'] .qab-card__icon { background: var(--tn-color-status-rejected); }
.qab-card[data-tone='version'] .qab-card__icon { background: var(--tn-color-status-approved); }

.qab-prose {
  margin: 0;
  max-width: var(--tn-size-prose-max);
  color: var(--tn-color-text);
  line-height: var(--tn-leading-relaxed);
}
.qab-prose + .qab-prose { margin-top: var(--tn-space-xxs); }
.qab-muted { color: var(--tn-color-text-muted); font-size: var(--tn-text-sm); }

/* The pages of the portal, one line each. */
.qab-pages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--tn-space-xs) var(--tn-space-md);
  margin: var(--tn-space-xs) 0 0;
  padding: 0;
  list-style: none;
}
.qab-pages__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--tn-space-xs) 0 var(--tn-space-xs) var(--tn-space-sm);
  border-left: 3px solid var(--tn-color-accent-soft);
}
.qab-pages__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-width: var(--tn-size-touch);
  min-height: var(--tn-size-touch);
  margin: -10px 0;
  color: var(--tn-color-accent);
  font-weight: var(--tn-weight-semibold);
  text-decoration: none;
}
.qab-pages__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.qab-pages__link:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; border-radius: 4px; }
.qab-pages__what { color: var(--tn-color-text-muted); font-size: var(--tn-text-sm); line-height: var(--tn-leading-normal); }

/* The sources: what each is, then what this portal takes from it. */
.qab-sources { display: flex; flex-direction: column; gap: var(--tn-space-sm); margin: 0; }
.qab-source {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--tn-space-xxs) var(--tn-space-md);
  padding-top: var(--tn-space-sm);
  border-top: 1px solid var(--tn-color-border);
}
.qab-source:first-child { padding-top: 0; border-top: 0; }
.qab-source dt { margin: 0; color: var(--tn-color-text); font-weight: var(--tn-weight-semibold); }
.qab-source dd { margin: 0; color: var(--tn-color-text); line-height: var(--tn-leading-relaxed); }
.qab-figure { font-weight: var(--tn-weight-semibold); font-variant-numeric: tabular-nums; }

/* Who can see what: a short list, then this reader's own answer. */
.qab-list { display: flex; flex-direction: column; gap: var(--tn-space-xs); margin: 0; padding-left: 1.2em; }
.qab-list li { line-height: var(--tn-leading-relaxed); }
.qab-you {
  margin: var(--tn-space-xs) 0 0;
  padding: var(--tn-space-sm) var(--tn-space-md);
  border-radius: var(--tn-radius-md);
  background: var(--tn-color-neutral-soft);
  color: var(--tn-color-neutral-soft-ink);
  font-size: var(--tn-text-sm);
  line-height: var(--tn-leading-relaxed);
}
/* A page note, not a status badge: the page's pale blue rather than a green
   panel (the page is white and dark blue). The words carry the answer.
   #1b3a8f on #e6ecf9 is 8.66:1. */
.qab-you[data-sees='true'] { background: var(--tn-color-accent-soft); color: var(--tn-color-accent-soft-ink); }

.qab-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--tn-space-xxs) var(--tn-space-md); margin: 0; }
.qab-facts dt { margin: 0; color: var(--tn-color-text-muted); font-size: var(--tn-text-sm); }
.qab-facts dd { margin: 0; color: var(--tn-color-text); font-size: var(--tn-text-sm); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

@media (max-width: 1023.98px) {
  .qab-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .qab { gap: var(--tn-space-md); }
  .qab-head__art { display: none; }
  .qab-card { padding: var(--tn-space-md); }
  .qab-source { grid-template-columns: minmax(0, 1fr); }
}

@media (forced-colors: active) {
  .qab-card { border: 1px solid CanvasText; }
  .qab-card__icon { border: 1px solid CanvasText; }
  .qab-pages__item { border-left-color: CanvasText; }
  .qab-you { border: 1px solid CanvasText; }
}

@media print {
  .qab-head__art { display: none; }
  .qab-grid { grid-template-columns: minmax(0, 1fr); }
  .qab-card { box-shadow: none; border-color: var(--tn-color-text); break-inside: avoid; }
}


.q3d {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-md);
  width: 100%;
  min-width: 0;
  padding: var(--tn-space-lg) var(--tn-space-md) var(--tn-space-xl);
}

.q3d-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--tn-space-xs) var(--tn-space-lg);
}
.q3d-head__text { display: flex; flex-direction: column; gap: var(--tn-space-xxs); min-width: 0; }
.q3d-head .qtr-page__lede { max-width: 88ch; }
.q3d-fresh {
  margin: 0;
  color: var(--tn-color-text-faint);
  font-size: var(--tn-text-xs);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- toolbar */

.q3d-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tn-space-xs) var(--tn-space-md);
  min-width: 0;
  padding: var(--tn-space-xs) var(--tn-space-sm);
  border: 1px solid var(--tn-color-border);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-color-surface-raised);
  box-shadow: var(--tn-shadow-sm);
}
.q3d-bar__spacer { flex: 1 1 auto; }
/* The map's "Colour by" select, borrowed: at the platform's control size
   (17px), so a phone does not zoom the page when it takes focus. */
.q3d-bar .cls-panel-picker__select { font-size: var(--tn-text-base); }
.q3d-count {
  margin: 0;
  color: var(--tn-color-text-muted);
  font-size: var(--tn-text-sm);
  font-variant-numeric: tabular-nums;
}

/* The base map chooser (basemap-styles.ts, bar variant) keeps its own row on
   a phone, where its three options need the whole width. */
.q3d-bar .cls-basemap { flex: 0 1 auto; }

.q3d-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tn-size-touch);
  padding: 0 var(--tn-space-xs);
  border-radius: var(--tn-radius-sm);
  color: var(--tn-color-accent);
  font-size: var(--tn-text-sm);
  font-weight: var(--tn-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}
.q3d-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.q3d-link:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 0; }

/* ----------------------------------------------------------------- stage */

.q3d-stage { position: relative; min-width: 0; }
.q3d-stage .cls-threed {
  height: calc(100dvh - var(--qtr-chrome-top) - 300px);
  min-height: 420px;
}

.q3d-pick {
  position: absolute;
  z-index: 5;
  top: calc(var(--tn-space-sm) + var(--tn-size-touch) + var(--tn-space-xs));
  right: var(--tn-space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-xs);
  width: min(300px, calc(100% - 2 * var(--tn-space-sm)));
  max-height: calc(100% - 2 * var(--tn-space-sm) - var(--tn-size-touch) - var(--tn-space-xs) - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--tn-space-sm) var(--tn-space-md) var(--tn-space-md);
  border: 1px solid var(--tn-color-border-strong);
  border-radius: 12px;
  background: var(--tn-color-surface-raised);
  box-shadow: var(--tn-shadow-lg);
}
.q3d-pick__head { display: flex; align-items: flex-start; gap: var(--tn-space-xs); }
.q3d-pick__titles { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.q3d-pick__kicker {
  margin: 0;
  color: var(--tn-color-text-faint);
  font-size: var(--tn-text-xs);
  font-weight: var(--tn-weight-semibold);
  letter-spacing: var(--tn-tracking-wide);
  text-transform: uppercase;
}
.q3d-pick__title {
  margin: 0;
  color: var(--tn-color-text);
  font-size: var(--tn-text-md);
  font-weight: var(--tn-weight-bold);
  line-height: var(--tn-leading-snug);
  overflow-wrap: anywhere;
}
.q3d-pick__sub { margin: 0; color: var(--tn-color-text-muted); font-size: var(--tn-text-sm); }
.q3d-pick__close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--tn-size-touch);
  height: var(--tn-size-touch);
  margin: -6px -10px 0 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tn-color-text-muted);
  cursor: pointer;
}
.q3d-pick__close:hover { background: var(--tn-color-surface-sunken); color: var(--tn-color-text); }
.q3d-pick__close:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: -3px; }
.q3d-pick__facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px var(--tn-space-sm);
  margin: 0;
  font-size: var(--tn-text-sm);
}
.q3d-pick__facts dt { margin: 0; color: var(--tn-color-text-muted); }
.q3d-pick__facts dd { margin: 0; color: var(--tn-color-text); overflow-wrap: anywhere; }
.q3d-pick__swatch { display: inline-block; vertical-align: -2px; margin-right: 6px; }
.q3d-pick__actions { display: flex; flex-wrap: wrap; gap: var(--tn-space-xs); margin-top: 2px; }
.q3d-pick__action {
  display: inline-flex;
  align-items: center;
  min-height: var(--tn-size-touch);
  padding: 0 var(--tn-space-sm);
  border: 1px solid var(--tn-color-border-control);
  border-radius: var(--tn-radius-md);
  background: var(--tn-color-surface-raised);
  color: var(--tn-color-accent);
  font-size: var(--tn-text-sm);
  font-weight: var(--tn-weight-semibold);
  text-decoration: none;
}
.q3d-pick__action[data-primary='true'] {
  border-color: var(--qtr-navy);
  background: var(--qtr-navy);
  color: var(--tn-color-header-ink);
}
/* Asset sheet opens the printable sheet: the same Print action the Home
   details panel fills violet, so it is violet here too. White on #7c3fae is
   6.61:1. */
.q3d-pick__action[data-tone='print'] {
  border-color: var(--tn-color-status-rejected);
  background: var(--tn-color-status-rejected);
  color: var(--tn-color-header-ink);
}
.q3d-pick__action:hover { text-decoration: underline; text-underline-offset: 3px; }
.q3d-pick__action:focus-visible { outline: 3px solid var(--tn-color-focus-ring); outline-offset: 2px; }
.q3d-pick__note { margin: 0; color: var(--tn-color-warning-soft-ink); font-size: var(--tn-text-xs); }

.q3d-hint {
  margin: 0;
  color: var(--tn-color-text-muted);
  font-size: var(--tn-text-sm);
}

/* ------------------------------------------------------------- narrower */

@media (max-width: 767.98px) {
  .q3d { gap: var(--tn-space-sm); padding: var(--tn-space-md) var(--tn-space-md) var(--tn-space-lg); }
  .q3d-bar { padding: var(--tn-space-xs); }
  .q3d-bar__spacer { display: none; }
  .q3d-bar .cls-basemap { flex: 1 1 100%; }
  .q3d-stage .cls-threed { height: 62vh; height: 62dvh; min-height: 340px; }
  .q3d-pick {
    position: static;
    width: auto;
    max-height: none;
    margin-top: var(--tn-space-sm);
    box-shadow: var(--tn-shadow-sm);
  }
}

/* ------------------------------------------------------------ environments */

@media (forced-colors: active) {
  .q3d-bar,
  .q3d-pick { border: 1px solid CanvasText; }
  .q3d-pick__action { border: 1px solid ButtonText; }
  .q3d-pick__swatch { forced-color-adjust: none; }
}

@media print {
  .q3d-bar,
  .q3d-pick__close,
  .q3d-pick__actions { display: none; }
  .q3d-stage .cls-threed { height: 460px; min-height: 0; }
  .q3d-pick { position: static; width: auto; max-height: none; box-shadow: none; border-color: var(--tn-color-text); }
}


@media (prefers-reduced-motion: reduce) {
  .cls-conn__dot, .cls-feed__item { animation: none !important; }
}

@media (forced-colors: active) {
  .cls-panel, .cls-map__frame, .cls-classlist { border: 1px solid CanvasText; }
  .cls-chip[aria-pressed='true'], .cls-switch__btn[aria-pressed='true'] { border: 2px solid Highlight; }
}

@media print {
  .cls-switch, .cls-map__controls { display: none !important; }
  .cls-panel { border-color: #000000; break-inside: avoid; }
  .cls-map__frame { height: 460px; break-inside: avoid; }
  .cls-feed, .cls-classlist { max-height: none; overflow: visible; }
  .cls-workspace { grid-template-columns: minmax(0, 1fr); }
  .cls-toolbar, .cls-side, .cls-tabs { display: none !important; }
  .cls-page { gap: 14pt; padding: 0; }
}