/* 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 #5F5F5F;
    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.85em;
}

.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 #5F5F5F;
    border-radius: 4px;
    font-size: 1em;
}

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

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

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

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

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

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

.status-strip.ok { color: #7F9F7F; }
.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 #5F5F5F;
}

.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.85em;
    min-width: 0;
}

.conf-ok { color: #7F9F7F; }
.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 #5F5F5F;
}

.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: #7F9F7F;
    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 #7F9F7F;
    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 #5F5F5F;
}

.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.75em;
    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.85em;
    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 #5F5F5F;
    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 #7F9F7F;
}

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

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

.fp-score-high { color: #7F9F7F; }
.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.85em;
    font-weight: bold;
    margin-bottom: 0.3em;
}

.cr-preview {
    width: 100%;
    padding: 0.5em;
    background-color: #2B2B2B;
    color: #DCDCCC;
    border: 1px solid #5F5F5F;
    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 #5F5F5F;
    border-radius: 4px;
}

.shift-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82em;
    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 #5F5F5F;
    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: #7F9F7F;
    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.85em;
    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.82em;
    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;
}

.gf-bar {
    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 #7F9F7F;
}

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

.gf-expected-label {
    color: #7F9F7F;
    font-size: 0.85em;
    font-style: italic;
}

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

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

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

/* ── 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.88em;
    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: #5F5F5F;
    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.75em;
    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: #7F9F7F;
    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.88em;
    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: #7F9F7F;
    font-size: 0.85em;
    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.85em;
    cursor: pointer;
}

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

/* ── Reconstruction (Panel 7) ── */
.recon-text {
    background-color: #2B2B2B;
    border: 1px solid #5F5F5F;
    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: #5F5F5F;
}

/* ── 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.82em;
    }
}

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

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

    .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 #5F5F5F;
    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.7em;
  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.7em;
  font-family: 'Courier New', monospace;
  color: #888;
  margin-left: 0.4em;
}

/* ── Crib Attack panel ────────────────────────────────────────────────────── */
.panel-tag {
  font-size: 0.6em;
  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 #5F5F5F;
  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 #5F5F5F;
  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.85em;
}
.crib-pair code {
  color: #8CD0D3;
  font-family: 'Courier New', monospace;
}
.crib-pair strong {
  color: #F0DFAF;
}