/* cryptanalysis.css — styles for hands-on codebreaking pages */

/* Interactive controls — match traditional-crypto / early-modern style */
.crypto-controls {
    margin: 1em 0;
    padding: 1em;
    background-color: #383838;
    border-radius: 6px;
}

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

.crypto-controls textarea,
.crypto-controls input[type="text"],
.crypto-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;
}

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

.crypto-controls select {
    padding: 0.5em;
    margin-bottom: 0.8em;
    background-color: #2B2B2B;
    color: #DCDCCC;
    border: 1px solid #5F5F5F;
    border-radius: 4px;
    font-size: 1em;
}

.crypto-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;
}

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

/* Also style buttons outside 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;
}

/* Output area */
.crypto-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;
    min-height: 2em;
}

/* Statistics display */
.stat-result {
    padding: 0.8em 1em;
    margin: 0.5em 0;
    background-color: #383838;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}

.stat-label {
    color: #F0E68C;
    font-weight: bold;
}

.stat-value {
    color: #8CD0D3;
    font-size: 1.2em;
}

.stat-interpretation {
    color: #9CB89C;
    font-size: 0.9em;
    margin-top: 0.3em;
}

/* Bar charts */
.stat-bar-chart {
    margin: 1em 0;
}

.stat-bar-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.4em;
}

.stat-bar-label {
    min-width: 10em;
    color: #F0E68C;
    font-size: 0.9em;
    flex-shrink: 0;
}

.stat-bar {
    height: 1.4em;
    border-radius: 3px;
    transition: width 0.5s ease;
    display: flex;
    align-items: center;
    padding-left: 0.5em;
    font-size: 0.8em;
    font-family: 'Courier New', monospace;
    color: #2B2B2B;
    font-weight: bold;
}

.stat-bar-english {
    background-color: #7F9F7F;
}

.stat-bar-random {
    background-color: #CC9393;
}

.stat-bar-sample {
    background-color: #8CD0D3;
}

/* 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 bar charts 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. */
.stat-bar,
.freq-bar,
.freq-legend-english,
.freq-legend-cipher {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

@media print {
    .stat-bar,
    .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;
    }
}

/* Kasiski table */
.kasiski-table {
    border-collapse: collapse;
    margin: 1em 0;
    width: 100%;
}

.kasiski-table th {
    background-color: #383838;
    color: #F0E68C;
    font-weight: bold;
    text-align: left;
    padding: 0.5em;
    border: 1px solid #5F5F5F;
}

.kasiski-table td {
    padding: 0.4em 0.5em;
    border: 1px solid #4F4F4F;
    font-family: 'Courier New', monospace;
}

/* Highlighted text spans */
.highlight-match {
    background-color: #4F4F4F;
    color: #F0DFAF;
    padding: 0.1em 0.2em;
    border-radius: 2px;
}

/* 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;
}

/* Glossary styles */
.glossary-entry {
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 1px solid #4F4F4F;
}

.glossary-entry:last-child {
    border-bottom: none;
}

.glossary-term {
    font-size: 1.15em;
    font-weight: bold;
    color: #F0E68C;
}

.glossary-def {
    margin: 0.4em 0 0.3em 1em;
}

.used-on {
    margin-left: 1em;
    font-size: 0.9em;
    font-style: italic;
}

.topic-heading {
    margin-top: 2em;
    padding-top: 0.5em;
    border-top: 2px solid #7F9F7F;
}

/* 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;
}

/* ===== Solver-specific styles ===== */

/* Solver workspace — the main interactive area */
.solver-workspace {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1em;
    margin: 1em 0;
}

.solver-text {
    padding: 1em;
    background-color: #2B2B2B;
    border: 1px solid #5F5F5F;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 1.05em;
    line-height: 1.8;
    word-break: break-all;
    overflow-y: auto;
    max-height: 400px;
}

.solver-sidebar {
    background-color: #383838;
    border: 1px solid #5F5F5F;
    border-radius: 4px;
    padding: 0.8em;
    overflow-y: auto;
    max-height: 400px;
}

.solver-sidebar h4 {
    margin-top: 0;
    color: #F0E68C;
}

/* Individual letters in solver display */
.solver-letter {
    display: inline;
    cursor: pointer;
    padding: 0.05em;
    border-radius: 2px;
    transition: background-color 0.15s;
}

.solver-letter-unsolved {
    color: #CC9393;
}

.solver-letter-solved {
    color: #8CD0D3;
}

.solver-letter-selected {
    background-color: #5F5F5F;
    outline: 1px solid #F0E68C;
}

.solver-letter-space {
    display: inline;
    width: 0.5em;
}

/* Mapping table */
.mapping-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
}

.mapping-table td {
    padding: 0.2em 0.4em;
    border: 1px solid #4F4F4F;
    text-align: center;
}

.mapping-table .mapping-cipher {
    color: #CC9393;
    font-weight: bold;
    background-color: #2B2B2B;
}

.mapping-table .mapping-plain {
    color: #8CD0D3;
    background-color: #383838;
    cursor: pointer;
}

.mapping-table .mapping-plain:hover {
    background-color: #4F4F4F;
}

/* Step indicator for multi-step walkthroughs */
.step-indicator {
    display: flex;
    gap: 0.5em;
    margin: 1em 0;
    flex-wrap: wrap;
}

.step-badge {
    padding: 0.4em 0.8em;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: bold;
    border: 1px solid #5F5F5F;
    cursor: pointer;
    transition: all 0.2s;
}

.step-badge-pending {
    background-color: #2B2B2B;
    color: #A1A1A1; /* was #5F5F5F. Appears on both #2B2B2B and #383838; #929292
                      cleared only the darker panel, so this targets the lighter one. */
}

.step-badge-active {
    background-color: #456145;
    color: #DCDCCC;
    border-color: #7F9F7F;
}

.step-badge-complete {
    background-color: #383838;
    color: #9CB89C;
    border-color: #7F9F7F;
}

/* Step content area */
.step-content {
    display: none;
    margin: 1em 0;
    padding: 1em;
    background-color: #383838;
    border-radius: 6px;
    border-left: 3px solid #7F9F7F;
}

.step-content.active {
    display: block;
}

/* Anagram columns for transposition breaking */
.anagram-workspace {
    display: flex;
    gap: 2px;
    margin: 1em 0;
    overflow-x: auto;
    padding-bottom: 0.5em;
}

.anagram-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 2em;
    cursor: grab;
    border: 1px solid #4F4F4F;
    border-radius: 3px;
    background-color: #2B2B2B;
    transition: border-color 0.2s, background-color 0.2s;
}

.anagram-column:hover {
    border-color: #7F9F7F;
}

.anagram-column.selected {
    border-color: #F0E68C;
    background-color: #383838;
}

.anagram-column-header {
    padding: 0.3em 0.4em;
    font-weight: bold;
    color: #F0E68C;
    font-size: 0.8em;
    border-bottom: 1px solid #4F4F4F;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.anagram-column-cell {
    padding: 0.15em 0.4em;
    font-family: 'Courier New', monospace;
    color: #DCDCCC;
    font-size: 0.9em;
}

/* Digraph score indicator */
.digraph-score {
    display: inline-block;
    padding: 0.2em 0.6em;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 0.9em;
}

.digraph-score-good {
    background-color: rgba(127, 159, 127, 0.3);
    color: #9CB89C;
    border: 1px solid #7F9F7F;
}

.digraph-score-bad {
    background-color: rgba(204, 147, 147, 0.15);
    color: #CC9393;
    border: 1px solid #CC9393;
}

/* Pattern analysis results */
.pattern-results {
    margin: 1em 0;
    padding: 1em;
    background-color: #383838;
    border-radius: 4px;
}

.pattern-results h4 {
    margin-top: 0;
    color: #F0E68C;
}

.pattern-item {
    margin: 0.3em 0;
    font-family: 'Courier New', monospace;
}

.pattern-cipher {
    color: #CC9393;
    font-weight: bold;
}

.pattern-arrow {
    color: #A1A1A1; /* was #5F5F5F. Appears on both #2B2B2B and #383838; #929292
                      cleared only the darker panel, so this targets the lighter one. */
    margin: 0 0.3em;
}

.pattern-guess {
    color: #9CB89C;
}

/* History box */
.history-box {
    margin: 1em 0;
    padding: 1em;
    background-color: #383838;
    border-radius: 6px;
    border-left: 3px solid #DFAF8F;
}

.history-box h4 {
    margin-top: 0;
    color: #DFAF8F;
}

/* Responsive */
@media (max-width: 768px) {
    .solver-workspace {
        grid-template-columns: 1fr;
    }

    .solver-sidebar {
        max-height: 250px;
    }

    .anagram-workspace {
        flex-wrap: nowrap;
    }
}

@media (max-width: 600px) {
    .stat-bar-label {
        min-width: 7em;
        font-size: 0.8em;
    }

    .freq-chart {
        height: 100px;
    }

    .step-indicator {
        gap: 0.3em;
    }

    .step-badge {
        font-size: 0.8em;
        padding: 0.3em 0.5em;
    }
}

/* Wide result tables scroll sideways on narrow screens instead of being
   clipped (the Kasiski trigram table and the per-column shift table). */
.table-scroll {
    overflow-x: auto;
    max-width: 100%;
}

/* Short-celled tables (the per-column shift table) keep each row on one
   line and scroll sideways instead of wrapping "A (shift 0, ...)" into six
   lines on a phone. */
.kasiski-compact td,
.kasiski-compact th {
    white-space: nowrap;
}

/* Note beside a stat bar, such as the column IC next to a factor count */
.stat-bar-note {
    margin-left: 0.5em;
    font-size: 0.8em;
    color: #DCDCCC;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Auto-Solve's near-tied readings */
.close-calls {
    list-style: none;
    padding-left: 0;
    margin: 0.5em 0 0;
}
.close-calls li {
    margin-bottom: 0.4em;
}
.close-calls .close-call-text {
    display: inline;
    padding: 0.1em 0.3em;
    word-break: break-all;
}
.close-calls button {
    font-size: 0.85em;
    padding: 0.2em 0.6em;
    margin-left: 0.3em;
}