/*
 * BPD shared components: rules, not values.
 *
 * bpd-tokens.css is the palette and declares only custom properties, which is
 * why it can load on every page unconditionally without being able to change
 * anything. This file is its counterpart for component RULES, kept separate on
 * purpose: a wrong token is a wrong colour, a wrong rule can move layout on any
 * page carrying the markup. Different blast radius, different file, so the two
 * can be reverted and cache-busted independently.
 *
 * No page predicate, for the same reason bpd-tokens.css has none: a predicate
 * would rebuild the opt-in list this file exists to delete. A page opts in by
 * using the class, not by being added to a list somewhere.
 *
 * No and no specificity anchor. The two shared components already
 * living in the Header template part need both, because the page-local rules
 * they fight are still in place. Here the local declarations are deleted as
 * each page adopts the class, so nothing competes. That also makes the
 * migration safe in every intermediate state: until a page carries the class,
 * these rules match nothing; while it carries both, the page's own rules still
 * win on specificity; once the local declarations go, these take over.
 *
 * Fallbacks are spelled out in every var(). A missing custom property with no
 * fallback resolves to nothing, which on this site has previously produced an
 * invisible-text bug and a border that fell back to currentColor and rendered
 * navy instead of pale blue.
 */

/* -------------------------------------------------------------------------
 * Selected Records
 *
 * The list of records chosen on Building Profile and carried into a tool page.
 * Three implementations existed with three class names, three layout
 * mechanisms and three sets of numbers:
 *
 *   Building Profile (902)   .bpe-tray-item in #bpe-tray-list
 *   Local Law Index  (808)   .nyc-ll-selrow in .nyc-ll-sellist
 *   Inspection Matrix (994)  .pw1-row       in #pw1PopoverBody
 *
 * 902 and 808 already agreed exactly. 994 was aligned to them on 6 Sep 2026,
 * and these rules are those agreed numbers in one place.
 *
 * Only the outer box is shared. The row internals legitimately differ: the
 * owner page hides the record description behind its chevron because you
 * picked the record seconds earlier from the table below it, while the
 * consumer pages show it inline because the selection arrives with no
 * surrounding record. Same box, density by role.
 *
 * The 3px left border that colour-codes record type stays page-local. It is
 * per-type rather than per-component, and page rules carrying .is-filing or
 * .is-permit outrank these on specificity, so it keeps working during and
 * after migration without anything here.
 *
 * TWO TIERS, added 6 Sep 2026 when Building Profile (902) was migrated.
 *
 * .bpd-tool-selbox is the box: background, border, radius, nothing else.
 * .bpd-tool-selrow is that box plus the padding, which is what 994 and 808
 * both want, so they carry the one class and are unaffected by this split.
 *
 * 902 needs the box without the padding. Its row sets overflow:hidden and
 * holds a .detail-wrap whose top border has to run edge to edge, so the
 * padding lives on the row's children instead (.tray-item-top at .55rem
 * .75rem, matching the padded variant exactly, with .tray-item-secondary and
 * .tray-item-fields hanging off a -.35rem top margin). Giving that row the
 * padded class would double the inset; giving it the box class shares the
 * three declarations that genuinely are the same and leaves the structure it
 * needs alone.
 *
 * So: reach for .bpd-tool-selrow by default. Reach for .bpd-tool-selbox only
 * when the row has a real structural reason to place its own padding, and say
 * what that reason is where you use it.
 * ------------------------------------------------------------------------- */

.bpd-tool-sellist {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.bpd-tool-selbox,
.bpd-tool-selrow {
  background: var(--card, #fff);
  border: 1px solid var(--hairline, #D7E0EA);
  border-radius: 5px;
}

.bpd-tool-selrow {
  padding: .55rem .75rem;
}

/* -------------------------------------------------------------------------
 * Tool page furniture: handoff card, region title, source block, report link
 *
 * Moved here 6 Sep 2026 from the Header template part, where it lived in
 * <style id="bpd-tool-end-style">. That block predates this file and was the
 * first attempt at a shared component layer: one <style> in the header,
 * shipped to every page whether it used the components or not, and impossible
 * to cache-bust or revert without republishing the whole 90KB header.
 *
 * The pointer comments it carried (HDR-125, HDR-126, HDR-127, HDR-130) are
 * dropped; they indexed positions in the header that no longer exist. Search
 * the 6 Sep project docs if you need the history.
 *
 * THESE RULES KEEP THEIR ANCHOR AND THEIR, AND THAT IS DELIBERATE.
 * The Selected Records rules above carry neither, because each page's local
 * declarations are deleted as it adopts the class, so nothing competes. These
 * are the opposite case: the page-local rules they override are still in
 * place on every tool page, and the theme also styles h2 and button. Stripping
 * the anchor or the here would not be tidying, it would be turning
 * the rules off.
 *
 * :is([data-bpd-tool-root],#bpd-specificity-anchor) resolves to 1-0-0, since
 * :is() takes the highest specificity among its arguments. #bpd-specificity-anchor
 * is not an element that exists; it is there to buy that weight. Do not
 * "simplify" it to the attribute selector alone, which would drop the rules to
 * 0-1-0 and lose every tie they currently win.
 * ------------------------------------------------------------------------- */

:is([data-bpd-tool-root],#bpd-specificity-anchor) .bpd-tool-handoff {
  margin: 0 clamp(1.25rem, 3vw, 2.25rem) 1.5rem;
  padding: 2rem;
  width: auto;
  max-width: none;
  border: 1px solid var(--hairline, #D7E0EA);
  border-radius: 14px;
  background: var(--card, #fff);
  color: var(--ink, #0B2545);
  box-shadow: 0 1px 2px rgba(16,31,56,.04), 0 10px 24px rgba(16,31,56,.03);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  column-gap: 2rem;
  font-family: 'Inter','Segoe UI',sans-serif;
  text-align: left;
}
:is([data-bpd-tool-root],#bpd-specificity-anchor) .bpd-tool-handoff .bpd-handoff-label {
  grid-column: 1 / -1;
  margin: 0 0 .45rem;
  font-family: 'IBM Plex Mono',monospace;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--steel, #5C6B73);
  line-height: 1.35;
}
:is([data-bpd-tool-root],#bpd-specificity-anchor) .bpd-tool-handoff h2 {
  grid-column: 1;
  margin: 0 0 .5rem;
  padding: 0;
  font-family: 'Inter','Segoe UI',sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--ink, #0B2545);
}
:is([data-bpd-tool-root],#bpd-specificity-anchor) .bpd-tool-handoff .bpd-handoff-copy {
  grid-column: 1;
  max-width: 60ch;
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--steel, #5C6B73);
}
:is([data-bpd-tool-root],#bpd-specificity-anchor) .bpd-tool-handoff .bpd-handoff-actions {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .65rem;
  margin: 0;
}
:is([data-bpd-tool-root],#bpd-specificity-anchor) .bpd-tool-handoff .bpd-handoff-primary {
  display: inline-flex;
  padding: .72rem 1.15rem;
  border: 1px solid var(--ink, #0B2545);
  border-radius: 3px;
  background: var(--ink, #0B2545);
  color: #fff;
  font-family: 'IBM Plex Mono',monospace;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
:is([data-bpd-tool-root],#bpd-specificity-anchor) .bpd-tool-handoff .bpd-handoff-secondary {
  color: var(--blue, #1B3B6F);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid #A9C2E0;
}
#bprw-navmode > .bpd-tool-handoff {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
:is([data-bpd-tool-root],#bpd-specificity-anchor) .bpd-tool-region-title {
  margin: 1.6rem 0 .55rem;
  padding-top: 0;
  padding-bottom: 0;
  font-family: 'Inter','Segoe UI',sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--ink, #0B2545);
}
:is([data-bpd-tool-root],#bpd-specificity-anchor) > .bpd-tool-region-title {
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}
@media (max-width: 560px) {
  :is([data-bpd-tool-root],#bpd-specificity-anchor) > .bpd-tool-region-title {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
:is([data-bpd-tool-root],#bpd-specificity-anchor) .bpd-source-block {
  margin: 0 clamp(1.25rem, 3vw, 2.25rem);
  padding: 0 0 1.5rem;
  text-align: left;
}
:is([data-bpd-tool-root],#bpd-specificity-anchor) .bpd-source-title {
  margin: 0 0 .7rem;
  padding: 0;
  font-family: 'Inter','Segoe UI',sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--ink, #0B2545);
  text-transform: none;
}
:is([data-bpd-tool-root],#bpd-specificity-anchor) .bpd-source-block [data-bpd-part="sources"] {
  margin: 0;
  padding: 0;
  max-width: none;
  font-family: 'IBM Plex Mono',monospace;
  font-size: .72rem;
  font-weight: 400;
  line-height: 1.65;
  color: #40556F;
}
.bpd-rep-invite {
  font-family: 'Inter','Segoe UI',sans-serif;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--steel, #5C6B73);
}
.bpd-rep-invite.top { margin-top: .55rem; }
.bpd-source-block .bpd-rep-invite {
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(27,59,111,.16);
}
.bpd-rep-invite button {
  -webkit-appearance: none !important;
  appearance: none !important;
  font: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--blue, #1B3B6F) !important;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(27,59,111,.3) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.bpd-rep-invite button:hover {
  color: var(--stamp, #B23A2E) !important;
  border-bottom-color: var(--stamp, #B23A2E) !important;
}
.bpd-rep-invite button:focus-visible {
  outline: 2px solid var(--blue-soft, #3D5A80) !important;
  outline-offset: 3px !important;
  border-radius: 2px !important;
}
@media (max-width: 640px) {
  :is([data-bpd-tool-root],#bpd-specificity-anchor) .bpd-tool-handoff {
    padding: 1.5rem 1.35rem;
    grid-template-columns: 1fr;
  }
  :is([data-bpd-tool-root],#bpd-specificity-anchor) .bpd-tool-handoff .bpd-handoff-actions {
    grid-column: 1;
    grid-row: auto;
    margin-top: 1rem;
  }
  :is([data-bpd-tool-root],#bpd-specificity-anchor) .bpd-tool-handoff h2,
  :is([data-bpd-tool-root],#bpd-specificity-anchor) .bpd-source-title {
    font-size: 1.1rem;
  }
}
@media print {
  html:has([data-bpd-tool-root],#bpd-specificity-anchor) body * { visibility: hidden !important; }
}


.bpd-sec-chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 24px;
  min-height: 19px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--stamp-soft, #DDEAF3);
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: .7rem;
  font-weight: 600;
}