/* traditional-crypto.css — styles for traditional cryptography pages */

/* Input styling */
.cipher-controls {
    margin: 1em 0;
    padding: 1em;
    background-color: #383838;
    border-radius: 6px;
}

.cipher-controls label {
    display: block;
    margin-bottom: 0.3em;
    color: #F0E68C;
    font-weight: bold;
}

.cipher-controls textarea,
.cipher-controls input[type="text"],
.cipher-controls input[type="number"] {
    width: 100%;
    padding: 0.5em;
    margin-bottom: 0.8em;
    background-color: #2B2B2B;
    color: #DCDCCC;
    border: 1px solid #5F5F5F;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 1em;
    box-sizing: border-box;
}

.cipher-controls textarea {
    min-height: 4em;
    resize: vertical;
}

.cipher-controls input[type="range"] {
    width: 100%;
    margin-bottom: 0.5em;
}

.cipher-controls button {
    padding: 0.5em 1.2em;
    margin: 0.3em 0.3em 0.3em 0;
    background-color: #456145;
    color: #DCDCCC;
    border: 1px solid #7F9F7F;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

.cipher-controls button:hover {
    background-color: #7F9F7F;
    color: #2B2B2B;
}

/* Also style buttons outside cipher-controls */
button {
    padding: 0.5em 1.2em;
    margin: 0.3em 0.3em 0.3em 0;
    background-color: #456145;
    color: #DCDCCC;
    border: 1px solid #7F9F7F;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

button:hover {
    background-color: #7F9F7F;
    color: #2B2B2B;
}

/* Cipher output area */
.cipher-output {
    padding: 0.8em;
    margin: 0.8em 0;
    background-color: #383838;
    border: 1px solid #5F5F5F;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 1.05em;
    word-break: break-all;
    min-height: 2em;
}

/* Worked examples in <pre> scroll sideways on narrow screens instead of
   pushing the page wider */
pre {
    overflow-x: auto;
}

/* A checkbox with its label on one line, unlike the block labels above */
.cipher-controls .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.8em;
}

/* Step-by-step letter grid */
.cipher-grid {
    margin: 1em 0;
    overflow-x: auto;
}

.cipher-grid-row {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
}

.cipher-grid-label {
    min-width: 7em;
    font-weight: bold;
    color: #F0E68C;
    font-size: 0.9em;
    padding-right: 0.5em;
    flex-shrink: 0;
}

.cipher-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8em;
    height: 1.8em;
    margin: 1px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1em;
    background-color: #383838;
    border: 1px solid #5F5F5F;
}

.cipher-letter-plain {
    color: #8CD0D3;
    border-color: #8CD0D3;
}

.cipher-letter-cipher {
    color: #CC9393;
    border-color: #CC9393;
}

.cipher-letter-key {
    color: #F0DFAF;
    border-color: #F0DFAF;
}

.cipher-letter-highlight {
    background-color: #4F4F4F;
}

/* Frequency chart */
.freq-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 150px;
    margin: 1em 0 0.5em 0;
    padding: 0.5em 0;
    border-bottom: 1px solid #5F5F5F;
}

.freq-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.freq-bar-area {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    width: 100%;
    height: 130px;
}

.freq-bar {
    flex: 1;
    min-width: 0;
    border-radius: 1px 1px 0 0;
    transition: height 0.3s ease;
}

.freq-bar-english {
    background-color: rgba(127, 159, 127, 0.5);
}

.freq-bar-cipher {
    background-color: #CC9393;
}

.freq-label {
    font-size: 0.65em;
    color: #DCDCCC;
    margin-top: 3px;
    font-family: 'Courier New', monospace;
}

.freq-legend {
    font-size: 0.85em;
    color: #DCDCCC;
    margin: 0.3em 0 1em 0;
}

.freq-legend-english {
    display: inline-block;
    width: 1em;
    height: 0.8em;
    background-color: rgba(127, 159, 127, 0.5);
    vertical-align: middle;
    margin-right: 0.3em;
}

.freq-legend-cipher {
    display: inline-block;
    width: 1em;
    height: 0.8em;
    background-color: #CC9393;
    vertical-align: middle;
    margin-right: 0.3em;
}

/* Printing. The frequency bars and legend swatches above are drawn with nothing but background colour, and
   browsers leave backgrounds out when printing unless "Background graphics"
   is ticked in the print dialog (it is off by default in Chrome), so the
   charts came out as empty space. print-color-adjust: exact asks the browser
   to keep these particular backgrounds. On paper each bar also gets a thin
   dark border so it still shows on a black-and-white printer, where the
   colours turn into similar pale greys; the English reference bars get a
   dashed border so they can still be told apart from the measured ones. */
.freq-bar,
.freq-legend-english,
.freq-legend-cipher {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

@media print {
    .freq-bar,
    .freq-legend-english,
    .freq-legend-cipher {
        box-sizing: border-box;
        border: 1px solid #2B2B2B;
    }

    .freq-bar-english,
    .freq-legend-english {
        border-style: dashed;
    }
}

/* Vigenere table */
.vigenere-table {
    border-collapse: collapse;
    font-family: 'Courier New', monospace;
    font-size: 0.75em;
    margin: 1em 0;
    overflow-x: auto;
    display: block;
}

.vigenere-table td,
.vigenere-table th {
    width: 1.6em;
    height: 1.6em;
    text-align: center;
    border: 1px solid #4F4F4F;
    padding: 0;
}

.vigenere-table th {
    background-color: #383838;
    color: #F0E68C;
    font-weight: bold;
}

.vigenere-table .vig-highlight-row {
    background-color: rgba(240, 223, 175, 0.15);
}

.vigenere-table .vig-highlight-cell {
    background-color: #5F5F5F;
    color: #CC9393;
    font-weight: bold;
}

/* Printing. The keyword-row highlight is only a background tint, which the
   browser drops when "Background graphics" is off (the default in Chrome), and
   even when kept, a 15% tint meant for the dark screen is invisible on white
   paper. So on paper the rows get a full-strength tint that is kept with
   print-color-adjust: exact, dark text (exact also stops the browser from
   darkening the light screen text for paper), and bold type so they still
   stand out on a black-and-white printer. */
.vigenere-table .vig-highlight-row,
.vigenere-table .vig-highlight-cell {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

@media print {
    .vigenere-table .vig-highlight-row {
        background-color: #F0DFAF;
        color: #2B2B2B;
        font-weight: bold;
    }
}

/* Rail fence grid */
.rail-grid {
    margin: 1em 0;
    overflow-x: auto;
}

.rail-grid-table {
    border-collapse: collapse;
    font-family: 'Courier New', monospace;
}

.rail-cell {
    width: 1.8em;
    height: 1.8em;
    text-align: center;
    border: 1px solid #4F4F4F;
    font-weight: bold;
}

.rail-cell-filled {
    background-color: #383838;
    color: #8CD0D3;
}

.rail-cell-empty {
    background-color: #2B2B2B;
    color: transparent;
}

.rail-cell-path {
    border-color: #5F5F5F;
}

/* Alphabet mapping display */
.alphabet-mapping {
    margin: 1em 0;
    overflow-x: auto;
}

.alphabet-mapping table {
    border-collapse: collapse;
    font-family: 'Courier New', monospace;
    font-size: 1em;
}

.alphabet-mapping td {
    width: 1.8em;
    height: 1.8em;
    text-align: center;
    border: 1px solid #5F5F5F;
    padding: 2px;
}

.alphabet-mapping .map-row-plain {
    color: #8CD0D3;
    background-color: #383838;
}

.alphabet-mapping .map-arrow {
    color: #F0E68C;
    border: none;
    font-size: 0.8em;
}

.alphabet-mapping .map-row-cipher {
    color: #CC9393;
    background-color: #383838;
}

/* Brute force results. All 26 rows flow in the page: no nested scroll
   panel, so the whole list is readable (and printable) at once. */
.brute-force-results {
    margin: 1em 0;
    padding: 0.5em;
    background-color: #383838;
    border: 1px solid #5F5F5F;
    border-radius: 4px;
}

.brute-force-row {
    padding: 0.3em 0.5em;
    margin: 2px 0;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    border-bottom: 1px solid #3F3F3F;
}

.brute-force-shift {
    color: #F0E68C;
    font-weight: bold;
    display: inline-block;
    min-width: 6em;
}

.brute-force-text {
    color: #DCDCCC;
}

/* The row whose shift recovers the original message */
.brute-force-row-correct {
    background-color: rgba(127, 159, 127, 0.2);
    border-left: 3px solid #7F9F7F;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Printing. Like the Vigenere keyword rows, the correct-shift row is marked
   with a faint tint that the browser drops when "Background graphics" is off
   (the default in Chrome) and that would be invisible on white paper anyway.
   On paper it gets a full-strength tint kept with print-color-adjust: exact,
   dark bold text and a dark outline, so it still stands out on a
   black-and-white printer. */
@media print {
    .brute-force-row-correct {
        background-color: #C3D9C3;
        border: 2px solid #2B2B2B;
        border-left-width: 6px;
    }

    .brute-force-row-correct .brute-force-shift,
    .brute-force-row-correct .brute-force-text {
        color: #2B2B2B;
        font-weight: bold;
    }
}

/* Warning messages */
.cipher-warning {
    padding: 0.6em 1em;
    margin: 0.5em 0;
    background-color: rgba(204, 147, 147, 0.15);
    border: 1px solid #CC9393;
    border-radius: 4px;
    color: #CC9393;
    font-size: 0.95em;
}

/* Shift display */
.shift-display {
    font-size: 1.3em;
    font-weight: bold;
    color: #F0DFAF;
    margin: 0.3em 0;
}

/* Step detail (for one-time pad) */
.step-detail {
    font-family: 'Courier New', monospace;
    margin: 0.5em 0;
    padding: 0.5em;
    background-color: #383838;
    border-radius: 4px;
    line-height: 1.8;
}

.step-detail .step-num {
    color: #F0E68C;
}

.step-detail .step-plain {
    color: #8CD0D3;
}

.step-detail .step-key {
    color: #F0DFAF;
}

.step-detail .step-result {
    color: #CC9393;
}

/* Related links section */
.related-links {
    margin: 1.5em 0;
    padding: 1em;
    background-color: #383838;
    border-radius: 6px;
    border-left: 3px solid #7F9F7F;
}

.related-links h3 {
    margin-top: 0;
}

/* Playfair 5x5 grid */
.playfair-grid {
    display: inline-grid;
    grid-template-columns: repeat(5, 2.2em);
    gap: 2px;
    margin: 1em 0;
    font-family: 'Courier New', monospace;
}

.playfair-cell {
    width: 2.2em;
    height: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #383838;
    border: 1px solid #5F5F5F;
    border-radius: 3px;
    font-weight: bold;
    font-size: 1em;
    color: #DCDCCC;
}

.playfair-cell-highlight {
    background-color: #4F4F4F;
    color: #8CD0D3;
    border-color: #8CD0D3;
}

.playfair-cell-result {
    background-color: #4F4F4F;
    color: #CC9393;
    border-color: #CC9393;
}

/* Columnar transposition grid */
.columnar-grid {
    border-collapse: collapse;
    font-family: 'Courier New', monospace;
    margin: 1em 0;
}

.columnar-header {
    width: 2em;
    height: 2em;
    text-align: center;
    background-color: #383838;
    color: #F0E68C;
    font-weight: bold;
    border: 1px solid #5F5F5F;
    padding: 2px;
}

.columnar-cell {
    width: 2em;
    height: 2em;
    text-align: center;
    border: 1px solid #4F4F4F;
    font-weight: bold;
    color: #8CD0D3;
    padding: 2px;
}

.columnar-cell-highlight {
    background-color: #4F4F4F;
    color: #CC9393;
    border-color: #CC9393;
}

/* Responsive */
@media (max-width: 600px) {
    .cipher-grid-label {
        min-width: 5em;
        font-size: 0.8em;
    }

    .cipher-letter {
        width: 1.4em;
        height: 1.4em;
        font-size: 0.85em;
    }

    /* Shrink the bar area with the chart, or the bars overprint the
       paragraph above on phones */
    .freq-chart {
        height: 100px;
    }

    .freq-bar-area {
        height: 80px;
    }

    .vigenere-table {
        font-size: 0.6em;
    }

    .rail-cell {
        width: 1.4em;
        height: 1.4em;
        font-size: 0.85em;
    }

    .playfair-grid {
        grid-template-columns: repeat(5, 1.8em);
    }

    .playfair-cell {
        width: 1.8em;
        height: 1.8em;
        font-size: 0.85em;
    }

    .columnar-header,
    .columnar-cell {
        width: 1.6em;
        height: 1.6em;
        font-size: 0.85em;
    }
}