/* The deciphering workspace: editable message on the left, evidence on the right. */
.decipher-desk { margin-bottom:35px; border:1px solid var(--line); border-radius:14px; background:#fffefa; }
.decipher-desk [hidden] { display:none!important; }
.desk-intro { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:30px 32px; }
.desk-intro h3 { margin:0; font:38px/1.08 'Libre Caslon Display',Georgia,serif; letter-spacing:-.7px; }
.desk-intro h3 em { color:var(--purple); font-weight:400; }
.desk-intro p { max-width:340px; margin:0; font-size:14px; line-height:1.7; color:var(--muted); }
.desk-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-top:1px solid var(--line); }
.message-workbench { min-width:0; padding:28px 32px; }
.decipher-desk .help { font-size:12px; line-height:1.6; margin:10px 0 16px; }
.desk-caption { font-size:11px!important; letter-spacing:0!important; font-weight:400!important; color:var(--muted); }
.decipher-desk textarea { display:block; width:100%; height:128px; margin-top:10px; padding:14px 16px; resize:vertical; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); font:13px/1.75 var(--mono); }
.decipher-desk :is(input,textarea,select):focus-visible { outline:2px solid var(--purple); outline-offset:3px; }
.decipher-desk select { min-width:0; max-width:100%; min-height:36px; padding:7px 28px 7px 10px; border:1px solid #d7d5ce; border-radius:6px; background:#fffefa; color:var(--ink); font:12px var(--mono); }
.key-workbench { margin:22px 0 25px; padding:18px 20px; border:1px solid #e3d9cb; border-radius:9px; background:#faf5eb; }
.key-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.key-heading h3 { font-size:15px; font-weight:600; margin:0; }
.key-heading label { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:400; letter-spacing:0; }
.key-guesses { display:flex; gap:7px; overflow-x:auto; padding:4px 3px 10px; margin:16px -3px 4px; scrollbar-width:thin; }
.key-guess { flex:0 0 43px; text-align:center; }
.key-guess label { display:block; margin:0 0 6px; color:#817464; font:10px var(--mono); }
.key-guess input { width:100%; height:45px; padding:0; text-align:center; text-transform:uppercase; border:1px solid #dbcdba; border-radius:6px; background:#fffefa; color:#8b542c; font:23px var(--mono); }
.key-guess.active input { border-color:var(--orange); background:#f7e9d8; box-shadow:0 0 0 1px var(--orange); }
.desk-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.desk-button { min-height:36px; border:1px solid #d3c8e9; border-radius:6px; padding:8px 13px; color:var(--purple); background:#fffefa; font-size:12px; font-weight:500; }
.desk-button:hover:not(:disabled) { background:var(--purple-light); }
.desk-button.primary-button { background:var(--purple); border-color:var(--purple); color:white; }
.desk-button.primary-button:hover:not(:disabled) { background:#5939ac; }
.desk-button.quiet-button { border-color:transparent; background:transparent; color:#76695c; }
.key-workbench .help { margin:10px 0 0; font-size:11px; }
.result-panel>.desk-button { align-self:flex-start; margin:0 0 18px; background:#ffffff55; }
.preview-heading>span { color:var(--green); }
#plaintext-preview { display:block; height:196px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; margin:10px 0 12px; padding:16px 18px; border:1px solid #d3ddce; border-radius:7px; background:#edf2e9; color:#36573f; font:14px/1.8 var(--mono); scrollbar-width:thin; }
.preview-footer { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:8px; }
.preview-footer .text-button { font-size:12px; }
.analysis-workbench { min-width:0; display:flex; flex-direction:column; background:#f3f2ec; border-left:1px solid var(--line); border-radius:0 0 14px 0; padding:24px; }
.analysis-tabs { display:flex; gap:4px; padding:4px; border:1px solid #e2e0d7; border-radius:8px; background:#eae9e2; }
.analysis-tabs button { flex:1; min-width:0; min-height:40px; border:0; border-radius:5px; padding:9px 6px; background:transparent; color:#65685f; font-size:13px; font-weight:500; }
.analysis-tabs button[aria-selected=true] { background:#fffefa; color:var(--purple); box-shadow:0 1px 4px #292b2912; }
.analysis-panel { padding:28px 4px 0; min-width:0; }
.desk-eyebrow { margin:0 0 12px; color:var(--purple); font:10px var(--mono); letter-spacing:1px; }
.analysis-panel h3 { margin:0 0 12px; font-size:23px; font-weight:500; letter-spacing:-.6px; }
.panel-description { margin:0 0 24px; font-size:13px; line-height:1.8; color:#686b62; }
.chart-heading { display:flex; justify-content:space-between; gap:10px; margin-bottom:10px; font-size:11px; color:#74766e; }
#length-selection { color:var(--purple); font-family:var(--mono); white-space:nowrap; }
.length-chart-scroll,.frequency-chart-scroll { overflow-x:auto; padding:4px 3px 9px; margin:0 -3px; scrollbar-width:thin; }
.length-clues { display:flex; gap:4px; min-width:420px; height:168px; align-items:stretch; border-bottom:1px solid #d7d8ce; background:linear-gradient(to top,transparent 115px,#d4d8ca 115px,#d4d8ca 116px,transparent 116px); }
.length-clue { flex:1; min-width:0; position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; padding:0 0 9px; border:0; border-radius:4px 4px 0 0; background:transparent; color:#73766d; }
.length-clue i { display:block; width:72%; min-height:2px; height:var(--bar-height); max-height:132px; margin-bottom:10px; border-radius:3px 3px 0 0; background:#c8bddf; }
.length-clue strong { font:10px var(--mono); font-weight:400; }
.length-clue:hover,.length-clue:focus-visible { background:#e6e0ef; }
.length-clue[aria-pressed=true] { color:var(--purple); background:#e7e0f1; }
.length-clue[aria-pressed=true] i { background:var(--purple); }
.length-clue[aria-pressed=true] strong { font-weight:500; }
.chart-scroll-hint { display:none; margin:6px 0 12px; font-size:10px; color:#797c72; }
.chart-reference { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:10px; color:#797c72; font-size:10px; }
.chart-reference span { display:flex; align-items:center; gap:5px; }
.chart-reference i { width:14px; height:1px; background:#a9b398; }
.analysis-status { padding:14px 16px; margin:24px 0 16px; background:#e9ece2; border-radius:6px; color:#5e6a53; font-size:12px; line-height:1.7; }
.desk-details { border-top:1px solid #dddfd5; padding:13px 0; }
.desk-details summary { cursor:pointer; color:#62675c; font-size:12px; line-height:1.5; }
.desk-details p { font-size:12px; line-height:1.8; color:var(--muted); }
.desk-footnote { margin:auto 4px 0; padding-top:24px; color:#7c7f75; font-size:11px; line-height:1.7; }
.column-controls { display:flex; gap:14px; }
.column-controls label { display:flex; flex-direction:column; gap:7px; font-size:11px; font-weight:500; letter-spacing:0; }
.column-controls label:last-child { flex:1; min-width:0; }
.column-controls select { width:100%; }
.frequency-process { margin-top:16px; padding:13px 15px; border:1px solid #deded3; border-radius:7px; background:#fffefa; }
.frequency-process p { margin:0 0 9px; color:#686b62; font-size:12px; line-height:1.7; }
.frequency-process p:last-of-type { color:var(--ink); }
.shift-example { display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:7px 10px; padding-top:5px; }
.shift-example span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.7px; }
.shift-example code { color:var(--purple); font:13px/1.5 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; }
.shift-example code:last-child { color:var(--green); }
#frequency-scale { white-space:nowrap; font-family:var(--mono); }
.frequency-key { display:flex; flex-wrap:wrap; gap:16px; margin:22px 0 10px; color:#6d7266; font-size:11px; }
.frequency-key span { display:flex; align-items:center; gap:6px; }
.frequency-key i { width:7px; height:7px; border-radius:2px; background:var(--purple); }
.frequency-key span+span i { background:#a8b896; }
.frequency-chart { display:flex; gap:4px; min-width:420px; height:148px; border-bottom:1px solid #d7d8ce; }
.frequency-bin { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; }
.frequency-bin .chart-bars { height:120px; display:flex; gap:2px; align-items:flex-end; }
.chart-bars i { width:50%; height:var(--bar-height); background:var(--purple); border-radius:2px 2px 0 0; }
.chart-bars i+i { background:#a8b896; }
.frequency-bin>span { text-align:center; padding:8px 0; font:9px var(--mono); color:#797c72; }
.desk-table-scroll { overflow:auto; max-height:280px; scrollbar-width:thin; margin-top:14px; }
.desk-table { border-collapse:collapse; width:100%; text-align:left; font:11px var(--mono); }
.desk-table th { position:sticky; top:0; background:#e7e9df; color:#68705f; font:11px var(--sans); z-index:1; }
.desk-table th,.desk-table td { padding:11px 9px; border-bottom:1px solid #dddfd5; }
.desk-table td { vertical-align:top; }
.repeats-scroll { max-height:330px; margin:16px 0; }
.repeats-scroll th:first-child,.repeats-scroll td:first-child { padding-left:12px; }
.repeats-scroll td:first-child { color:var(--purple); font-weight:500; }
.frequency-bars { min-width:80px; }
.frequency-bars i { display:block; height:4px; background:var(--purple); border-radius:2px; }
.frequency-bars i+i { background:#a8b896; margin-top:4px; }
.column-sample { margin-top:14px; padding:12px; max-height:120px; overflow:auto; overflow-wrap:anywhere; color:var(--purple); background:#e8e2f1; border-radius:6px; font:12px/1.8 var(--mono); }
.repeat-control { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; font-weight:400; letter-spacing:0; }
@media(max-width:1100px) {
  .desk-intro,.message-workbench { padding:24px; }
  .analysis-workbench { padding:20px; }
  .message-workbench>.label-line .desk-caption { display:none; }
}
@media(max-width:850px) {
  .desk-grid { grid-template-columns:1fr; }
  .desk-intro { gap:24px; }
  .analysis-workbench { border-left:0; border-top:1px solid var(--line); border-radius:0 0 14px 14px; padding:24px; }
  .analysis-panel { padding-top:24px; }
  .desk-footnote { margin-top:4px; padding-top:14px; }
  .length-clues { min-width:440px; }
}
@media(max-width:480px) {
  .chart-scroll-hint { display:block; }
  .decipher-desk>.section-heading { flex-wrap:wrap; gap:12px; padding:18px; }
  .desk-intro { display:block; padding:24px 18px; }
  .desk-intro h3 { font-size:34px; }
  .desk-intro h3 br { display:none; }
  .desk-intro p { margin-top:14px; font-size:13px; }
  .message-workbench,.analysis-workbench { padding:20px 18px; }
  .decipher-desk textarea { height:110px; font-size:12px; padding:12px; }
  .key-workbench { padding:14px 12px; margin:18px 0 22px; }
  .key-guesses { gap:5px; }
  .key-guess { flex-basis:34px; }
  .key-guess input { height:40px; font-size:21px; }
  #plaintext-preview { height:176px; padding:12px; font-size:13px; }
  .analysis-tabs { gap:2px; padding:3px; }
  .analysis-tabs button { font-size:11px; padding:9px 3px; }
  .analysis-panel { padding-left:0; padding-right:0; }
  .analysis-panel h3 { font-size:21px; }
  .chart-heading { flex-wrap:wrap; gap:6px; }
  .column-controls { gap:8px; }
  .decipher-desk select { padding-right:18px; font-size:11px; }
  .desk-table th,.desk-table td { padding:9px 7px; }
}