/* Certificate decoder: the few things tools.css doesn't cover. The paste box
   and file picker, the chain diagram (each link says in words whether its
   signature checked out, so colour is never the only signal), names and
   distinguished names, and the extension table's first column. */

.cert-input { min-height: 168px; font-size: 13px; line-height: 1.45; }

.file-row { align-items: flex-end; }
.file-input {
  width: 100%; min-width: 0; max-width: 100%;
  font: inherit; font-size: 14px; color: var(--ink-2);
  padding: 7px; border: 1px dashed var(--line-2); border-radius: 10px; background: var(--field);
  cursor: pointer;
}
.file-input::file-selector-button {
  margin-right: 12px; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 8px;
  font: inherit; font-size: 13.5px; 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; }

/* Headings and short notes inside result cards */
.card-body h3.sub-head { margin: 4px 0 -4px; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.muted.small, .small { font-size: 13px; line-height: 1.5; }
.card-body > .muted.small { margin-top: -6px; }
.plain-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

/* Distinguished names: one attribute per line */
.dn { display: grid; gap: 4px; min-width: 0; }
.dn-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

/* Lists of names: type label, then the value */
.name-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-width: 0; }
.name-list li { display: grid; grid-template-columns: minmax(84px, max-content) minmax(0, 1fr); gap: 2px 12px; align-items: baseline; font-size: 14px; }
.name-type { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 420px) { .name-list li { grid-template-columns: minmax(0, 1fr); } }

.ext-name { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.ext-name .mono { font-size: 12px; color: var(--ink-3); }

/* A value with its own copy button, which lines up on the right */
.copyable { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 10px; min-width: 0; }
.copyable .mono { font-size: 13px; line-height: 1.6; padding-top: 5px; }

/* Host names in the summary: smaller, and wrapped only at dots */
.summary.cert-summary { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.summary.cert-summary .stat-value.mono { font-size: 16px; letter-spacing: -.02em; }

/* The chain: certificates joined by their signature links */
.chain { list-style: none; margin: 0; padding: 0; display: grid; }
.chain-cert { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgb(0 0 0 / .2); min-width: 0; }
.chain-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.chain-role { font-size: 12px; font-weight: 550; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.chain-name { font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.chain-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.chain-link { margin-left: 20px; padding: 10px 0 10px 18px; border-left: 2px solid var(--line-2); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); display: grid; gap: 6px; min-width: 0; }
.chain-link.pass { border-left-color: rgb(90 240 160 / .5); }
.chain-link.fail { border-left-color: rgb(255 125 125 / .6); border-left-style: dashed; }
.chain-link .chip { vertical-align: 1px; }
.chain-end { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 520px) { .chain-link { margin-left: 10px; padding-left: 12px; } }