/* KAAPSULE® Hash : styles propres à l'outil (la base est dans /tools/kit/kit.css). */
.modebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }
.note-case { margin: -4px 0 16px; padding: 8px 0 8px 12px; border-left: 2px solid var(--paper); color: var(--g-300); font-size: 13.5px; max-width: 80ch; }
.panel .field + .hv, .panel .field + .listbar { margin-top: 20px; }
.panel .field input[type="text"]#one-name { font-family: var(--f-mono); font-size: 16px; padding: 12px 14px; }
#rev-hash { font-family: var(--f-mono); }

/* Valeurs d'un nom (et du hash inverse) */
.hv { display: flex; flex-direction: column; }
.hv .empty { color: var(--g-500); font-size: 14px; padding: 8px 0; }
.hv-row { display: grid; grid-template-columns: minmax(150px, 240px) minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--g-900); }
.hv-row:first-child { border-top: 1px solid var(--g-900); }
.hv-k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--g-400); }
.hv-k small { display: block; text-transform: none; letter-spacing: 0; font-size: 11.5px; color: var(--g-600); margin-top: 2px; }
.hv-v { font-family: var(--f-mono); font-size: 15px; color: var(--paper); overflow-wrap: anywhere; min-width: 0; }
.hv-row.main .hv-v { font-family: var(--f-display); font-size: clamp(20px, 3vw, 28px); letter-spacing: -.01em; line-height: 1.15; }
.hv .read { font-family: var(--f-mono); font-size: 12px; color: var(--g-500); padding: 0 0 10px; overflow-wrap: anywhere; }
.hv .read b { color: var(--paper); font-weight: 500; }
.hv .sub { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--g-500); padding: 20px 0 8px; }

/* Liste */
.listbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.listbar .btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btn[disabled] { opacity: .35; cursor: not-allowed; pointer-events: none; }
.tablewrap { overflow-x: auto; border: 1px solid var(--g-800); background: var(--g-950); max-height: 560px; overflow-y: auto; }
.htable { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: 12.5px; }
.htable th { position: sticky; top: 0; background: var(--g-900); text-align: left; font-weight: 500; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--g-400); padding: 10px 12px; border-bottom: 1px solid var(--g-700); white-space: nowrap; }
.htable td { padding: 0; border-bottom: 1px solid var(--g-900); white-space: nowrap; }
.htable td.name { max-width: 320px; }
.cv { display: block; width: 100%; text-align: left; padding: 8px 12px; font-family: var(--f-mono); font-size: 12.5px; color: var(--g-200); overflow: hidden; text-overflow: ellipsis; }
.cv:hover { background: var(--g-900); color: var(--paper); }
.cv:focus-visible { outline-offset: -2px; }
.htable td.name .cv { color: var(--paper); }
.more { font-size: 13px; color: var(--g-400); margin-top: 10px; }

/* Inverse */
#rev-out { margin-top: 20px; }
.verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--g-700); }
.verdict.hit { border-color: var(--paper); }
.verdict .msg { color: var(--g-300); font-size: 14px; }
.verdict .names { display: flex; flex-wrap: wrap; gap: 8px; }
.verdict .names .btn { text-transform: none; letter-spacing: 0; font-family: var(--f-mono); font-weight: 500; }
.warn { font-size: 13.5px; color: var(--paper); border-left: 2px solid var(--paper); padding: 4px 0 4px 12px; margin-top: 4px; }

/* Guide */
.guide { margin-top: 56px; }
.guide h2 { font-family: var(--f-display); font-weight: 400; font-size: 24px; letter-spacing: -.02em; margin-bottom: 12px; }
.guide ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.guide li { border: 1px solid var(--g-800); padding: 16px; color: var(--g-400); font-size: 14px; }
.guide li b { display: block; color: var(--paper); font-weight: 700; margin-bottom: 6px; }
.guide code, .faq code { color: var(--g-200); overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .hv-row { grid-template-columns: minmax(0, 1fr) auto; }
  .hv-k { grid-column: 1 / -1; }
  .guide ul { grid-template-columns: 1fr; }
  .modebar .seg { width: 100%; }
  .modebar .seg button { flex: 1; }
  .listbar .btns { width: 100%; }
  .listbar .btns .btn { flex: 1 1 auto; }
}