/* Change colour at the half-second mark. Text and controls stay fully visible. */
:root {
  --v82-alert-animation: none;
}
@media screen and (prefers-reduced-motion: no-preference) {
  :root { --v82-alert-animation: v82-alert-blink 1s steps(1, end) infinite; }
}
body.motion-paused { --v82-alert-animation: none; }

.v81-alert-action, .v54-report-due {
  --alert-on: #ffb727;
  --alert-off: #fffaf0;
  --alert-edge: #8c4700;
  --alert-text: #402608;
}
.v81-alert-danger, .pill.v27-finance-alert, .v27-sub-attention {
  --alert-on: #ff8e94;
  --alert-off: #fff5f4;
  --alert-edge: #ac1736;
  --alert-text: #490c1c;
}
:is(body[data-portal], #modal) :is(
  .v81-alert-action, .v81-alert-danger, .v54-report-due,
  .pill.v27-finance-alert, .v27-sub-attention
) {
  --alert-fill: var(--alert-on);
  --alert-ink: var(--alert-text);
  --alert-off-text: var(--alert-text);
  /* Some legacy tabs and filters set these colours with !important. */
  background-image: none !important;
  background-color: var(--alert-fill) !important;
  color: var(--alert-ink) !important;
  border-color: var(--alert-edge);
  box-shadow: inset 4px 0 var(--alert-edge);
  transition: none;
  animation: var(--v82-alert-animation);
}
@keyframes v82-alert-blink {
  0%, 100% {
    --alert-fill: var(--alert-on);
    --alert-ink: var(--alert-text);
  }
  50% {
    --alert-fill: var(--alert-off);
    --alert-ink: var(--alert-off-text);
  }
}
:is(body[data-portal], #modal) :is(.nav-item, [data-action="menu-open"]):is(.v81-alert-action, .v81-alert-danger) {
  --alert-off: #263843;
  --alert-off-text: #fff;
}
body[data-portal] .sidebar .nav-item:is(.v81-alert-action,.v81-alert-danger) .icon { color: inherit; }
body[data-portal] .sidebar .nav-item.active:is(.v81-alert-action,.v81-alert-danger) {
  box-shadow: inset 6px 0 var(--alert-edge);
  font-weight: 750;
}
body[data-portal] tr:is(.v81-alert-action,.v81-alert-danger) > td { background-color: transparent; }
body[data-portal] button.v28-mail-mini { text-align: start; cursor: pointer; font: inherit; }

/* An enclosing card supplies the blink for its own labels and countdown. */
#modal .v81-alert-danger .v78-clock-light { animation: none; }
#modal [data-clock-card].v81-alert-danger > [data-clock-count] {
  animation: none;
  background: transparent !important;
  box-shadow: none;
}
.v81-device-alert-summary {
  display: inline-block;
  margin-inline-start: .4em;
  padding: .16em .6em;
  border: 1px solid;
  border-radius: 1em;
  font-size: .73em;
  vertical-align: middle;
}
.v80-fold[aria-expanded="true"] .v81-device-alert-summary { display: none; }

@media (forced-colors: active) {
  :root { --v82-alert-animation: none; }
  :is(body[data-portal], #modal) :is(
    .v81-alert-action, .v81-alert-danger, .v54-report-due,
    .pill.v27-finance-alert, .v27-sub-attention
  ) { border-inline-start: 4px solid Highlight; }
}

.v64-record-grid > .v82-reuse {
  grid-column: 1 / -1;
  display: grid;
  gap: .65rem;
  min-width: 0;
  padding: 1rem;
  overflow-wrap: anywhere;
}
.v82-reuse :is(h3,p) { margin: 0; }
.v82-reuse summary { cursor: pointer; font-weight: 700; }
.v82-reuse li + li { margin-top: .3rem; }
.v82-reuse .cell-actions { display: flex; flex-wrap: wrap; gap: .5rem; }