/* KAAPSULE® fxmanifest : styles propres à l'outil (la base est dans /tools/kit/kit.css). */
.hero h1 { overflow-wrap: break-word; }
.fm-modes { margin-top: 0; }
.fm .field > label.check { font-family: var(--f-sans); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--g-300); }
.fm-form { min-width: 0; }
.fm-out { min-width: 0; }
.fm-out .out pre { max-height: calc(100vh - 260px); min-height: 240px; }
.fm-out .bar { align-items: center; }
.fm-out .bar .pill { margin-right: auto; }
.fm-out .notes { margin-top: 12px; }
.note.warn { color: var(--paper); border-left: 2px solid var(--paper); padding-left: 10px; }
.note.warn .ico { flex: none; }

.hint { color: var(--g-500); font-size: 13px; margin-top: 12px; }
.panel h2 + .hint { margin-top: -6px; margin-bottom: 12px; }
.fm .btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fm .field .btn.sm { align-self: flex-start; margin-top: 4px; }
.fm code { color: var(--paper); }

/* Listes éditables */
.lists { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.list { display: flex; flex-direction: column; gap: 8px; }
.li { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.fm .li .input { flex: 1; min-width: 0; font-family: var(--f-mono); font-size: 12.5px; padding: 8px 10px; }
.li .btn.sm { flex: none; }
.fm .drow select.input { flex: 0 0 auto; width: auto; max-width: 48%; padding-right: 6px; }
.list .add { align-self: flex-start; }
.list .add .ico { width: 14px; height: 14px; }
.list .hint { margin-top: 0; }

/* Raccourcis et .meta */
.shortcuts { display: flex; flex-direction: column; gap: 10px; }
.shortcuts .check { align-items: flex-start; }
.shortcuts .check input { flex: none; margin-top: 1px; }
.shortcuts code { overflow-wrap: anywhere; min-width: 0; }
.tag { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--g-500); border: 1px solid var(--g-700); padding: 1px 6px; }
.metas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin-top: 14px; }
.check.meta { align-items: flex-start; }
.check.meta input { margin-top: 2px; flex: none; }
.check.meta span { display: flex; flex-direction: column; min-width: 0; }
.check.meta small { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--g-500); overflow-wrap: anywhere; }

/* Sections repliables */
.box > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.box > summary::-webkit-details-marker { display: none; }
.box > summary h2 { margin: 0; }
.box > summary .count { font-family: var(--f-mono); font-size: 12px; color: var(--g-500); }
.box > summary .count:empty { display: none; }
.box > summary .chev { margin-left: auto; color: var(--g-500); transition: transform 200ms ease; }
.box[open] > summary { margin-bottom: 16px; }
.box[open] > summary .chev { transform: rotate(180deg); }
.box h3:first-of-type { margin-top: 0; }

/* Guide data_file */
.guide { margin-top: 72px; }
.guide h2 { font-family: var(--f-display); font-weight: 400; font-size: 24px; letter-spacing: -.02em; }
.guide .lede { color: var(--g-400); max-width: 75ch; margin: 10px 0 12px; }
.guide .row .v { color: var(--g-400); }

@media (min-width: 861px) {
  .fm { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .fm-out { position: sticky; top: 80px; }
}
@media (max-width: 860px) {
  .fm-out .out pre { max-height: 70vh; }
}
@media (max-width: 520px) {
  .metas { grid-template-columns: 1fr; }
  .drow { flex-wrap: wrap; }
  .fm .drow select.input { max-width: none; flex: 1 1 100%; }
  .fm-out .bar { flex-wrap: wrap; }
  .panel { padding: 18px 16px; }
}