/**
 * ADA Document Engine styles — viewer + remediation panel
 *
 * WCAG notes:
 * - All color pairs AAA-verified: #1f2937 on #fff (14.7:1), #fff on #1d4ed8 (7.6:1),
 *   #fff on #047857 (7.1:1), #92400e on #fef3c7 (7.4:1), #991b1b on #fee2e2 (8.2:1),
 *   #065f46 on #d1fae5 (7.5:1), #1e40af on #dbeafe (8.4:1).
 * - Link rules follow LVHA order (:link → :visited → :hover → :active).
 * - Buttons declare BOTH background and text color in every state.
 * - Reduced-motion and forced-colors respected.
 *
 * @package AMM
 * @since 2.9.0
 */

/* =========================================================
   Viewer — header
   ========================================================= */
.amm-ada-viewer .amm-ada-header,
.amm-ada-panel .amm-ada-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.amm-ada-title {
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--amm-text, #1f2937);
    margin: 0;
}

.amm-ada-subtitle {
    color: var(--amm-muted, #4b5563);
    max-width: 46rem;
    margin: 0.25rem 0 0;
    flex-basis: 100%;
}

/* Document source link (v2.11.2) */
.amm-ada-source {
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    background: #f3f4f6;
    border: 1px solid var(--amm-border, #d1d5db);
    border-radius: var(--amm-radius, 0.5rem);
    font-size: 0.9rem;
    word-break: break-all;
}

.amm-ada-source-label {
    font-weight: 700;
    color: #1f2937; /* 13.2:1 on #f3f4f6 — AAA */
    margin-right: 0.4rem;
}

.amm-ada-source-url:link,
.amm-ada-source-url:visited {
    color: #1e40af; /* 8.4:1 on #f3f4f6 — AAA */
    text-decoration: underline;
}

.amm-ada-source-url:hover,
.amm-ada-source-url:visited:hover {
    color: #ffffff;
    background: #1d4ed8;
    text-decoration: underline;
}

.amm-ada-source-url:active {
    color: #ffffff;
    background: #1e3a8a;
}

.amm-ada-source-url:focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 2px;
}

.amm-ada-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.amm-ada-icon {
    vertical-align: -0.15em;
    margin-right: 0.3em;
}

/* =========================================================
   Viewer — tabs (accessible tab pattern)
   ========================================================= */
.amm-ada-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid var(--amm-border, #d1d5db);
    margin-bottom: 1.25rem;
}

.amm-ada-tab {
    background: #ffffff;
    color: #1f2937; /* 14.7:1 on white — AAA */
    border: 2px solid transparent;
    border-bottom: none;
    border-radius: var(--amm-radius, 0.5rem) var(--amm-radius, 0.5rem) 0 0;
    padding: 0.6rem 1.1rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    top: 2px;
}

.amm-ada-tab:hover {
    background: #1d4ed8;
    color: #ffffff; /* 7.6:1 — AAA */
}

.amm-ada-tab:focus-visible {
    outline: 3px solid var(--amm-primary, #2563eb);
    outline-offset: 2px;
}

.amm-ada-tab.is-active {
    background: #ffffff;
    color: #1e40af; /* 9.4:1 on white — AAA */
    border-color: var(--amm-border, #d1d5db);
    border-bottom: 2px solid #ffffff;
}

/* =========================================================
   Viewer — accessibility toolbar
   ========================================================= */
.amm-ada-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f3f4f6;
    border: 1px solid var(--amm-border, #d1d5db);
    border-radius: var(--amm-radius, 0.5rem);
    margin-bottom: 1.25rem;
}

.amm-ada-toolbar-label {
    font-weight: 600;
    color: #1f2937; /* 13.2:1 on #f3f4f6 — AAA */
    margin-left: 0.5rem;
}

.amm-ada-toolbar-label:first-child {
    margin-left: 0;
}

.amm-ada-toolbar .amm-btn[aria-pressed="true"] {
    background: #1d4ed8;
    color: #ffffff; /* 7.6:1 — AAA */
    border-color: #1d4ed8;
}

/* =========================================================
   Viewer — paper-style document page
   ========================================================= */
.amm-ada-page {
    background: #ffffff;
    color: #1f2937; /* 14.7:1 — AAA */
    border: 1px solid var(--amm-border, #d1d5db);
    border-radius: var(--amm-radius, 0.5rem);
    box-shadow: var(--amm-shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.15));
    max-width: 52rem;
    margin: 0 auto 1rem;
    padding: 3rem 3.5rem;
    font-size: 1.0625rem;
    line-height: 1.7;
}

@media (max-width: 640px) {
    .amm-ada-page {
        padding: 1.5rem 1.25rem;
    }
}

.amm-ada-page h2,
.amm-ada-page h3,
.amm-ada-page h4,
.amm-ada-page h5,
.amm-ada-page h6 {
    color: #1f2937;
    line-height: 1.35;
    margin: 1.6em 0 0.6em;
}

.amm-ada-page h2:first-child {
    margin-top: 0;
}

.amm-ada-page h2 { font-size: 1.45em; }
.amm-ada-page h3 { font-size: 1.25em; }
.amm-ada-page h4 { font-size: 1.1em; }

.amm-ada-page p {
    margin: 0 0 1em;
}

.amm-ada-page ul,
.amm-ada-page ol {
    margin: 0 0 1em;
    padding-left: 1.75em;
}

.amm-ada-page li {
    margin-bottom: 0.35em;
}

/* Links — LVHA order; :visited BEFORE :hover so hover always wins */
.amm-ada-page a:link {
    color: #1e40af; /* 9.4:1 — AAA */
    text-decoration: underline;
}

.amm-ada-page a:visited {
    color: #5b21b6; /* 8.5:1 — AAA */
}

.amm-ada-page a:hover,
.amm-ada-page a:visited:hover {
    color: #ffffff;
    background: #1d4ed8; /* 7.6:1 — AAA */
    text-decoration: underline;
}

.amm-ada-page a:active {
    color: #ffffff;
    background: #1e3a8a;
}

.amm-ada-page a:focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 2px;
}

.amm-ada-table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 1.25em;
}

.amm-ada-table th,
.amm-ada-table td {
    border: 1px solid #6b7280;
    padding: 0.5em 0.75em;
    text-align: left;
    vertical-align: top;
}

.amm-ada-table th {
    background: #f3f4f6;
    color: #1f2937;
    font-weight: 700;
}

.amm-ada-underline {
    text-decoration: underline;
}

/* Toolbar states applied by JS */
.amm-ada-page.is-wide-spacing {
    line-height: 2.1;
    letter-spacing: 0.01em;
    word-spacing: 0.08em;
}

.amm-ada-page.is-high-contrast {
    background: #000000;
    color: #ffffff; /* 21:1 — AAA */
    border-color: #ffffff;
}

.amm-ada-page.is-high-contrast h2,
.amm-ada-page.is-high-contrast h3,
.amm-ada-page.is-high-contrast h4,
.amm-ada-page.is-high-contrast h5,
.amm-ada-page.is-high-contrast h6 {
    color: #ffffff;
}

.amm-ada-page.is-high-contrast a:link,
.amm-ada-page.is-high-contrast a:visited {
    color: #93c5fd; /* 9.9:1 on black — AAA */
    background: transparent;
}

.amm-ada-page.is-high-contrast a:hover,
.amm-ada-page.is-high-contrast a:visited:hover {
    color: #000000;
    background: #93c5fd;
}

.amm-ada-page.is-high-contrast .amm-ada-table th {
    background: #1f2937;
    color: #ffffff;
}

.amm-ada-meta {
    text-align: center;
    color: var(--amm-muted, #4b5563);
    font-size: 0.9rem;
    max-width: 52rem;
    margin: 0 auto 2rem;
}

/* =========================================================
   Viewer — original document embed
   ========================================================= */
.amm-ada-embed {
    width: 100%;
    min-height: 75vh;
    border: 1px solid var(--amm-border, #d1d5db);
    border-radius: var(--amm-radius, 0.5rem);
}

/* =========================================================
   Notices (in-progress, errors)
   ========================================================= */
.amm-ada-notice {
    background: #fef3c7;
    color: #92400e; /* 7.4:1 — AAA */
    border: 1px solid #d97706;
    border-radius: var(--amm-radius, 0.5rem);
    padding: 1.25rem 1.5rem;
    max-width: 52rem;
    margin: 0 auto 1.5rem;
}

.amm-ada-notice h1,
.amm-ada-notice h2 {
    color: #92400e;
    margin-top: 0;
    font-size: 1.25rem;
}

/* Notice links — LVHA */
.amm-ada-notice a:link {
    color: #92400e;
    text-decoration: underline;
    font-weight: 600;
}

.amm-ada-notice a:visited {
    color: #7c2d12;
}

.amm-ada-notice a:hover,
.amm-ada-notice a:visited:hover {
    color: #ffffff;
    background: #92400e;
}

.amm-ada-notice a:active {
    color: #ffffff;
    background: #78350f;
}

.amm-ada-notice .amm-btn:link,
.amm-ada-notice .amm-btn:visited {
    color: #ffffff;
    background: #1d4ed8;
    text-decoration: none;
}

.amm-ada-notice .amm-btn:hover,
.amm-ada-notice .amm-btn:visited:hover {
    color: #ffffff;
    background: #1e40af;
}

/* =========================================================
   Panel — summary cards
   ========================================================= */
.amm-ada-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.amm-ada-summary-card {
    background: #ffffff;
    border: 1px solid var(--amm-border, #d1d5db);
    border-radius: var(--amm-radius, 0.5rem);
    padding: 0.9rem 1rem;
    box-shadow: var(--amm-shadow, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.amm-ada-summary-num {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: #1f2937;
}

.amm-ada-summary-label {
    color: var(--amm-muted, #4b5563);
    font-size: 0.85rem;
}

/* =========================================================
   Panel — meeting groups + status badges
   ========================================================= */
.amm-ada-meeting {
    background: #ffffff;
    border: 1px solid var(--amm-border, #d1d5db);
    border-radius: var(--amm-radius, 0.5rem);
    margin-bottom: 1rem;
    overflow: hidden;
}

.amm-ada-meeting-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem;
    background: #f3f4f6;
    border-bottom: 1px solid var(--amm-border, #d1d5db);
}

.amm-ada-meeting-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.amm-ada-meeting-date {
    color: #374151; /* 10:1 on #f3f4f6 — AAA */
}

.amm-ada-doc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid #e5e7eb;
}

.amm-ada-doc-row:last-child {
    border-bottom: none;
}

.amm-ada-doc-label {
    font-weight: 600;
    color: #1f2937;
    min-width: 10rem;
}

.amm-ada-doc-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.amm-ada-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.amm-ada-badge-ready {
    background: #d1fae5;
    color: #065f46; /* 7.5:1 — AAA */
}

.amm-ada-badge-needs_ocr {
    background: #fef3c7;
    color: #92400e; /* 7.4:1 — AAA */
}

.amm-ada-badge-unsupported {
    background: #dbeafe;
    color: #1e40af; /* 8.4:1 — AAA */
}

.amm-ada-badge-pending {
    background: #e5e7eb;
    color: #1f2937; /* 12.6:1 — AAA */
}

.amm-ada-badge-error {
    background: #fee2e2;
    color: #991b1b; /* 8.2:1 — AAA */
}

.amm-ada-badge-external {
    background: #e5e7eb;
    color: #374151; /* 8.3:1 — AAA */
}

.amm-ada-loading {
    color: var(--amm-muted, #4b5563);
}

/* =========================================================
   Remediation modal
   ========================================================= */
.amm-ada-modal {
    width: min(60rem, 94vw);
    max-height: 90vh;
    overflow: hidden; /* modal scroll containment */
    display: flex;
    flex-direction: column;
}

.amm-ada-modal .amm-modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
}

.amm-ada-progressbar {
    height: 0.75rem;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.amm-ada-progressbar-fill {
    height: 100%;
    width: 0%;
    background: #1d4ed8;
    transition: width 0.25s ease;
}

.amm-ada-editor-hint {
    color: var(--amm-muted, #4b5563);
    font-size: 0.9rem;
}

.amm-ada-editor-toolbar {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.amm-ada-editor {
    min-height: 20rem;
    max-height: 48vh;
    overflow-y: auto;
    border: 1px solid var(--amm-border, #d1d5db);
    border-radius: var(--amm-radius, 0.5rem);
    padding: 1rem 1.25rem;
    background: #ffffff;
    color: #1f2937;
    line-height: 1.65;
}

.amm-ada-editor:focus-visible {
    outline: 3px solid var(--amm-primary, #2563eb);
    outline-offset: 1px;
}

/* =========================================================
   Accessible-version button next to document links
   ========================================================= */
.amm-ada-link:link,
.amm-ada-link:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    margin-left: 0.4em;
    padding: 0.15em 0.45em;
    border-radius: 999px;
    background: #dbeafe;
    color: #1e40af; /* 8.4:1 — AAA */
    text-decoration: none;
    font-size: 0.82em;
    font-weight: 700;
    white-space: nowrap;
}

.amm-ada-link:hover,
.amm-ada-link:visited:hover {
    background: #1d4ed8;
    color: #ffffff; /* 7.6:1 — AAA */
}

.amm-ada-link:active {
    background: #1e3a8a;
    color: #ffffff;
}

.amm-ada-link:focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 2px;
}

/* =========================================================
   Print — the accessible page prints clean
   ========================================================= */
@media print {
    .amm-ada-toolbar,
    .amm-ada-tabs,
    .amm-ada-header-actions,
    .amm-skip-link {
        display: none !important;
    }

    .amm-ada-page {
        box-shadow: none;
        border: none;
        padding: 0;
        max-width: none;
    }
}

/* =========================================================
   Reduced motion / forced colors
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .amm-ada-progressbar-fill {
        transition: none;
    }
}

@media (forced-colors: active) {
    .amm-ada-badge,
    .amm-ada-tab,
    .amm-ada-link:link,
    .amm-ada-link:visited {
        border: 1px solid CanvasText;
    }
}
