/* ==========================================================================
   JavaScript Validator

   Copied from the CSS Validator stylesheet so the validators share one visual
   language: two-column editor + options panel, severity-filtered result cards
   and the same issue list chrome. What differs: the layout class name, a zero
   flex-basis on .issue-body (cheaper row layout), the "Show more" bar
   (results render a page at a time) and the content-image rule kept from the
   old page. Diff against css-validator.css when porting a fix.
   ========================================================================== */

/* ===== HTML Validator =====
   Layout mirrors the HTML Minifier: editor on the left, rules panel on the
   right, results below. Shared visual language (checkbox, control pills,
   scrollbars) is intentionally identical so the tools feel like one family. */

.editor-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 36px;
    padding-top: 2px;
    margin-bottom: 8px;
    flex: 0 0 auto;
    box-sizing: border-box;
}

.sample-btn {
    color: #24292e;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    flex: 0 0 auto;
    margin-bottom: 0;
}

/* ===== Two-column layout ===== */
.javascript-validator-layout {
    display: flex;
    align-items: stretch;
    gap: 20px;
}

.editor-column {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.options-column {
    flex: 0 0 380px;
    width: 380px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1100px) {
    .javascript-validator-layout {
        flex-direction: column;
    }

    .editor-column,
    .options-column {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
}

/* ===== Editor ===== */
.editor-box {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

#source {
    background: #ffffff !important;
    flex: 1 1 auto;
    min-height: 468px;
    font-size: 16px;
    line-height: 18px;
    color: #24292e;
    resize: none;
    box-sizing: border-box;
    margin-bottom: 0;
}

#source::placeholder {
    color: #757575;
}

.CodeMirror {
    border: 1px solid #d3d3d3;
    font-size: 14px;
    width: 100%;
    height: 468px !important;
    min-height: 468px !important;
    margin-bottom: 0;
}

.CodeMirror-line {
    word-break: break-all !important;
    text-wrap: wrap !important;
    width: 100% !important;
}

.CodeMirror-code {
    padding-right: 30px;
}

/* Line highlight when a result row is clicked. */
.CodeMirror-linebackground.cm-issue-line {
    background: #fff4d6;
}

.CodeMirror-linebackground.cm-issue-line-error {
    background: #ffe3e3;
}

.delete-icon {
    right: 12px;
}

/* ===== Rules panel ===== */
.options-quick-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 36px;
    padding-top: 2px;
    margin-bottom: 8px;
    flex: 0 0 auto;
    box-sizing: border-box;
}

@media (min-width: 1101px) {
    .editor-header,
    .options-quick-select {
        height: 42px;
    }
}

.quick-select-label {
    font-size: 14px;
    line-height: 20px;
    color: #24292e;
    margin-right: 4px;
}

.control-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    padding: 3px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #24292e;
    background: #ffffff;
    border: 1px solid #d3d3d3;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
}

.control-item:not(.control-item--active):not(.active):hover {
    background: #f1f1f1;
    border-color: #c7c7c7;
}

.control-item--active,
.control-item.active {
    background: #0069d9;
    border-color: #0069d9;
    color: #ffffff;
    font-weight: 500;
}

.control-item--active:hover,
.control-item.active:hover {
    background: #0056b3;
    border-color: #0056b3;
}

.options-panel {
    background: #ffffff;
    border: 1px solid #d3d3d3;
    padding: 12px;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 428px;
    box-sizing: border-box;
}

.options-panel::-webkit-scrollbar,
#source::-webkit-scrollbar,
.CodeMirror-scroll::-webkit-scrollbar,
.CodeMirror-hscrollbar::-webkit-scrollbar,
.CodeMirror-vscrollbar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.options-panel::-webkit-scrollbar-track,
#source::-webkit-scrollbar-track,
.CodeMirror-scroll::-webkit-scrollbar-track,
.CodeMirror-hscrollbar::-webkit-scrollbar-track,
.CodeMirror-vscrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.options-panel::-webkit-scrollbar-thumb,
#source::-webkit-scrollbar-thumb,
.CodeMirror-scroll::-webkit-scrollbar-thumb,
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb,
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
    background: #c7c7c7;
    border-radius: 99px;
    border: 2px solid #f1f1f1;
    background-clip: content-box;
}

@supports (-moz-appearance: none) {
    .options-panel,
    #source,
    .CodeMirror-vscrollbar,
    .CodeMirror-hscrollbar {
        scrollbar-width: thin;
        scrollbar-color: #c7c7c7 #f1f1f1;
    }
}

.CodeMirror-vscrollbar {
    width: 10px !important;
}

.CodeMirror-hscrollbar {
    height: 10px !important;
}

.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
    background: #f1f1f1;
}

/* ===== Rules search =====
   Matches the app's existing "Search tools..." field: #f1f1f1, radius 6. */
.options-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 6px 10px;
    margin-bottom: 8px;
    background: #f1f1f1;
    border-radius: 6px;
    box-sizing: border-box;
}

.options-search-icon {
    flex: 0 0 14px;
    display: inline-flex;
    align-items: center;
}

.options-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 20px;
    padding: 0;
    background: none;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #24292e;
}

.options-search-input::placeholder {
    color: #c7c7c7;
}

.options-search-clear {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #d3d3d3;
    font-size: 13px;
    line-height: 1;
    color: #ffffff;
    cursor: pointer;
    user-select: none;
}

.options-search-clear:hover {
    background: #c7c7c7;
}

.options-empty {
    margin: 0 !important;
    padding: 12px 0;
    font-size: 13px !important;
    line-height: 18px !important;
    color: #757575 !important;
    max-width: none !important;
}

/* Hidden by the rules search. */
.option-row.is-hidden,
.option-section.is-hidden {
    display: none;
}

.option-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.option-section-title {
    font-size: 14px !important;
    font-weight: 600;
    line-height: 20px !important;
    color: #999999 !important;
    margin: 0 0 2px !important;
    max-width: none !important;
}

.option-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    cursor: pointer;
}

.option-row--disabled {
    opacity: 0.5;
    pointer-events: none;
}

.option-checkbox {
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    display: inline-block;
}

.option-checkbox input {
    position: absolute;
    inset: 0;
    width: 14px;
    height: 14px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.option-checkbox-box {
    position: absolute;
    inset: 0;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.option-checkbox-box::after {
    content: "";
    width: 8px;
    height: 7px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.6 6.2'%3E%3Cpath d='M1 3.1 L2.9 5 L6.6 1.2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
}

.option-checkbox input:checked ~ .option-checkbox-box {
    background: #007bff;
    border-color: #007bff;
}

.option-checkbox input:checked ~ .option-checkbox-box::after {
    opacity: 1;
}

.option-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.option-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
    color: #24292e;
}

.option-desc {
    font-size: 12px !important;
    font-weight: 400;
    line-height: 16px !important;
    color: #757575 !important;
    max-width: none !important;
}

.option-title code,
.option-desc code {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 0 4px;
    font-size: 12px;
    color: #24292e;
    word-break: break-word;
}

/* ===== Submit row ===== */
.submit-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    width: 100%;
    max-width: calc(100% - 400px);
    box-sizing: border-box;
}

@media (max-width: 1100px) {
    .submit-section-row {
        max-width: 100%;
    }
}

.left-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.submit-btn,
.blue-btn {
    padding: 10px 30px !important;
    background: #4c4c4c;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

.submit-btn:hover,
.blue-btn:hover {
    background: #3a3a3a !important;
    border: none;
}

.submit-btn:focus,
.submit-btn.focus,
.blue-btn.focus {
    box-shadow: none;
}

.submit-section-row .action-btns {
    gap: 8px;
    align-items: center;
}

.submit-section-row .action-btn {
    padding: 6px 12px;
    gap: 4px;
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    background: #ffffff;
}

.submit-section-row .action-btn span {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #24292e;
}

.submit-section-row .action-btn:hover {
    background: #f1f1f1;
}

/* Only the thumbs are interactive; the "Was this useful?" label is plain text. */
.submit-section-row .js-feedback,
.submit-section-row .js-feedback .btn-tertiary {
    cursor: default;
}

.submit-section-row .js-download {
    background: #007bff;
    border-color: #007bff;
}

.submit-section-row .js-download span {
    color: #ffffff;
    font-weight: 500;
}

.submit-section-row .js-download:hover {
    background: #0069d9;
    border-color: #0069d9;
}

.submit-section-row .js-download img {
    filter: brightness(0) invert(1);
}

/* ===== Results =====
   Spec from Figma (HTML Validator Output, node 3930:6451):
   row padding 12, badge 12/600 on a 25%-alpha severity tint with radius 4,
   message 14/700 lh 24, code 14/400 lh 20 with a #ffc300 25% highlight,
   numbered gutter 29px wide on #f1f1f1. */

/* Filter bar above the card: "Result:" + All / Error / Warning / Info */
/* Two tabs: markup correctness vs. page quality. */
.result-tabs {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin: 24px 0 0;
    border-bottom: 1px solid #d3d3d3;
}

.result-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #757575 !important;
    cursor: pointer;
    user-select: none;
    margin-bottom: -1px;
}

/* Only the inactive tab reacts to hover; the active one already reads as
   selected and should not change under the cursor. */
.result-tab:not(.result-tab--active):hover {
    color: #24292e !important;
}

.result-tab--active {
    background: #ffffff;
    border-color: #d3d3d3;
    color: #24292e !important;
}

.result-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 99px;
    background: #f1f1f1;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    color: #24292e;
}

.result-tab--active .result-tab-count {
    background: #e6f0ff;
    color: #0069d9;
}

/* Summary + filters strip between the tabs and the issue list. */
.result-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #d3d3d3;
    border-top: none;
}

.summary-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: auto;
    min-width: 0;
}

.summary-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #24292e;
}

/* A small dot carries the state instead of a score. */
.summary-title::before {
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d3d3d3;
}

.result-summary--pass .summary-title::before {
    background: #16a34a;
}

.result-summary--error .summary-title::before {
    background: #dc2626;
}

.result-summary--warn .summary-title::before {
    background: #d97706;
}

.result-summary--info .summary-title::before {
    background: #00a6ff;
}

.summary-caption {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #757575;
}

.result-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.result-filters-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #24292e;
}

.result-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #24292e;
    cursor: pointer;
    user-select: none;
}

/* Hover only applies to the inactive pills; the active one keeps its blue
   and darkens instead, so it never looks like it was deselected. */
.result-filter:not(.result-filter--active):hover {
    background: #f1f1f1;
    border-color: #c7c7c7;
}

.result-filter--active {
    background: #007bff;
    border-color: #007bff;
    color: #ffffff;
    font-weight: 500;
}

.result-filter--active:hover {
    background: #0069d9;
    border-color: #0069d9;
}

.results-card {
    background: #ffffff;
    border: 1px solid #d3d3d3;
    border-top: none;
    box-sizing: border-box;
}

/* ===== Issue rows ===== */
.issue-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.issue {
    display: flex;
    align-items: stretch;
    margin: 0;
    border-bottom: 1px solid #d3d3d3;
    cursor: pointer;
}

.issue:last-child {
    border-bottom: none;
}

.issue.is-hidden {
    display: none;
}

.issue:hover .issue-body {
    background: #fcfcfd;
}

.issue--active .issue-body {
    background: #f6f9ff;
}

/* Numbered gutter, matching the editor's line-number column. */
.issue-num {
    flex: 0 0 29px;
    width: 29px;
    padding: 12px 6px 0 0;
    background: #f1f1f1;
    border-right: 1px solid #d3d3d3;
    text-align: right;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #757575;
    user-select: none;
    box-sizing: border-box;
}

.issue-body {
    position: relative;
    /* A zero basis fills the same space as `auto` here, but spares the
       browser measuring every row at its max-content width first, which
       roughly doubled the cost of rendering a page of rows. */
    flex: 1 1 0%;
    min-width: 0;
    padding: 12px;
    box-sizing: border-box;
}

.issue-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    /* Room for the button, which is lifted into this row on wide screens. */
    padding-right: 110px;
}

.severity-badge,
.issue-loc {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: #24292e;
    white-space: nowrap;
}

.severity-badge--error {
    background: rgba(255, 0, 0, 0.25);
}

.severity-badge--warning {
    background: rgba(131, 231, 48, 0.25);
}

.severity-badge--info {
    background: rgba(0, 166, 255, 0.25);
}

.issue-loc {
    background: #f1f1f1;
}

.issue-message {
    margin: 8px 0 0 !important;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 24px !important;
    color: #24292e !important;
    max-width: none !important;
}

/* The source line, with the offending fragment tinted. */
.issue-code {
    display: block;
    margin-top: 8px;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #24292e;
    white-space: pre-wrap;
    word-break: break-word;
}

.issue-mark {
    padding: 0 4px;
    background: rgba(255, 195, 0, 0.25);
}

/* Jumps the editor to the offending line. */
/* Reads last in the markup so that on a narrow screen it follows the message
   and hint. On wider screens it is lifted back up level with the badges. */
.issue-goto {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    background: #ffffff;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: #24292e;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.issue-goto:hover {
    background: #007bff;
    border-color: #007bff;
    color: #ffffff;
}

.issue-goto svg {
    flex: 0 0 auto;
}

.issue-goto:hover svg path {
    stroke: #ffffff;
}

.issue-hint {
    margin: 8px 0 0 !important;
    font-size: 12px !important;
    font-weight: 400;
    line-height: 16px !important;
    color: #757575 !important;
    max-width: none !important;
}

.issue-hint code {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 0 4px;
    font-size: 12px;
    color: #24292e;
    word-break: break-word;
}

/* ===== Empty / pass states ===== */
.results-pass {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 16px;
}

.results-pass-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(131, 231, 48, 0.25);
    font-size: 12px;
    font-weight: 700;
    color: #24292e;
}

.results-pass-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #24292e;
}

.results-empty {
    padding: 28px 16px;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    color: #757575;
}

/* Results render a page at a time: laying out hundreds of rows at once made
   tab and filter clicks slow (INP). This bar loads the next page. */
.results-more {
    display: flex;
    justify-content: center;
    padding: 12px 16px;
    border-top: 1px solid #d3d3d3;
}

.results-more-btn {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #24292e;
    cursor: pointer;
    user-select: none;
}

.results-more-btn:hover {
    background: #f1f1f1;
    border-color: #c7c7c7;
}

.panel p {
    font-size: 16px !important;
    line-height: 28px !important;
    max-width: 900px !important;
}

/* The page content (managed in the admin) has screenshots with a fixed
   width="624"; kept from the previous version of this page so they fill the
   text column and never overflow a phone screen. */
p img {
    width: 100%;
    height: auto;
}


@media (max-width: 580px) {
    .container{
        width: 100% !important;
    }
    .editor-header {
        height: auto;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .options-quick-select {
        flex-wrap: wrap;
    }

    .submit-section-row .action-btn span,
    .submit-section-row .js-feedback .btn-tertiary {
        display: none;
    }

    /* Icons only here too: the long "submitted" text wrapped the action buttons onto
       a second row, so show just a check (the text stays for screen readers) */
    .submit-section-row .js-feedback-submitted {
        font-size: 0;
    }

    .submit-section-row .js-feedback-submitted::before {
        content: "\2705";
        font-size: 18px;
        line-height: 1;
    }

    .issue-num {
        flex-basis: 24px;
        width: 24px;
        padding-right: 4px;
    }

    .issue-body {
        padding: 10px;
    }

    /* Back into the normal flow, so it sits after the message and hint. */
    .issue-goto {
        position: static;
        margin-top: 10px;
        width: 100%;
        justify-content: center;
        padding: 6px 8px;
    }

    .issue-head {
        padding-right: 0;
    }
}