/* ==========================================================================
   „Jednou a dost" — demonstrátor životních událostí
   Aplikační vrstva nad design systémem gov.cz a nad portal-obcana.css.
   Barvy, mezery, typografie a rádiusy výhradně přes tokeny design systému.
   Prefix .dm-* = demonstrátor.
   ========================================================================== */

/* ---------- hlavička: ukázková osoba ---------- */

.dm-persona {
  display: flex;
  gap: var(--spacing-s);
  align-items: center;
  margin: 0 0 0 auto;
  padding: var(--spacing-xs) var(--spacing-s-nudge);
  font-size: var(--font-size-body-s);
  line-height: var(--height-line-m);
  color: var(--text-secondary);
  background-color: var(--background-block-secondary);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--corner-radius-s);
}

.dm-persona__icon {
  flex: 0 0 auto;
  width: var(--icon-size-l);
  height: var(--icon-size-l);
  color: var(--icon-neutral);
}

.dm-persona__label {
  display: block;
  font-size: var(--font-size-body-xs);
  color: var(--text-tertiary);
}

.dm-cp-place {
  margin: 0;
  font-size: var(--font-size-body-s);
  color: var(--text-secondary);
}

.dm-header--cp {
  border-bottom: var(--spacing-2xs) solid var(--background-secondary);
}

/* ---------- stránka ---------- */

.dm-main {
  padding: var(--spacing-xl) 0 var(--spacing-8xl);
}

.dm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--po-aside-width);
  gap: var(--spacing-xl);
  align-items: start;
}

@media (max-width: 63.99em) {
  .dm-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dm-panel {
  padding: var(--spacing-l);
  background-color: var(--background-block-primary);
  border-radius: var(--corner-radius-s);
}

.dm-panel + .dm-panel {
  margin-top: var(--spacing-l);
}

.dm-aside {
  position: sticky;
  top: calc(var(--po-header-height) + var(--spacing-l));
  display: flex;
  flex-direction: column;
  gap: var(--spacing-l);
}

@media (max-width: 63.99em) {
  .dm-aside {
    position: static;
  }
}

.dm-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-s);
  margin: 0 0 var(--spacing-m);
  padding: 0;
  font-size: var(--font-size-body-s);
  list-style: none;
  color: var(--text-tertiary);
}

.dm-crumbs > li::before {
  content: none;
}

.dm-crumbs > li + li::before {
  content: "/";
  display: inline;
  margin-right: var(--spacing-s);
  color: var(--text-tertiary);
}

.dm-lead {
  max-width: 44rem;
  margin: 0 0 var(--spacing-l);
  font-size: var(--font-size-body-l);
  color: var(--text-secondary);
}

/* ---------- domovská stránka: vstup podle situace ---------- */

.dm-hero {
  margin-bottom: var(--spacing-l);
  padding: var(--spacing-xl);
  background-color: var(--background-block-primary);
  border-top: var(--spacing-xs) solid var(--background-primary);
  border-radius: var(--corner-radius-s);
}

.dm-hero__title {
  margin: 0 0 var(--spacing-s);
}

.dm-hero__lead {
  max-width: 40rem;
  margin: 0 0 var(--spacing-l);
  color: var(--text-secondary);
}

.dm-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 63.99em) {
  .dm-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 29.99em) {
  .dm-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dm-tiles > li::before {
  content: none;
}

.dm-tile {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  height: 100%;
  padding: var(--spacing-m);
  color: var(--text-primary);
  text-decoration: none;
  background-color: var(--background-block-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--corner-radius-s);
}

.dm-tile:hover {
  border-color: var(--background-primary);
  background-color: var(--background-primary-subtlest);
}

.dm-tile:focus-visible {
  outline: var(--spacing-2xs) solid var(--status-focus);
  outline-offset: var(--spacing-2xs);
}

.dm-tile__icon {
  width: var(--icon-size-5xl);
  height: var(--icon-size-5xl);
  color: var(--icon-default);
}

.dm-tile__title {
  font-size: var(--font-size-body-m);
  font-weight: 500;
}

.dm-tile__text {
  margin: 0;
  font-size: var(--font-size-body-s);
  color: var(--text-secondary);
}

.dm-tile__foot {
  margin-top: auto;
  padding-top: var(--spacing-s);
}

.dm-tile--muted .dm-tile__icon {
  color: var(--icon-neutral);
}

/* ---------- záhlaví případu ---------- */

.dm-case {
  margin-bottom: var(--spacing-l);
  padding: var(--spacing-xl);
  color: var(--text-white);
  background-color: var(--background-primary);
  border-radius: var(--corner-radius-s);
}

.dm-case__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-m);
  align-items: center;
}

.dm-case__icon {
  width: var(--icon-size-5xl);
  height: var(--icon-size-5xl);
  color: var(--icon-on-bold-white);
}

.dm-case__title {
  margin: 0;
  font-size: var(--font-size-headline-l);
  line-height: 130%;
  font-weight: 500;
  color: var(--text-white);
}

.dm-case__sub {
  margin: var(--spacing-xs) 0 0;
  font-size: var(--font-size-body-s);
  color: var(--text-white);
  opacity: 0.85;
}

.dm-case__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-l);
  margin-top: var(--spacing-l);
  padding-top: var(--spacing-l);
  border-top: 1px solid var(--background-primary-subtle);
}

.dm-case__meta dt {
  font-size: var(--font-size-body-xs);
  color: var(--text-white);
  opacity: 0.75;
}

.dm-case__meta dd {
  margin: var(--spacing-2xs) 0 0;
  font-size: var(--font-size-body-m);
  font-weight: 500;
  color: var(--text-white);
}

.dm-case__meta a {
  color: var(--text-white);
}

/* ---------- „jedná za" ---------- */

.dm-repre {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-s);
  align-items: center;
  margin-bottom: var(--spacing-l);
  padding: var(--spacing-s-nudge) var(--spacing-m);
  font-size: var(--font-size-body-s);
  background-color: var(--background-block-primary);
  border: 1px solid var(--border-subtle);
  border-left: var(--spacing-xs) solid var(--background-secondary);
  border-radius: var(--corner-radius-s);
}

.dm-repre__icon {
  width: var(--icon-size-l);
  height: var(--icon-size-l);
  color: var(--icon-neutral);
}

/* ---------- souhrn / metriky ---------- */

.dm-summary {
  padding: var(--spacing-m);
  background-color: var(--background-block-primary);
  border-radius: var(--corner-radius-s);
}

.dm-summary__title {
  margin: 0 0 var(--spacing-m);
  font-size: var(--font-size-body-m);
  font-weight: 500;
}

.dm-counts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  margin: 0 0 var(--spacing-m);
}

.dm-count {
  display: flex;
  gap: var(--spacing-s);
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--font-size-body-s);
  color: var(--text-secondary);
}

.dm-count__value {
  font-size: var(--font-size-headline-s);
  font-weight: 500;
  color: var(--text-primary);
}

.dm-metric {
  padding: var(--spacing-m);
  background-color: var(--background-primary-subtlest);
  border-radius: var(--corner-radius-s);
}

.dm-metric__value {
  display: block;
  font-size: var(--font-size-display-s);
  line-height: 130%;
  font-weight: 500;
  color: var(--text-primary-color);
}

.dm-metric__label {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-body-s);
  color: var(--text-secondary);
}

/* ---------- pásma: zajistil / nabízíme / potřebujeme ---------- */

.dm-band {
  margin-bottom: var(--spacing-l);
  background-color: var(--background-block-primary);
  border-radius: var(--corner-radius-s);
  overflow: hidden;
}

.dm-band__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-s) var(--spacing-m);
  align-items: baseline;
  padding: var(--spacing-m) var(--spacing-l);
  border-left: var(--spacing-s) solid var(--border-subtle);
}

.dm-band--done .dm-band__head {
  border-left-color: var(--status-success);
  background-color: var(--background-status-success-subtlest);
}

.dm-band--offer .dm-band__head {
  border-left-color: var(--background-primary);
  background-color: var(--background-primary-subtlest);
}

.dm-band--todo .dm-band__head {
  border-left-color: var(--status-warning);
  background-color: var(--background-status-warning-subtlest);
}

.dm-band__title {
  margin: 0;
  font-size: var(--font-size-headline-m);
  font-weight: 500;
}

.dm-band__count {
  font-size: var(--font-size-body-s);
  color: var(--text-secondary);
}

.dm-band__note {
  flex: 1 0 100%;
  margin: 0;
  font-size: var(--font-size-body-s);
  color: var(--text-secondary);
}

.dm-band__body {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-band__body > li::before {
  content: none;
}

.dm-band__body > li + li {
  border-top: 1px solid var(--border-subtlest);
}

/* ---------- položka ---------- */

.dm-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--spacing-m);
  align-items: start;
  padding: var(--spacing-m) var(--spacing-l);
}

@media (max-width: 47.99em) {
  .dm-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dm-item__side {
    grid-column: 2;
  }
}

.dm-item__mark {
  width: var(--icon-size-2xl);
  height: var(--icon-size-2xl);
  color: var(--icon-neutral);
}

.dm-band--done .dm-item__mark {
  color: var(--icon-success);
}

.dm-band--todo .dm-item__mark {
  color: var(--icon-warning);
}

.dm-item__title {
  margin: 0;
  font-size: var(--font-size-body-m);
  font-weight: 500;
}

.dm-item__meta {
  margin: var(--spacing-xs) 0 0;
  font-size: var(--font-size-body-s);
  color: var(--text-secondary);
}

.dm-item__side {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  align-items: flex-end;
  text-align: right;
}

.dm-item__amount {
  font-size: var(--font-size-headline-s);
  font-weight: 500;
  white-space: nowrap;
}

.dm-item--flat {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- nabídka s výběrem ---------- */

.dm-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spacing-m);
  cursor: pointer;
}

.dm-check__input {
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
  margin: var(--spacing-2xs) 0 0;
  accent-color: var(--background-primary);
}

.dm-radios {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
  margin: 0 0 var(--spacing-l);
  padding: 0;
  list-style: none;
}

.dm-radios > li::before {
  content: none;
}

.dm-radio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--spacing-m);
  align-items: center;
  padding: var(--spacing-m);
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  border-radius: var(--corner-radius-s);
}

.dm-radio:hover {
  border-color: var(--background-primary);
}

.dm-radio__input {
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
  accent-color: var(--background-primary);
}

.dm-radio__input:checked ~ * {
  color: var(--text-primary);
}

.dm-radio:has(.dm-radio__input:checked) {
  border-color: var(--background-primary);
  background-color: var(--background-primary-subtlest);
}

.dm-radio__title {
  font-weight: 500;
}

.dm-radio__note {
  margin: var(--spacing-2xs) 0 0;
  font-size: var(--font-size-body-s);
  color: var(--text-secondary);
}

.dm-radio__amount {
  font-size: var(--font-size-headline-s);
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- akční lišta ---------- */

.dm-actionbar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-m);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-l);
  padding: var(--spacing-m) var(--spacing-l);
  background-color: var(--background-block-primary);
  border-top: 1px solid var(--border-subtle);
  border-radius: var(--corner-radius-s);
  box-shadow: 0 calc(-1 * var(--spacing-xs)) var(--spacing-m) var(--background-overlay-transparent);
}

.dm-actionbar__text {
  margin: 0;
  font-size: var(--font-size-body-s);
  color: var(--text-secondary);
}

/* ---------- poznámky ---------- */

.dm-note {
  margin: 0 0 var(--spacing-l);
  padding: var(--spacing-m) var(--spacing-l);
  font-size: var(--font-size-body-s);
  color: var(--text-secondary);
  background-color: var(--background-block-secondary);
  border-left: var(--spacing-xs) solid var(--border-subtle);
  border-radius: var(--corner-radius-xs);
}

.dm-note strong {
  color: var(--text-primary);
}

.dm-note--info {
  background-color: var(--background-primary-subtlest);
  border-left-color: var(--background-primary);
}

.dm-note--warn {
  background-color: var(--background-status-warning-subtlest);
  border-left-color: var(--status-warning);
}

.dm-note--success {
  background-color: var(--background-status-success-subtlest);
  border-left-color: var(--status-success);
}

.dm-note p {
  margin: 0;
}

.dm-note p + p {
  margin-top: var(--spacing-s);
}

/* ---------- tabulka ---------- */

.dm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-body-s);
}

.dm-table caption {
  margin-bottom: var(--spacing-s);
  font-size: var(--font-size-body-s);
  color: var(--text-tertiary);
  text-align: left;
}

.dm-table th,
.dm-table td {
  padding: var(--spacing-s-nudge) var(--spacing-m);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-subtlest);
}

.dm-table th {
  font-weight: 500;
  color: var(--text-secondary);
  background-color: var(--background-block-secondary);
}

.dm-table td strong {
  font-weight: 500;
}

.dm-table--wrap {
  display: block;
  overflow-x: auto;
}

/* ---------- řízení po odeslání ---------- */

.dm-cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-m);
  margin: 0 0 var(--spacing-l);
  padding: 0;
  list-style: none;
}

@media (max-width: 47.99em) {
  .dm-cases {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dm-cases > li::before {
  content: none;
}

.dm-proc {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  height: 100%;
  padding: var(--spacing-m);
  background-color: var(--background-block-primary);
  border: 1px solid var(--border-subtle);
  border-top: var(--spacing-xs) solid var(--background-primary);
  border-radius: var(--corner-radius-s);
}

.dm-proc__org {
  font-size: var(--font-size-body-s);
  color: var(--text-secondary);
}

.dm-proc__id {
  font-size: var(--font-size-body-m);
  font-weight: 500;
}

.dm-proc__what {
  margin: 0;
  font-size: var(--font-size-body-s);
}

.dm-proc__foot {
  margin-top: auto;
  padding-top: var(--spacing-s);
  font-size: var(--font-size-body-xs);
  color: var(--text-tertiary);
  border-top: 1px solid var(--border-subtlest);
}

/* ---------- formulář ohlášení ---------- */

.dm-field {
  margin-bottom: var(--spacing-xl);
}

.dm-field__label {
  display: block;
  margin-bottom: var(--spacing-s);
  font-size: var(--font-size-body-m);
  font-weight: 500;
}

.dm-field__help {
  margin: 0 0 var(--spacing-m);
  font-size: var(--font-size-body-s);
  color: var(--text-secondary);
}

.dm-input {
  width: 100%;
  max-width: 22rem;
  height: var(--height-component-l);
  padding: 0 var(--spacing-m);
  font-family: var(--font-family);
  font-size: var(--font-size-body-m);
  color: var(--text-primary);
  background-color: var(--background-block-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--corner-radius-xs);
}

.dm-input:focus-visible {
  outline: var(--spacing-2xs) solid var(--status-focus);
  outline-offset: var(--spacing-2xs);
}

.dm-switch {
  display: flex;
  gap: var(--spacing-m);
  align-items: center;
  font-size: var(--font-size-body-s);
  cursor: pointer;
}

.dm-switch input {
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
  accent-color: var(--background-primary);
}

/* ---------- widget: proaktivní nabídka v upozorněních ---------- */

.dm-offer {
  padding: var(--spacing-m);
  border-bottom: 1px solid var(--border-subtlest);
}

.dm-offer:last-child {
  border-bottom: 0;
}

.dm-offer__head {
  display: flex;
  gap: var(--spacing-s);
  align-items: center;
  margin-bottom: var(--spacing-s);
}

.dm-offer__icon {
  width: var(--icon-size-2xl);
  height: var(--icon-size-2xl);
  color: var(--icon-default);
}

.dm-offer__title {
  margin: 0;
  font-size: var(--font-size-body-m);
  font-weight: 500;
}

.dm-offer__text {
  margin: 0 0 var(--spacing-s);
  font-size: var(--font-size-body-s);
  color: var(--text-secondary);
}

.dm-offer__amount {
  font-size: var(--font-size-headline-s);
  font-weight: 500;
  color: var(--text-status-success);
}

/* ---------- dialog ---------- */

.dm-dialog {
  width: min(34rem, calc(100% - var(--spacing-xl)));
  padding: 0;
  color: var(--text-primary);
  background-color: var(--background-block-primary);
  border: 0;
  border-radius: var(--corner-radius-s);
}

.dm-dialog::backdrop {
  background-color: var(--background-overlay-page);
}

.dm-dialog__head {
  padding: var(--spacing-l);
  border-bottom: 1px solid var(--border-subtlest);
}

.dm-dialog__title {
  margin: 0;
  font-size: var(--font-size-headline-m);
  font-weight: 500;
}

.dm-dialog__body {
  padding: var(--spacing-l);
}

.dm-dialog__list {
  margin: 0 0 var(--spacing-l);
  padding: 0;
  list-style: none;
}

.dm-dialog__list > li::before {
  content: none;
}

.dm-dialog__list > li {
  padding: var(--spacing-s) 0;
  font-size: var(--font-size-body-s);
  border-bottom: 1px solid var(--border-subtlest);
}

.dm-dialog__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-m);
  padding: var(--spacing-l);
  background-color: var(--background-block-secondary);
}

/* ---------- historie / časová osa ---------- */

.dm-log {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-log > li::before {
  content: none;
}

.dm-log > li {
  padding: var(--spacing-s-nudge) 0 var(--spacing-s-nudge) var(--spacing-l);
  font-size: var(--font-size-body-s);
  border-left: 1px solid var(--border-subtle);
  position: relative;
}

.dm-log > li::after {
  content: "";
  position: absolute;
  top: var(--spacing-m);
  left: calc(-1 * var(--spacing-xs));
  width: var(--spacing-s-nudge);
  height: var(--spacing-s-nudge);
  background-color: var(--background-primary);
  border-radius: var(--corner-radius-l);
}

.dm-log time {
  display: block;
  color: var(--text-tertiary);
  font-size: var(--font-size-body-xs);
}

/* ==========================================================================
   Vrstva pro zadavatele — prezentační lešení, NENÍ součástí návrhu produktu
   ========================================================================== */

.dm-dev-toggle {
  position: fixed;
  right: var(--spacing-l);
  bottom: var(--spacing-l);
  z-index: 30;
  display: flex;
  gap: var(--spacing-s);
  align-items: center;
  height: var(--height-component-l);
  padding: 0 var(--spacing-m);
  font-family: var(--font-family);
  font-size: var(--font-size-body-s);
  color: var(--text-white);
  cursor: pointer;
  background-color: var(--background-neutral-primary);
  border: 0;
  border-radius: var(--corner-radius-s);
}

.dm-dev-toggle__icon {
  width: var(--icon-size-l);
  height: var(--icon-size-l);
  color: var(--icon-on-bold-white);
}

.dm-dev-toggle:hover {
  background-color: var(--background-neutral-secondary);
}

.dm-dev-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: min(23rem, 100%);
  overflow-y: auto;
  color: var(--text-white);
  background-color: var(--background-neutral-primary);
  transform: translateX(100%);
  transition: transform 0.15s ease-out;
}

.dm-dev .dm-dev-panel {
  transform: translateX(0);
}

.dm-dev-panel__head {
  display: flex;
  gap: var(--spacing-m);
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-m) var(--spacing-l);
  border-bottom: 1px solid var(--background-neutral-secondary);
}

.dm-dev-panel__title {
  margin: 0;
  font-size: var(--font-size-body-m);
  font-weight: 500;
}

.dm-dev-panel__close {
  padding: 0;
  color: var(--text-white);
  cursor: pointer;
  background: none;
  border: 0;
}

.dm-dev-panel__close-icon {
  width: var(--icon-size-l);
  height: var(--icon-size-l);
}

.dm-dev-panel__body {
  padding: var(--spacing-l);
}

.dm-dev-panel__note,
.dm-dev-panel__hint {
  margin: 0 0 var(--spacing-l);
  font-size: var(--font-size-body-xs);
  color: var(--text-white);
  opacity: 0.75;
}

.dm-dev-panel__note strong {
  opacity: 1;
}

.dm-dev-panel__subtitle {
  margin: var(--spacing-l) 0 var(--spacing-s);
  font-size: var(--font-size-body-xs);
  text-transform: none;
  color: var(--text-white);
  opacity: 0.6;
}

.dm-dev-facts {
  margin: 0;
  font-size: var(--font-size-body-s);
}

.dm-dev-facts dt {
  margin-top: var(--spacing-m);
  font-size: var(--font-size-body-xs);
  opacity: 0.6;
}

.dm-dev-facts dd {
  margin: var(--spacing-2xs) 0 0;
}

.dm-dev-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: dmstep;
}

.dm-dev-steps > li::before {
  content: none;
}

.dm-dev-steps > li {
  counter-increment: dmstep;
}

.dm-dev-steps a {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--spacing-s);
  padding: var(--spacing-s) var(--spacing-s);
  font-size: var(--font-size-body-s);
  color: var(--text-white);
  text-decoration: none;
  border-radius: var(--corner-radius-xs);
}

.dm-dev-steps a:hover {
  background-color: var(--background-neutral-secondary);
}

.dm-dev-steps a > span {
  font-size: var(--font-size-body-xs);
  opacity: 0.6;
}

.dm-dev-steps a strong {
  color: var(--text-status-warning);
  font-weight: 500;
}

.dm-dev-steps > li[aria-current="step"] a {
  background-color: var(--background-neutral-secondary);
  box-shadow: inset var(--spacing-2xs) 0 0 var(--background-secondary);
}

.dm-dev-missing {
  margin: 0;
  padding-left: var(--spacing-l);
  font-size: var(--font-size-body-s);
}

.dm-dev-missing > li {
  margin-bottom: var(--spacing-s);
}

/* inline anotace uvnitř stránky — viditelné jen se zapnutou vrstvou */

.dm-dev-note {
  display: none;
}

.dm-dev .dm-dev-note {
  display: block;
  margin: 0 0 var(--spacing-l);
  padding: var(--spacing-m) var(--spacing-l);
  font-size: var(--font-size-body-s);
  color: var(--text-white);
  background-color: var(--background-neutral-primary);
  border-left: var(--spacing-xs) solid var(--background-secondary);
  border-radius: var(--corner-radius-xs);
}

.dm-dev .dm-band .dm-dev-note,
.dm-dev .dm-panel .dm-dev-note {
  margin: var(--spacing-m) var(--spacing-l) var(--spacing-l);
}

.dm-dev-note p {
  margin: 0;
}

.dm-dev-note p + p {
  margin-top: var(--spacing-s);
}

.dm-dev-note strong {
  color: var(--text-status-warning);
  font-weight: 500;
}

.dm-dev-note__label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-body-xs);
  opacity: 0.6;
}

@media (max-width: 29.99em) {
  .dm-dev-toggle__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
}