/* Data Losses page (ported from essential-data-us-v2 terms.css).
   Self-contained: colors inlined, scoped under .data-losses, and the
   essentialdata-specific header overrides intentionally dropped so this
   file does not affect dataindex's own header. */

:root {
  --dl-tech-blue: #1a3952;
  --dl-accent: #6c5ce7;
  --dl-title-blue: #2d618b;
}

.site-header__logo-mark {
  height: 60px;
}
.site-header__wrapper{
      background-color:rgba(26, 57, 82, 1.0);

}
.data-losses.content__container {
  background-color: #f4f8f9;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  align-items: center; /* centres the 83%-wide intro block, as on Use Cases */
  padding: 5%;
  padding-top: 150px;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
  /* Multi-weight family (see _base.css) so font-weight:bold selects the
     real StabilGrotesk-Bold cut rather than a synthesised faux bold. */
  font-family: "Stabil Grotesk", "StabilGrotesk-Regular", sans-serif;
}

.data-losses b {
  font-weight: bold;
}

.data-losses .termination__type {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color--fas-blue);
  padding: 10px;
  color: white;
  font-size: 14px;
}
.data-losses .termination__type p {
  margin: 0px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.data-losses .termination__type::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 4px solid var(--dl-accent);
}

.data-losses .termination__container {
  display: grid;
  /* Cards now carry description + caveats + a source list, so a fixed 4-up
     grid is too narrow. minmax(0, ...) lets tracks shrink below their
     content's intrinsic width; plain 1fr keeps an implicit min-width:auto
     that overflows in WebKit. */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 24px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  align-items: start;
}

.data-losses .termination__item {
  border: 2px solid var(--dl-tech-blue);
  min-width: 0; /* allow the grid item to shrink */
  overflow: hidden; /* clip anything that still tries to spill */
}

.data-losses .termination__text-container {
  display: flex; /* stack the summary and the sources vertically */
  flex-direction: column;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  cursor: pointer;
  padding: 10px;
}
.data-losses .termination__text-container > div {
  margin: 0;
  font-size: 18px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Sources collapse until hover/focus, carried over from the 2025 edition.
   Title, agency, status, description and caveats stay visible; only the link
   list is behind the reveal, because with 378 cards the citations otherwise
   dominate the grid. Touch devices have no hover -- the table view is the
   path there, and it lists every source inline. */
.data-losses .termination__content--hide {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.35s ease,
    opacity 0.35s ease,
    margin-top 0.2s ease,
    padding-top 0.2s ease;
}
.data-losses .termination__item:hover .termination__content--hide,
.data-losses .termination__item:focus-within .termination__content--hide {
  max-height: 100em; /* generous cap so the full source list shows */
  opacity: 1;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #d7dee3;
}

.data-losses .termination__sources-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6a7883;
}

/* The reveal already supplies the separator, so drop the list's own. */
.data-losses .termination__content--hide .termination__links {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.data-losses .termination__content-title {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.35;
  color: var(--dl-title-blue);
  overflow-wrap: anywhere;
}

.data-losses .termination__acronym {
  color: #5b6b78;
  font-weight: normal;
}

.data-losses .termination__meta {
  margin: 0 0 2px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.data-losses .termination__description {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

.data-losses .termination__caveats {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid #e2e8ec;
  font-size: 13px;
  line-height: 1.45;
  color: #4a5b68;
}

.data-losses .termination__links {
  margin: 10px 0 0;
  padding: 8px 0 0 18px;
  border-top: 1px solid #d7dee3;
  font-size: 13px;
  line-height: 1.4;
}

.data-losses .termination__links li {
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.data-losses .termination__links a {
  color: var(--dl-title-blue);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.data-losses .termination__link-source {
  color: #6a7883;
}

.data-losses .partner__container {
  display: flex;
  flex-flow: row wrap; /* wrap instead of overflowing */
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 16px 32px;
  margin-top: 10px;
}

.data-losses .partner__item {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  color: rgb(91, 91, 91);
  min-width: 0;
  max-width: 100%;
}

.data-losses .partner__item:hover {
  color: rgb(32, 32, 32);
}
.data-losses .partner__item p {
  margin: 0;
  overflow-wrap: anywhere;
}
.data-losses .partner__item img {
  height: 48px;
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
}

.data-losses .ad__container {
  display: flex;
  flex-direction: row;
  gap: 25px;
  justify-content: space-around;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 130px;
  margin: 40px 0px;
}
.data-losses .ad__temp {
  display: flex;
  flex-direction: row;
  padding: 10px;
  width: 45%;
  min-width: 0;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  height: 71%;
  justify-content: flex-start;
  align-content: center;
}
.data-losses .ad__temp hr {
  width: 2px;
  height: 70%;
  border: 0;
  background-color: black;
  color: black;
}

.data-losses .ad__title {
  font-size: 19px;
  margin: 0px;
  line-height: 20px;
}
.data-losses .ad__text {
  width: 95%;
  color: #4d4d4d;
  margin: 5px;
  line-height: 20px;
  font-size: 16px;
}
.data-losses .ad__logo {
  height: 60%;
}
.data-losses .ad__temp--yel {
  background-color: #fdeb0d;
}
.data-losses .ad__temp--blue {
  background-color: #9dcdfb;
}
.data-losses .ad__temp--yel h2 {
  color: #e94f36;
}
.data-losses .ad__temp--blue h2 {
  color: var(--dl-title-blue);
}

.data-losses .usecase__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 83%;
    font-family: 'StabilGrotesk-regular';
    color: #6b6b6d;
    margin: 10px;
}

/* Paired with the rule above -- see the note in terms.css. */
.data-losses .usecase__text p {
    text-align: left;
    display: inline-block;
}

.data-losses .usecase__title {
    color: var(--color--fas-blue);
    font-family: 'StabilGrotesk-bold';
    margin: 10px;
}

.termination__content-title {
  font-size: 22px;
}
.loss-span {
  display: block;
  margin: 10px 0;
}

/* The card grid is auto-fill/minmax now, so it reflows on its own -- the old
   fixed 3/2/1-column breakpoint overrides have been removed. */
@media (max-width: 1150px) {
  .data-losses .ad__container {
    flex-direction: column;
    align-items: center;
    height: auto;
  }
  .data-losses .ad__temp {
    width: 85%;
    height: 130px;
  }
  .data-losses .ad__logo {
    height: 45%;
  }
}
@media (max-width: 650px) {
  .data-losses .ad__temp {
    padding: 15px;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    border-radius: 5px;
  }
  .data-losses .partner__container {
    flex-direction: column;
  }
}


/* --- Link out to the frozen 2025 archive (/terminations-tracker/2025) --- */
.usecase__text .usecase__text--link{
    display:inline;
}

.data-losses .archive__link {
  margin: 0 0 18px;
  width:100%;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--dl-tech-blue);
  text-align: center;
}

.data-losses .archive__link i {
  margin-right: 6px;
  color: var(--dl-title-blue);
}

.data-losses .archive__link a {
  color: var(--dl-title-blue);
  font-weight: 600;
  text-decoration: underline;
}

/* ==========================================================================
   Tracker toolbar, collapsible sections, and table view (2026 redesign)
   Behaviour lives in static/scripts/terminations-tracker.js.
   ========================================================================== */

.data-losses .tracker__toolbar {
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0 22px;
  padding: 16px 18px;
  border: 1px solid #d7dee3;
  border-radius: 6px;
  background-color: #ffffff;
}

.data-losses .tracker__controls {
  display: flex;
  flex-flow: row wrap;
  gap: 12px 16px;
  align-items: flex-end;
}

.data-losses .tracker__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 170px;
}

.data-losses .tracker__field--search {
  flex: 2 1 260px;
}

.data-losses .tracker__label {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5b6b78;
}

.data-losses .tracker__field input,
.data-losses .tracker__field select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #b9c5ce;
  border-radius: 4px;
  background-color: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--dl-tech-blue);
}

.data-losses .tracker__field input:focus,
.data-losses .tracker__field select:focus {
  outline: 2px solid var(--dl-accent);
  outline-offset: 1px;
}

.data-losses .tracker__actions {
  display: flex;
  flex-flow: row wrap;
  gap: 10px 12px;
  align-items: center;
  margin-top: 14px;
}

.data-losses .tracker__view-toggle {
  display: inline-flex;
  border: 1px solid #b9c5ce;
  border-radius: 4px;
  overflow: hidden;
}

.data-losses .tracker__view-button {
  padding: 8px 14px;
  border: 0;
  background-color: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--dl-tech-blue);
  cursor: pointer;
}

.data-losses .tracker__view-button + .tracker__view-button {
  border-left: 1px solid #b9c5ce;
}

.data-losses .tracker__view-button.is-active {
  background-color: var(--dl-tech-blue);
  color: #fff;
}

.data-losses .tracker__download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--dl-tech-blue);
  border-radius: 4px;
  background-color: var(--dl-tech-blue);
  font-size: 14px;
  color: #fff;
  text-decoration: none;
}

.data-losses .tracker__download:hover,
.data-losses .tracker__download:focus {
  background-color: var(--dl-title-blue);
  border-color: var(--dl-title-blue);
}

.data-losses .tracker__reset {
  padding: 8px 12px;
  border: 1px solid #b9c5ce;
  border-radius: 4px;
  background-color: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--dl-title-blue);
  cursor: pointer;
}

.data-losses .tracker__count {
  margin: 12px 0 0;
  font-size: 13px;
  color: #5b6b78;
}

/* --- Collapsible sections --- */

.data-losses .tracker__section {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 18px;
  border: 1px solid #d7dee3;
  border-radius: 6px;
  background-color: #fff;
}

.data-losses .tracker__section-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* Hide the native disclosure marker in both engines. */
.data-losses .tracker__section-summary::-webkit-details-marker {
  display: none;
}
.data-losses .tracker__section-summary::marker {
  content: "";
}

.data-losses .tracker__section-summary:focus-visible {
  outline: 2px solid var(--dl-accent);
  outline-offset: -2px;
}

.data-losses .tracker__section-heading {
  font-size: 20px;
  font-weight: bold;
  color: var(--dl-title-blue);
}

.data-losses .tracker__section-count {
  padding: 2px 9px;
  border-radius: 999px;
  background-color: #eef3f6;
  font-size: 13px;
  color: #4a5b68;
}

.data-losses .tracker__chevron {
  margin-left: auto;
  color: #6a7883;
  transition: transform 0.2s ease;
}

.data-losses .tracker__section[open] .tracker__chevron {
  transform: rotate(180deg);
}

.data-losses .tracker__section-body {
  padding: 0 18px 18px;
}

.data-losses .tracker__empty,
.data-losses .tracker__no-results {
  width: 100%;
  margin: 8px 0;
  font-size: 14px;
  color: #5b6b78;
}

.data-losses .tracker__no-results button {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--dl-title-blue);
  text-decoration: underline;
  cursor: pointer;
}

/* --- Table view --- */

.data-losses .tracker__table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.data-losses .tracker__table {
  width: 100%;
  /* Below this the narrow columns get crushed and short words break mid-word;
     .tracker__table-wrap scrolls horizontally instead. */
  min-width: 900px;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
}

.data-losses .tracker__table th,
.data-losses .tracker__table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8ec;
  vertical-align: top;
  /* NOT overflow-wrap:anywhere -- that breaks inside short words, turning
     "Environment" into "Environme / nt". Only the sources column, which holds
     raw URLs, opts into breaking mid-word (see nth-child(5) below). */
  overflow-wrap: break-word;
}

/* Column sizing. Percentages keep the ratios stable as the table scrolls,
   and stop the browser handing Data Type a sliver of width because the
   Sources column is greedy. Order: Dataset, Agency, Data type, Status,
   Sources -- the first cell in each body row is a <th scope="row">, hence
   the universal child selector rather than td:nth-child. */
.data-losses .tracker__table tr > *:nth-child(1) {
  width: 26%; /* Dataset -- names run to 200 chars, so break-word applies */
}

/* Agency / Data type. The longest unbreakable word across both is 14
   characters ("Transportation"), so mid-word breaking is never needed:
   overflow-wrap:normal stops "SAMHSA" splitting to "SAMHS / A" and
   "Environment" to "Environmen / t". Auto table layout widens a column to fit
   its longest word, and multi-word values still wrap at spaces. */
.data-losses .tracker__table tr > *:nth-child(2),
.data-losses .tracker__table tr > *:nth-child(3) {
  overflow-wrap: normal;
  word-break: normal;
}
.data-losses .tracker__table tr > *:nth-child(2) {
  width: 9%;
}
.data-losses .tracker__table tr > *:nth-child(3) {
  width: 11%;
}
/* Caveats -- prose, up to ~510 chars, so it needs real width and keeps the
   inherited break-word. Replaced the Status column, which was much narrower. */
.data-losses .tracker__table tr > *:nth-child(4) {
  width: 28%;
  line-height: 1.45;
}
.data-losses .tracker__table tr > *:nth-child(5) {
  width: 26%;
  overflow-wrap: anywhere; /* raw URLs genuinely need mid-word breaking */
}

.data-losses .tracker__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--dl-tech-blue);
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
}

.data-losses .tracker__table tbody tr:nth-child(even) {
  background-color: #f7fafb;
}

.data-losses .tracker__table tbody th {
  font-weight: bold;
  color: var(--dl-title-blue);
  min-width: 220px;
}

.data-losses .tracker__table-description {
  display: block;
  margin-top: 4px;
  font-weight: normal;
  font-size: 13px;
  line-height: 1.4;
  color: #4a5b68;
}

.data-losses .tracker__table .termination__links {
  margin: 0;
  padding: 0 0 0 16px;
  border-top: 0;
  min-width: 220px;
}

/* --- Narrow screens --- */

@media (max-width: 900px) {
  .data-losses .tracker__section-body {
    padding: 0 12px 14px;
  }
  .data-losses .tracker__section-summary {
    padding: 12px 14px;
  }
  .data-losses .tracker__section-heading {
    font-size: 17px;
  }
}

@media (max-width: 600px) {
  .data-losses .tracker__field,
  .data-losses .tracker__field--search {
    flex: 1 1 100%;
  }
  .data-losses .tracker__actions {
    align-items: stretch;
  }
  .data-losses .tracker__view-toggle,
  .data-losses .tracker__download,
  .data-losses .tracker__reset {
    justify-content: center;
    text-align: center;
  }
}

@media print {
  .data-losses .tracker__toolbar {
    display: none;
  }
  /* Force every section open so a printed page is complete. */
  .data-losses .tracker__section-body {
    display: block !important;
  }
}

/* --- View toggling ---------------------------------------------------------
   The [hidden] attribute only sets display:none through the UA stylesheet, so
   any author rule with real specificity beats it. .termination__container is
   display:grid, which meant the card grid stayed visible after switching to
   table view. This makes hidden win wherever the tracker uses it: the two view
   panels, filtered-out rows, the toolbar before JS boots, and the reset button.
   -------------------------------------------------------------------------- */
.data-losses [hidden] {
  display: none !important;
}

/* --- "Last updated" line + email in the submission house ad --- */

.data-losses .tracker__updated {
  margin: 0 0 10px;
  font-size: 13px;
  color: #6a7883;
}

.data-losses .tracker__updated time {
  font-weight: bold;
  color: var(--dl-tech-blue);
}

.data-losses .ad__email {
  font-weight: bold;
  white-space: nowrap;
}