/* decryptor.css — page-specific styles for CODEX Decryptor */
/* Extends zenburn-theme.css; uses the same color palette */

/* Widen container for this tool */
.container {
    max-width: 960px;
}

/* ── Input panel ── */
.input-panel {
    margin: 1em 0;
    padding: 1em;
    background-color: #383838;
    border-radius: 6px;
}

.input-panel label {
    display: block;
    color: #F0E68C;
    font-weight: bold;
    font-size: 0.9em;
    margin-bottom: 0.4em;
}

.input-panel textarea {
    width: 100%;
    padding: 0.6em;
    background-color: #2B2B2B;
    color: #DCDCCC;
    border: 1px solid #909090;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.95em;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.5;
}

.input-panel textarea:focus {
    border-color: #8CD0D3;
    outline: none;
}

.input-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-top: 0.6em;
    align-items: center;
}

.override-wrap {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.95em;
}

.override-wrap label {
    color: #DCDCCC;
    font-weight: normal;
    font-size: 1em;
    margin-bottom: 0;
}

.override-wrap select {
    padding: 0.35em 0.5em;
    background-color: #2B2B2B;
    color: #DCDCCC;
    border: 1px solid #909090;
    border-radius: 4px;
    font-size: 1em;
}

.override-wrap select:focus {
    border-color: #8CD0D3;
    outline: none;
}

/* ── Buttons ── */
button {
    padding: 0.5em 1.2em;
    background-color: #456145;
    color: #DCDCCC;
    border: 1px solid #ABCFAB;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

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

button.primary {
    background-color: #456145;
    color: #DCDCCC;
    border: 2px solid #ABCFAB;
    font-weight: bold;
    font-size: 1.1em;
    padding: 0.6em 2em;
}

button.primary:hover {
    background-color: #ABCFAB;
    color: #2B2B2B;
}

/* ── Status strip ── */
.status-strip {
    padding: 0.4em 0;
    font-size: 0.9em;
    min-height: 1.6em;
}

.status-strip.ok { color: #ABCFAB; }
.status-strip.err { color: #CC9393; }
.status-strip.warn { color: #F0DFAF; }

/* ── Confidence bar ── */
.confidence-bar {
    padding: 0.8em 1em;
    margin: 0.5em 0;
    background-color: #383838;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6em 1em;
    font-size: 0.9em;
}

.conf-label {
    color: #F0E68C;
    font-weight: bold;
    font-size: 0.9em;
    white-space: nowrap;
}

.conf-meter {
    flex: 1;
    height: 8px;
    background: #2B2B2B;
    border-radius: 4px;
    overflow: hidden;
    min-width: 80px;
    border: 1px solid #909090;
}

.conf-fill {
    height: 100%;
    border-radius: 4px;
    background: #7F9F7F;
    transition: width 0.3s, background 0.3s;
}

.conf-fill.warn { background: #F0DFAF; }
.conf-fill.err { background: #CC9393; }

.conf-text {
    font-family: 'Courier New', monospace;
    font-size: 0.95em;
    min-width: 0;
}

.conf-ok { color: #ABCFAB; }
.conf-warn { color: #F0DFAF; }
.conf-err { color: #CC9393; }

/* ── Analysis panels ── */
.analysis-panel {
    margin: 1em 0;
    padding: 1em;
    background-color: #383838;
    border-radius: 6px;
    border-left: 3px solid #909090;
}

.analysis-panel h3 {
    font-size: 1em;
    color: #F0E68C;
    margin: 0 0 0.8em 0;
}

.analysis-note {
    font-size: 0.9em;
    color: #DCDCCC;
    line-height: 1.6;
    margin: 0.5em 0;
    white-space: pre-line;
}

.analysis-verdict {
    font-size: 0.95em;
    color: #ABCFAB;
    line-height: 1.6;
    margin: 0.8em 0 0.3em 0;
    padding: 0.5em 0.8em;
    background-color: rgba(127, 159, 127, 0.1);
    border-left: 3px solid #ABCFAB;
    border-radius: 0 4px 4px 0;
}

.hidden {
    display: none;
}

/* ── Stats strip (Panel 1) ── */
.stats-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background-color: #2B2B2B;
    border-radius: 6px;
    font-size: 0.9em;
    margin: 0.5em 0;
}

.stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5em 1em;
    gap: 0.15em;
    border-right: 1px solid #909090;
}

.stat-cell:last-child {
    border-right: none;
}

.stat-cell .sv {
    color: #8CD0D3;
    font-size: 1.1em;
    font-weight: bold;
    font-family: 'Courier New', monospace;
}

.stat-cell .sl {
    font-size: 0.9em;
    color: #DCDCCC;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Fingerprint table (Panel 2) ── */
.fp-table-wrap {
    overflow-x: auto;
    margin: 0.5em 0;
}

.fp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    font-family: 'Courier New', monospace;
}

.fp-table th {
    background-color: #2B2B2B;
    color: #F0E68C;
    padding: 0.5em 0.6em;
    text-align: left;
    border-bottom: 2px solid #909090;
    font-size: 0.9em;
    white-space: nowrap;
}

.fp-table td {
    padding: 0.4em 0.6em;
    border-bottom: 1px solid #333;
    color: #DCDCCC;
}

.fp-table tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.12);
}

.fp-table tr.fp-best {
    background-color: rgba(127, 159, 127, 0.15);
    border-left: 3px solid #ABCFAB;
}

.fp-table tr.fp-best td:first-child {
    color: #ABCFAB;
    font-weight: bold;
}

.fp-score {
    font-weight: bold;
}

.fp-score-high { color: #ABCFAB; }
.fp-score-mid { color: #F0DFAF; }
.fp-score-low { color: #CC9393; }

/* ── Cipher removal (Panel 3) ── */
.cr-preview-wrap {
    margin-top: 0.8em;
}

.cr-preview-wrap label {
    display: block;
    color: #F0E68C;
    font-size: 0.95em;
    font-weight: bold;
    margin-bottom: 0.3em;
}

.cr-preview {
    width: 100%;
    padding: 0.5em;
    background-color: #2B2B2B;
    color: #DCDCCC;
    border: 1px solid #909090;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    resize: vertical;
    box-sizing: border-box;
}

/* Shift analysis table */
.shift-table-wrap {
    max-height: 260px;
    overflow-y: auto;
    margin: 0.5em 0;
    border: 1px solid #909090;
    border-radius: 4px;
}

.shift-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    font-family: 'Courier New', monospace;
}

.shift-table th {
    background-color: #2B2B2B;
    color: #F0E68C;
    padding: 0.4em 0.5em;
    text-align: left;
    border-bottom: 1px solid #909090;
    position: sticky;
    top: 0;
    z-index: 1;
}

.shift-table td {
    padding: 0.3em 0.5em;
    border-bottom: 1px solid #333;
    color: #DCDCCC;
}

.shift-table tr.shift-best {
    background-color: rgba(127, 159, 127, 0.2);
}

.shift-table tr.shift-best td {
    color: #ABCFAB;
    font-weight: bold;
}

/* Frequency comparison */
.freq-compare {
    display: flex;
    gap: 1em;
    margin: 0.5em 0;
    flex-wrap: wrap;
}

.freq-col {
    flex: 1;
    min-width: 200px;
}

.freq-col h4 {
    font-size: 0.95em;
    color: #F0E68C;
    margin: 0 0 0.4em 0;
}

/* ── Group frequency chart (Panel 4) ── */
.gf-chart {
    margin: 0.5em 0;
}

.gf-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 2px;
    font-size: 0.95em;
    font-family: 'Courier New', monospace;
}

.gf-label {
    width: 7em;
    text-align: right;
    color: #8CD0D3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.gf-bar-wrap {
    flex: 1;
    height: 14px;
    background: #2B2B2B;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

/* display: block because the bars are <span>s: as inline boxes their width
   and height were ignored, so the observed bar never showed at all. */
.gf-bar {
    display: block;
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s;
}

.gf-bar-observed {
    background-color: #8CD0D3;
}

.gf-bar-expected {
    background-color: rgba(127, 159, 127, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-right: 2px solid #ABCFAB;
}

.gf-pct {
    width: 4em;
    text-align: right;
    color: #DCDCCC;
    font-size: 0.9em;
    flex-shrink: 0;
}

.gf-expected-label {
    color: #ABCFAB;
    font-size: 0.95em;
    font-style: italic;
}

.gf-legend {
    display: flex;
    gap: 1.5em;
    margin: 0.5em 0;
    font-size: 0.95em;
}

.gf-legend-item {
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.gf-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

/* Printing. The bars and legend swatches are 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 chart printed as empty rows. print-color-adjust: exact keeps these
   particular backgrounds (but not the dark track behind them, which would
   only waste ink). On paper the bars also get a thin dark border so they
   still show on a black-and-white printer; the expected-English bar and its
   swatch get a dashed one so the two can be told apart. */
.gf-bar,
.gf-bar-expected,
.gf-legend-swatch {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

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

    .gf-bar-expected {
        box-sizing: border-box;
        border: 1px dashed #2B2B2B;
    }

    .gf-legend-item:last-child .gf-legend-swatch {
        border-style: dashed;
    }
}

/* ── Mapping grid (Panel 5) ── */
.mapping-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 0;
    margin: 0.5em 0;
    font-family: 'Courier New', monospace;
    font-size: 0.95em;
    background-color: #2B2B2B;
    border-radius: 4px;
    overflow: hidden;
}

.mapping-entry {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.35em 0.8em;
    border-bottom: 1px solid #333;
    min-width: 0;
}

.mapping-entry:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.12);
}

.mg-code {
    color: #8CD0D3;
    font-weight: bold;
    min-width: 5em;
    flex-shrink: 0;
}

.mg-arrow {
    color: #C0C0B0;
    flex-shrink: 0;
}

.mg-token {
    color: #DCDCCC;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mg-confidence {
    font-size: 0.9em;
    font-weight: bold;
    padding: 0.15em 0.5em;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    white-space: nowrap;
}

.conf-high {
    color: #ABCFAB;
    background-color: rgba(127, 159, 127, 0.15);
}

.conf-med {
    color: #F0DFAF;
    background-color: rgba(240, 223, 175, 0.12);
}

.conf-low {
    color: #CC9393;
    background-color: rgba(204, 147, 147, 0.12);
}

/* ── Read-more toggles ── */
.read-more {
    margin: 0.6em 0 0.2em 0;
}

.read-more summary {
    color: #8CD0D3;
    cursor: pointer;
    font-size: 0.95em;
    padding: 0.3em 0;
    user-select: none;
}

.read-more summary:hover {
    color: #F0E68C;
}

.read-more .analysis-note {
    margin-top: 0.5em;
}

/* ── Reference ranges ── */
.ref-range {
    color: #ABCFAB;
    font-size: 0.95em;
    font-style: italic;
}

/* ── Reconstruction controls ── */
.recon-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em 1.2em;
    margin-bottom: 0.8em;
    font-size: 0.9em;
    padding: 0.5em 0.8em;
    background: #2B2B2B;
    border-radius: 4px;
}

.recon-controls label {
    display: flex;
    align-items: center;
    gap: 0.35em;
    color: #DCDCCC;
    cursor: pointer;
    font-weight: normal;
    font-size: 1em;
    margin-bottom: 0;
}

.recon-controls label:has(input:disabled) {
    opacity: 0.4;
    cursor: default;
}

.recon-controls input[type="checkbox"] {
    accent-color: #8CD0D3;
}

.recon-sep {
    margin-left: auto;
}

.recon-truncated {
    text-align: center;
    padding: 0.5em;
    color: #F0DFAF;
    font-size: 0.95em;
    cursor: pointer;
}

.recon-truncated:hover {
    color: #8CD0D3;
}

/* ── Reconstruction (Panel 7) ── */
.recon-text {
    background-color: #2B2B2B;
    border: 1px solid #909090;
    border-radius: 4px;
    padding: 1em;
    font-family: 'Courier New', monospace;
    font-size: 0.95em;
    line-height: 2;
    min-height: 3em;
    word-wrap: break-word;
}

.recon-known {
    color: #8CD0D3;
}

.recon-known-med {
    color: #F0DFAF;
}

.recon-unknown {
    color: #CC9393;
    text-decoration: underline dotted #CC9393;
}

.recon-space {
    color: #C0C0B0;
}

/* ── Context attack (Panels 7-8) ── */
.ctx-subhead {
    font-size: 0.9em;
    color: #F0E68C;
    margin: 1em 0 0.4em 0;
}

/* Low-confidence guesses shown in reconstruction (dimmer than unknown) */
.recon-unknown-guess {
    color: #9F9F7F;
    font-style: italic;
}

/* ── Beyond Frequency Analysis section ── */
.beyond-section {
    margin: 2em 0 1em 0;
    padding: 1.5em;
    background-color: #383838;
    border-radius: 6px;
    border-left: 3px solid #8CD0D3;
    line-height: 1.7;
}

.beyond-section h2 {
    color: #8CD0D3;
    font-size: 1.2em;
    margin: 0 0 0.8em 0;
}

.beyond-section h3 {
    color: #F0E68C;
    font-size: 1em;
    margin: 1.2em 0 0.4em 0;
}

.beyond-section p {
    font-size: 0.9em;
    color: #DCDCCC;
    margin: 0.5em 0;
}

.beyond-section ul {
    font-size: 0.9em;
    color: #DCDCCC;
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.beyond-section li {
    margin: 0.4em 0;
    line-height: 1.6;
}

.beyond-section em {
    color: #F0DFAF;
    font-style: italic;
}

.beyond-section strong {
    color: #DCDCCC;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .stats-strip {
        flex-wrap: wrap;
    }

    .stat-cell {
        flex: 1;
        min-width: 5em;
    }

    .confidence-bar {
        flex-wrap: wrap;
    }

    .mapping-grid {
        grid-template-columns: 1fr;
        font-size: 0.95em;
    }
}

@media (max-width: 600px) {
    .container {
        padding: 1em;
        max-width: 100%;
    }

    .fp-table {
        font-size: 0.9em;
    }

    .gf-label {
        width: 5em;
    }
}

/* Cross-page navigation strip (added when codebook tools moved into codebooks/ dir) */
nav.section-nav {
    text-align: center;
    font-size: 0.9em;
    margin: 0.5em auto 1.5em auto;
    padding-bottom: 0.5em;
    border-bottom: 1px dotted #909090;
    color: #8FB28F;
}
nav.section-nav a {
    color: #DCDCCC;
    text-decoration: none;
}
nav.section-nav a:hover {
    color: #F0DFAF;
    text-decoration: underline;
}
nav.section-nav strong {
    color: #F0DFAF;
}

/* ── Chunk-run wrapping in the reconstruction view ────────────────────────────
   A "chunk run" is a sequence of ≥2 consecutive non-space code groups in the
   codetext — typically a single plaintext word that the codebook didn't have
   and so spelled out chunk-by-chunk. We wrap it visually so the reader sees
   one spelled-out word, not several short adjacent words. */
.recon-chunked {
  display: inline-block;
  padding: 0 0.15em;
  margin: 0 0.05em;
  background: rgba(140, 208, 211, 0.06);
  border-bottom: 1px dotted #6F8F8F;
  border-radius: 2px;
}
/* Individual letter/digram/trigram guess inside a chunk run.  Always low
   confidence regardless of the rank-mapping verdict — the codebook's
   trigram/digram coverage means we don't know whether the chunk is one
   letter or several, so we render cautiously. */
.recon-chunk-guess {
  color: #C0C8B8;
  font-style: italic;
}

/* Per-entry annotations in the Best-Guess Mapping table */
.mg-kind {
  font-size: 0.9em;
  padding: 0.1em 0.45em;
  border-radius: 3px;
  margin-left: 0.4em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mg-kind-word  { background: rgba(143, 178, 143, 0.18); color: #B0D0B0; }
.mg-kind-chunk { background: rgba(220, 180, 130, 0.16); color: #DCB482; }
.mg-profile {
  font-size: 0.9em;
  font-family: 'Courier New', monospace;
  color: #888;
  margin-left: 0.4em;
}

/* ── Crib Attack panel ────────────────────────────────────────────────────── */
.panel-tag {
  font-size: 0.9em;
  font-weight: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8FB28F;
  background: rgba(143, 178, 143, 0.12);
  padding: 0.1em 0.5em;
  border-radius: 3px;
  margin-left: 0.5em;
  vertical-align: middle;
}
.crib-input-wrap {
  margin: 1em 0;
}
.crib-input-wrap label {
  display: block;
  margin-bottom: 0.4em;
}
#crib-input {
  width: 100%;
  background: #2B2B2B;
  color: #F0DFAF;
  border: 1px solid #909090;
  padding: 0.5em;
  font-family: 'Courier New', monospace;
  font-size: 0.95em;
  resize: vertical;
  box-sizing: border-box;
}
.crib-controls {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-top: 0.5em;
  flex-wrap: wrap;
}
.crib-results {
  margin-top: 0.5em;
}
.crib-line {
  border: 1px solid #909090;
  background: #2B2B2B;
  padding: 0.6em 0.8em;
  margin-bottom: 0.6em;
  border-radius: 3px;
}
.crib-line-input {
  font-size: 0.9em;
  margin-bottom: 0.4em;
  color: #DCDCCC;
}
.crib-line-input code {
  background: #1F1F1F;
  padding: 0.1em 0.4em;
  border-radius: 2px;
  color: #F0DFAF;
}
.crib-word {
  margin: 0.3em 0 0.3em 1.2em;
  font-size: 0.9em;
}
.crib-word-text {
  font-family: 'Courier New', monospace;
  color: #F0DFAF;
  font-weight: bold;
}
.crib-ok {
  color: #B0D0B0;
  font-style: italic;
}
.crib-fail {
  color: #CC9393;
  font-style: italic;
}
.crib-chunking {
  color: #8FB28F;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  margin-left: 0.5em;
}
.crib-mapping {
  margin-top: 0.3em;
  display: flex;
  gap: 0.4em;
  flex-wrap: wrap;
}
.crib-pair {
  background: #1F1F1F;
  padding: 0.2em 0.5em;
  border-radius: 2px;
  font-size: 0.95em;
}
.crib-pair code {
  color: #8CD0D3;
  font-family: 'Courier New', monospace;
}
.crib-pair strong {
  color: #F0DFAF;
}