/* Encode, decode & hash: the few things tools.css doesn't cover. Encoded
   and decoded output side by side in each card, the jump links between
   cards, hidden characters drawn as labelled boxes (text, not just colour),
   the hash list with its matched row, and the file picker and progress bar. */

.field[hidden] { display: none; }

/* The last stat lists formats by name, which need more room than a number */
.summary.encode-summary { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.summary.encode-summary .stat:last-child .stat-value { font-size: 17px; line-height: 1.35; overflow-wrap: normal; }
.muted.small, .small { font-size: 13px; line-height: 1.5; }

/* Jump links between the conversion cards */
.jump { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: 13px; color: var(--ink-3); }
.jump a { color: var(--ink-2); text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
.jump a:hover { color: var(--ink); }
.card { scroll-margin-top: 16px; }
/* Keep a card's chips on the right of its title when there's room, as short cards have them */
.results .card-head > div:first-child { flex: 1 1 320px; min-width: 0; }
/* A collapsed table mustn't widen its card: let it scroll inside instead. Screen-reader
   labels in it are absolutely positioned, so the scrolling box must contain them too. */
.card-body > * { min-width: 0; }
.results .table-wrap, .results .reveal { position: relative; }
#hashes { scroll-margin-top: 16px; }

/* Encoded | decoded */
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px 22px; min-width: 0; }
/* A side's one column may shrink below its content, and long host or file names in its notes wrap
   anywhere, so a 63-character label can't push the code blocks and their Copy buttons out of the card */
.side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; min-width: 0; }
.side p, .notes, .cant { overflow-wrap: anywhere; }
.side-head { margin: 0; font-size: 11.5px; font-weight: 550; text-transform: uppercase; letter-spacing: .13em; color: var(--ink-3); }
.side .code-block.out .code { max-height: 280px; overflow: auto; }
.side > p, .side p.small { margin: 0; }
.cant { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.cant strong { color: var(--ink); font-weight: 600; }
.nothing { margin: 0; }
.notes { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.notes.warn li::marker { color: var(--warn); }

/* Hidden characters drawn as small labelled boxes */
.glyph {
  display: inline-block; margin: 0 1px; padding: 0 4px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.6; letter-spacing: .02em; vertical-align: 1px;
  color: var(--ink-2); background: var(--panel-2); border: 1px dashed var(--line-2); white-space: nowrap;
}
.glyph.warn { color: var(--warn); border-color: rgb(245 196 81 / .55); background: rgb(245 196 81 / .08); }
.glyph.info { color: var(--info); border-color: rgb(159 183 255 / .45); background: rgb(159 183 255 / .06); }
.char { font-family: var(--font-mono); font-size: 16px; }
.reveal { max-height: 260px; overflow: auto; }
.reveal mark.hl { text-decoration: underline wavy var(--warn); text-underline-offset: 4px; }
.reveal mark.hl.info { background: rgb(159 183 255 / .16); text-decoration-color: var(--info); }

/* Hash list: name on the left, values on the right; stacked on a phone */
.subtool .tool-form { gap: 12px; }
.subtool-out { display: grid; gap: 12px; min-width: 0; }
.subtool-out:not(:empty) { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.subtool-out > p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.subtool-out > p.lead-line { color: var(--ink); }
.hash-list { list-style: none; margin: 0; padding: 0; display: grid; }
.hash-list > li {
  display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 8px 18px;
  padding: 12px 0; border-top: 1px solid var(--line); min-width: 0;
}
.hash-list > li:first-child { border-top: 0; padding-top: 2px; }
.hash-list > li.matched { margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 10px; background: rgb(90 240 160 / .06); box-shadow: 0 0 0 1px rgb(90 240 160 / .35) inset; }
.hash-name { display: grid; gap: 5px; align-content: start; font-size: 14px; }
.hash-name strong { font-weight: 600; color: var(--ink); }
.hash-name .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hash-values { display: grid; gap: 6px; min-width: 0; }
.hash-value { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-width: 0; }
.hash-value code { font-size: 13px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.hash-value.matched code { color: var(--pass); }
.hash-format { font-size: 12px; color: var(--ink-3); }
.hash-skipped { margin: 0; }
@media (max-width: 620px) {
  .hash-list > li { grid-template-columns: minmax(0, 1fr); }
  .hash-value { grid-template-columns: minmax(0, 1fr) auto; }
  .hash-format { grid-column: 1 / -1; }
}

/* File picker and progress */
.file-input {
  width: 100%; min-width: 0; font: inherit; font-size: 14px; color: var(--ink-2);
  padding: 8px; border: 1px dashed var(--line-2); border-radius: 10px; background: var(--field);
}
.file-input::file-selector-button {
  margin-right: 12px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line-2);
  font: inherit; font-size: 13px; color: var(--ink); background: var(--panel-3); cursor: pointer;
}
.file-input:hover { border-color: rgb(255 255 255 / .26); }
.file-input:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 1px; }
.progress-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.progress-row progress { flex: 1 1 180px; height: 8px; appearance: none; border: 0; border-radius: 99px; overflow: hidden; background: var(--panel-3); }
.progress-row progress::-webkit-progress-bar { background: var(--panel-3); border-radius: 99px; }
.progress-row progress::-webkit-progress-value { background: var(--ink); border-radius: 99px; }
.progress-row progress::-moz-progress-bar { background: var(--ink); border-radius: 99px; }