/* early-modern-crypto.css — styles for early modern cryptanalysis pages */

/* Timeline */
.timeline {
    position: relative;
    margin: 1.5em 0;
    padding-left: 2em;
    border-left: 3px solid #5F5F5F;
}

.timeline-event {
    position: relative;
    margin-bottom: 1.5em;
    padding: 0.8em 1em;
    background-color: #383838;
    border-radius: 6px;
}

.timeline-event::before {
    content: '';
    position: absolute;
    left: -1.65em;
    top: 1.1em;
    width: 0.8em;
    height: 0.8em;
    background-color: #7F9F7F;
    border: 2px solid #2B2B2B;
    border-radius: 50%;
}

.timeline-date {
    font-weight: bold;
    color: #F0E68C;
    font-size: 0.9em;
    margin-bottom: 0.3em;
}

.timeline-event p {
    margin: 0.3em 0;
}

/* Info boxes for historical context */
.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;
}

/* Quote blocks for historical quotes */
.historical-quote {
    margin: 1em 0;
    padding: 0.8em 1.2em;
    background-color: #383838;
    border-left: 3px solid #CC9393;
    border-radius: 0 6px 6px 0;
    font-style: italic;
}

.historical-quote .attribution {
    display: block;
    margin-top: 0.5em;
    font-style: normal;
    color: #9CB89C;
    font-size: 0.9em;
}

/* Code number display (for Zimmermann telegram) */
.code-display {
    font-family: 'Courier New', monospace;
    padding: 1em;
    margin: 1em 0;
    background-color: #2B2B2B;
    border: 1px solid #5F5F5F;
    border-radius: 4px;
    line-height: 1.8;
    word-spacing: 0.5em;
    overflow-x: auto;
}

.code-number {
    display: inline;
    color: #DCDCCC;
    cursor: pointer;
    padding: 0.1em 0.2em;
    border-radius: 2px;
    transition: background-color 0.2s;
}

.code-number:hover {
    background-color: #4F4F4F;
    color: #F0DFAF;
}

.code-number-decoded {
    background-color: #4F4F4F;
    color: #8CD0D3;
}

/* Interactive controls — match traditional-crypto 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;
}

/* Codebook table */
.codebook-table {
    border-collapse: collapse;
    font-family: 'Courier New', monospace;
    margin: 1em 0;
    width: 100%;
}

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

.codebook-table td {
    padding: 0.4em 0.8em;
    border: 1px solid #4F4F4F;
    color: #DCDCCC;
}

.codebook-table tr:hover {
    background-color: #383838;
}

.codebook-code {
    color: #CC9393;
    font-weight: bold;
}

.codebook-word {
    color: #8CD0D3;
}

/* 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 chart for IC / chi-squared comparison */
.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 (reuse from traditional-crypto) */
.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 (matches traditional-crypto) */
.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;
}

/* Responsive */
@media (max-width: 600px) {
    .timeline {
        padding-left: 1.5em;
    }

    .stat-bar-label {
        min-width: 7em;
        font-size: 0.8em;
    }

    .codebook-table {
        font-size: 0.85em;
    }

    .freq-chart {
        height: 100px;
    }
}

/* Wide tables scroll inside their box on narrow screens instead of widening the page */
.table-scroll { overflow-x: auto; }

/* Zimmermann telegram: decoded groups by kind */
.code-number-stop { color: #9FA89F; }
.code-number-spell { text-decoration: underline dotted; }
.code-number-meta { font-style: italic; color: #9FA89F; }
.zt-code { color: #CC9393; font-weight: bold; }
.zt-de { color: #8CD0D3; }
.zt-en { color: #DCDCCC; }
.zt-progress { font-size: 0.9em; color: #9FA89F; margin: 0.3em 0; }
.zt-lang { margin-left: 1em; display: inline-block; margin-top: 0.4em; }
.crypto-controls { flex-wrap: wrap; }
.zt-lang button { padding: 0.3em 0.8em; }
.zt-lang button.active { background-color: #ABCFAB; color: #2B2B2B; }
.zt-exhibit td:first-child { color: #CC9393; font-weight: bold; }