/* CTRN Data Dictionary — page styles */

* { box-sizing: border-box; }

html {
    background: #f5f7fa;
    font-size: 62.5%;
    margin: 0;
}

body {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 60px;
    background: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #1a2332;
    cursor: default;
}

h1 {
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 24px 0 12px;
    color: #1a2332;
}

.dd-intro {
    font-size: 1.4rem;
    color: #4a5568;
    line-height: 1.6;
    margin: 0 0 20px;
}

a:link, a:visited {
    color: #2a6f97;
    text-decoration: none;
}

a:hover {
    color: #1f547a;
    text-decoration: underline;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #f1f4f8;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.92em;
    color: #2a6f97;
}

/* Sticky filter bar */

.dd-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 18px;
    background: white;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    position: sticky;
    top: 12px;
    z-index: 10;
}

.dd-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.dd-filters-row > * {
    flex-shrink: 0;
}

/* Top nav */

.dd-nav {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 10px 18px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e3e8ee;
}

.dd-nav a {
    font-size: 1.35rem;
    font-weight: 600;
    color: #2a6f97;
    text-decoration: none;
}

.dd-nav a:hover {
    text-decoration: underline;
}

.dd-nav-auth {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dd-nav-user {
    font-size: 1.25rem;
    font-weight: 500;
    color: #4a5568;
}

/* Combined baseline + followup card */

.dd-badge-combined {
    background: #e7f0f6;
    color: #1f547a;
}

.dd-card-combined {
    border-left: 3px solid #2a6f97;
}

/* Review queue */

.dd-messages {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dd-message {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 1.3rem;
}

.dd-message-success {
    background: #e6f4ea;
    color: #1e7e44;
}

.dd-message-error {
    background: #fbe9e9;
    color: #b42318;
}

.dd-card-review {
    border-left: 3px solid #b88600;
}

.dd-badge-status {
    text-transform: capitalize;
}

.dd-status-draft {
    background: #eceff3;
    color: #4a5568;
}

.dd-status-pending {
    background: #fff4d6;
    color: #8a6100;
}

.dd-status-changes_requested {
    background: #fbe9e9;
    color: #b42318;
}

.dd-review-form {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dd-review-form textarea {
    width: 100%;
    padding: 8px 10px;
    font-size: 1.3rem;
    font-family: inherit;
    border: 1px solid #cdd5df;
    border-radius: 6px;
    resize: vertical;
    box-sizing: border-box;
}

.dd-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dd-review-actions button {
    padding: 7px 14px;
    font-size: 1.3rem;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
}

.dd-btn-approve {
    background: #1e7e44;
}

.dd-btn-approve:hover {
    background: #186437;
}

.dd-btn-changes {
    background: #b42318;
}

.dd-btn-changes:hover {
    background: #921c13;
}

.dd-btn-pending {
    background: #6a7280;
}

.dd-btn-pending:hover {
    background: #545b66;
}

.dd-empty {
    color: #6a7280;
    font-size: 1.35rem;
    padding: 20px 0;
}

.dd-votes {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 12px 0 4px;
}

.dd-vote-col {
    flex: 1 1 180px;
    min-width: 160px;
}

.dd-vote-head {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4a5568;
    margin-bottom: 4px;
}

.dd-vote-for-head { color: #1e7e44; }
.dd-vote-against-head { color: #b42318; }

.dd-vote {
    font-size: 1.25rem;
    color: #1a2332;
    padding: 2px 0;
}

.dd-vote-none {
    color: #9aa3af;
    font-style: italic;
}

.dd-outstanding {
    font-size: 1.25rem;
    color: #8a6100;
    margin: 6px 0 0;
}

.dd-my-vote {
    font-size: 1.25rem;
    color: #4a5568;
    margin: 0;
}

.dd-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.dd-active-filters:not(:has(.dd-chip)) {
    display: none;
}

.dd-filters-row input[type="text"] {
    flex: 1 1 280px;
    min-width: 240px;
    padding: 8px 12px;
    font-size: 1.4rem;
    border: 1px solid #cdd5df;
    border-radius: 6px;
    color: #1a2332;
}

.dd-filters-row input[type="text"]:focus {
    outline: 2px solid #2a6f97;
    outline-offset: 1px;
    border-color: #2a6f97;
}

.dd-filters select {
    padding: 7px 10px;
    font-size: 1.3rem;
    border: 1px solid #cdd5df;
    border-radius: 6px;
    background: white;
    color: #1a2332;
}

/* Multi-select chip pattern */

.dd-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dd-filter-group > label {
    font-size: 1.2rem;
    font-weight: 600;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

/* Segmented radio toggle for the REDCap / Derived source filter.
   Radios are hidden visually but kept focusable; the labels render
   as connected pills. Compact (~150px total) so we add a meaningful
   scope filter without crowding the existing filter row. */
.dd-source-toggle {
    display: inline-flex;
    border: 1px solid #cdd5df;
    border-radius: 6px;
    overflow: hidden;
    font-size: 1.3rem;
}

.dd-source-toggle input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.dd-source-toggle > label {
    padding: 7px 12px;
    cursor: pointer;
    background: white;
    color: #1a2332;
    border-right: 1px solid #cdd5df;
    user-select: none;
    transition: background 0.15s, color 0.15s;
    margin: 0;
}

.dd-source-toggle > label:last-of-type {
    border-right: none;
}

.dd-source-toggle > label:hover {
    background: #f1f5f9;
}

.dd-source-toggle input:checked + label {
    background: #2a6f97;
    color: white;
}

.dd-source-toggle input:focus-visible + label {
    outline: 2px solid #2a6f97;
    outline-offset: 1px;
}

.dd-multi-source {
    padding: 4px 8px;
    font-size: 1.2rem;
    border: 1px solid #cdd5df;
    border-radius: 4px;
    background: white;
    color: #4a5568;
    max-width: 220px;
}

.dd-multi-source option:disabled {
    color: #cbd5e0;
}

.dd-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.dd-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 10px;
    background: #e3e8ee;
    color: #1a2332;
    border-radius: 14px;
    font-size: 1.2rem;
    line-height: 1.4;
}

.dd-chip-project-ctrn { background: #2a6f97; color: white; }
.dd-chip-project-cbt  { background: #14b8a6; color: white; }
.dd-chip-project-ctau { background: #8b5cf6; color: white; }

.dd-chip-remove {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.65;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 0.8;
    padding: 0 6px;
    border-radius: 50%;
}

.dd-chip-remove:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.15);
}

.dd-chip-project-ctrn .dd-chip-remove:hover,
.dd-chip-project-cbt  .dd-chip-remove:hover,
.dd-chip-project-ctau .dd-chip-remove:hover {
    background: rgba(255, 255, 255, 0.25);
}

.dd-filters label {
    font-size: 1.2rem;
    color: #4a5568;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dd-filters button {
    padding: 8px 18px;
    font-size: 1.3rem;
    font-weight: 500;
    background: #2a6f97;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.dd-filters button:hover {
    background: #1f547a;
}

.dd-filters .dd-clear {
    font-size: 1.2rem;
    color: #6a7280;
}

/* Count line */

.dd-count {
    padding: 12px 4px 4px;
    color: #4a5568;
    font-size: 1.3rem;
    margin: 0 0 12px;
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
}

.dd-count strong {
    color: #1a2332;
    font-weight: 600;
}

.dd-pdf-link,
button.dd-pdf-link {
    margin-left: auto;
    padding: 4px 12px;
    font-size: 1.2rem;
    color: #2a6f97;
    background: #e6f0f7;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.dd-pdf-link:hover,
button.dd-pdf-link:hover {
    background: #d1e3ee;
    text-decoration: none;
}

/* PDF progress modal */

.dd-pdf-modal[hidden] {
    display: none;
}

.dd-pdf-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dd-pdf-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.dd-pdf-modal-card {
    position: relative;
    width: min(440px, 92vw);
    background: white;
    border-radius: 12px;
    padding: 24px 28px 20px;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.25);
}

.dd-pdf-modal-card h2 {
    margin: 0 0 4px;
    font-size: 1.25rem;
    color: #1a2332;
}

.dd-pdf-stage {
    margin: 6px 0 14px;
    color: #2a6f97;
    font-weight: 600;
}

.dd-pdf-bar {
    position: relative;
    height: 10px;
    background: #e3e8ee;
    border-radius: 6px;
    overflow: hidden;
}

.dd-pdf-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #2a6f97, #1a4f72);
    border-radius: 6px;
    transition: width 0.25s ease-out;
}

.dd-pdf-bar-fill-error {
    background: #b91c1c;
}

/* Indeterminate bar — used while total_pages isn't known yet. */
.dd-pdf-bar-indeterminate .dd-pdf-bar-fill {
    width: 35% !important;
    animation: dd-pdf-indeterminate 1.2s ease-in-out infinite;
}

@keyframes dd-pdf-indeterminate {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(330%); }
}

.dd-pdf-detail {
    margin: 8px 0 0;
    color: #4a5568;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    min-height: 1.2em;
}

.dd-pdf-error {
    margin: 12px 0 0;
    color: #b91c1c;
    font-size: 0.9rem;
}

.dd-pdf-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.dd-pdf-close {
    background: transparent;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    padding: 4px 14px;
    font-family: inherit;
    cursor: pointer;
    color: #1a2332;
}

.dd-pdf-close:hover {
    background: #f1f5f9;
}

body.dd-pdf-modal-open {
    overflow: hidden;
}

/* Card grid */

.dd-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dd-card {
    background: white;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    padding: 18px 22px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    /* Keep cards together when printing/exporting to PDF. */
    page-break-inside: avoid;
    break-inside: avoid;
}

@page {
    size: A4;
    margin: 1.8cm 1.5cm;
}

.dd-card-header {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.dd-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 12px;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

.dd-badge-project { color: white; background: #6a7280; }
.dd-project-ctrn  { background: #2a6f97; }
.dd-project-cbt   { background: #14b8a6; }
.dd-project-ctau  { background: #8b5cf6; }

.dd-badge-type { background: #e3e8ee; color: #4a5568; }
.dd-badge-note { background: #fef3c7; color: #92400e; }
.dd-badge-derived { background: #fbbf24; color: #78350f; }

.dd-card-derived {
    border-left: 3px solid #fbbf24;
}

.dd-field-name {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: #1a2332;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.dd-variable {
    font-size: 1.3rem;
    color: #6a7280;
    margin: 0 0 14px;
}

.dd-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 18px;
    margin: 0;
}

.dd-meta dt {
    font-size: 1.15rem;
    font-weight: 600;
    color: #6a7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 3px;
    white-space: nowrap;
}

.dd-meta dd {
    margin: 0;
    font-size: 1.4rem;
    color: #2d3748;
    min-width: 0;
}

.dd-choices {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dd-choices li {
    font-size: 1.3rem;
    color: #4a5568;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.dd-note-text {
    color: #92400e;
    font-style: italic;
}

/* Search highlighting */

mark {
    background: #fef08a;
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
}

.dd-card code mark {
    background: #fde68a;
}

/* Lazy-load sentinel at the bottom of the item grid. htmx fires when
   this element is revealed in the viewport, swaps itself out with the
   next page of cards plus (when more pages remain) a fresh sentinel. */

.dd-load-more {
    padding: 18px 12px;
    text-align: center;
    color: #4a5568;
    font-size: 1.25rem;
    font-style: italic;
}

.dd-load-more.htmx-request {
    color: #2a6f97;
}

/* HTMX request spinner */

.dd-spinner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1.25rem;
    font-weight: 500;
    color: #2a6f97;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

.dd-spinner::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid rgba(42, 111, 151, 0.22);
    border-top-color: #2a6f97;
    border-radius: 50%;
    animation: dd-spin 0.7s linear infinite;
}

.htmx-request .dd-spinner,
.htmx-request.dd-spinner {
    opacity: 1;
}

@keyframes dd-spin {
    to { transform: rotate(360deg); }
}

/* Responsive */

@media (max-width: 640px) {
    body { padding: 0 12px 40px; }
    h1 { font-size: 2.2rem; }
    .dd-card { padding: 14px 16px; }
    .dd-meta {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }
    .dd-meta dt { padding-top: 8px; }
}