.nav-group {
  margin: 0 0 8px;
}

.nav-group > summary {
  padding: 6px 12px;
  color: var(--ink-2);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  list-style: none;
}

.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: "⌄"; float: right; }
.nav-group:not([open]) > summary::after { content: "›"; }
.nav-group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-group-links { display: grid; gap: 2px; }

.dashboard-announcement-preview.unread,
.announcement-card.unread {
  border-left: 3px solid var(--accent);
}

.content-badge,
.content-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  color: var(--accent);
  background: var(--accent-soft);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.announcement-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Search hides non-matching cards; .panel sets a display mode, so the hidden
   attribute needs an explicit rule to win. */
.announcement-card[hidden] { display: none !important; }
.announcement-tools .search-field { width: min(100%, 620px); max-width: 620px; }
.announcement-tools .search-field input { width: 100%; }
.announcement-filter-empty { max-width: 1400px; margin: 0 auto; }

.announcement-edit { margin-top: 12px; }
.announcement-edit > summary {
  padding: 4px 0;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.announcement-edit > summary::-webkit-details-marker { display: none; }
.announcement-edit > summary::before { margin-right: 6px; content: "\270E"; }
.announcement-edit > summary:hover { color: var(--ink); }
.announcement-edit-form { display: grid; gap: 10px; margin-top: 10px; }
.announcement-edit-form > label { display: grid; gap: 4px; color: var(--ink-2); font-size: .8125rem; font-weight: 600; }
.announcement-edit-form .button { justify-self: start; }

.check-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* The sizing, the shape and the focus ring are the drawn tick box in app.css
   now, which every checkbox and radio in the app gets; a row only has to place
   one beside its label. */

.policy-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
}

.policy-metadata span { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.policy-metadata strong { margin-right: 5px; color: var(--ink); }
.policy-reader-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.policy-acknowledgement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
  border-left: 3px solid var(--warn);
  color: var(--warn);
  background: var(--warn-soft);
  font-weight: 600;
}
.policy-acknowledgement.complete { border-left-color: var(--positive); color: var(--positive); background: var(--positive-soft); }

/* Kept only because the selectors exist; the tokens above already carry dark
   mode, so these repeat the light rule rather than overriding it. */
html[data-theme="dark"] .content-badge,
html[data-theme="dark"] .content-status { color: var(--accent); background: var(--accent-soft); }
html[data-theme="dark"] .policy-acknowledgement { color: var(--warn); background: var(--warn-soft); }
html[data-theme="dark"] .policy-acknowledgement.complete { color: var(--positive); background: var(--positive-soft); }

@media (max-width: 700px) {
  .announcement-options { grid-template-columns: 1fr; }
  .policy-reader-actions,
  .policy-reader-actions .button { width: 100%; }
  .policy-acknowledgement { align-items: stretch; flex-direction: column; }
  .policy-acknowledgement .button { width: 100%; }
  .policy-pdf-frame { height: calc(100dvh - 230px); min-height: 430px; }
}