/* ------------------------------------------------------------------------
   Public Comments page — document card grid + document-viewer modal.
   Uses the design tokens and .btn / .modal-overlay / .modal-card patterns
   already defined in style.css; only page-specific styles live here.
   ------------------------------------------------------------------------ */

.public-comments-intro h1 { font-size: var(--text-hero); }
#comments-heading { font-size: var(--text-2xl); }

.public-comments-lead {
  max-width: 68ch;
  margin-top: 1rem;
  font-size: var(--text-md);
  color: var(--ink-soft);
}
.public-comments-note {
  max-width: 68ch;
  margin-top: 0.75rem;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* ---- Search ---- */
.public-comments-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.75rem;
}
.public-comments-list-header h2 { margin-bottom: 0; }
.public-comments-search { flex: 1 1 auto; min-width: 240px; max-width: 420px; }
.public-comments-search-field { position: relative; width: 100%; }
.public-comments-search input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 34px 10px 12px;
  background: var(--bg);
  outline: none;
}
.public-comments-search input:focus { border-color: var(--primary); }
.public-comments-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.public-comments-search-clear {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-md);
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.public-comments-search-clear[hidden] { display: none; }
.public-comments-search-count {
  margin-top: 0.5rem;
  font-size: var(--text-xs);
  color: var(--muted);
}

/* ---- Document card grid ---- */
.public-comments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.public-comments-empty { color: var(--muted); }

.doc-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.doc-card[hidden] { display: none; }
.doc-card-title { font-size: var(--text-md); margin-bottom: 0.3rem; }
.doc-card-meta {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.doc-card-desc {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0;
}
.doc-card-view {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1rem;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}
.doc-card-view:hover { text-decoration: underline; }

/* ---- Document-viewer modal ---- */
.doc-modal-card {
  max-width: 900px;
  width: 100%;
  height: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.doc-modal-header { padding-right: 2rem; flex: none; }
.doc-modal-header h3 { margin-bottom: 0.25rem; }
.doc-modal-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: 1rem;
}
.doc-modal-open-link {
  flex: none;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}
.doc-modal-open-link:hover { text-decoration: underline; }

.doc-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.doc-modal-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.doc-modal-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* ---- About-documents section ---- */
.public-comments-about p { color: var(--ink-soft); }
.public-comments-about p + p { margin-top: 0.75rem; }

@media (max-width: 720px) {
  .public-comments-intro h1 { font-size: var(--text-3xl); }
  .public-comments-list-header { flex-direction: column; align-items: stretch; gap: 1rem; }
  .public-comments-search { max-width: none; }
  .public-comments-grid { grid-template-columns: 1fr; }
  .doc-modal-card { max-height: 95vh; padding: 1.5rem 1.25rem 1.25rem; }
  .doc-modal-meta { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
}