/* ==========================================================================
   effi10 — Testeur de masterspin (outil « spin ») : compléments au socle tools.css.
   ========================================================================== */

.tool--spin .spin__src { min-height: 230px; }
.tool--spin .spin__vars { min-height: 120px; white-space: pre; overflow-wrap: normal; overflow-x: auto; tab-size: 16; }
.tool--spin .spin__stop { min-height: 90px; }

/* Compteur et profondeur d'imbrication */
.tool--spin .spin__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-top: 6px; font-size: .8rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.tool--spin .spin__depth { display: inline-flex; align-items: center; gap: 4px; }
.tool--spin .spin__depth b { color: var(--c-navy); }
.tool--spin .spin__dots { display: inline-flex; gap: 3px; margin-left: 4px; }
.tool--spin .spin__dots i { width: 8px; height: 8px; border-radius: 50%; background: #d5dde6; }
.tool--spin .spin__dots i.is-on { background: var(--c-orange); }
.tool--spin .spin__dots i.is-deep { background: var(--c-red); }

/* Messages de validation */
.tool--spin .spin__msgs .tool__msg, .tool--spin .spin__varinfo .tool__msg { margin-top: 8px; }
.tool--spin .tool__msg .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.tool--spin .tool__msg > span { min-width: 0; overflow-wrap: anywhere; }
.tool--spin .spin__pos { color: inherit; font-size: inherit; font-weight: 700; }
.tool--spin .spin__excerpt { display: inline-block; max-width: 100%; margin-top: 3px; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .75); color: var(--c-navy); font-family: var(--f-mono); font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.tool--spin .spin__excerpt mark { padding: 0 2px; border-radius: 3px; background: #f3d39c; color: inherit; font-weight: 700; }
.tool--spin .tool__msg--error .spin__excerpt mark { background: #f6c3ba; color: #7a1d10; }
.tool--spin .tool__stats:empty { display: none; }

/* Panneaux repliables (variables, mots vides) */
.tool--spin details.spin__box { margin-top: 14px; border: 1px solid var(--c-border); border-radius: 12px; background: #fff; }
.tool--spin details.spin__box > summary { padding: 10px 14px; cursor: pointer; font-weight: 650; color: var(--c-navy); }
.tool--spin details.spin__box > summary span { font-weight: 400; color: var(--c-muted); }
.tool--spin details.spin__box > div { padding: 0 14px 14px; }
.tool--spin details.spin__box--sm > summary { padding: 8px 14px; font-size: .88rem; }
.tool--spin .spin__section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-border); }
.tool--spin .spin__section > h3 { margin-bottom: 12px; }
.tool--spin .spin__section .range { align-self: start; }

/* Résultats */
.tool--spin .spin__diff { font-size: .85rem; }
.tool--spin .spin__actions { margin-top: 12px; }
.tool--spin .spin__list { display: grid; gap: 10px; max-height: 760px; overflow: auto; margin: 14px 0 0; padding: 2px 4px 2px 0; list-style: none; overscroll-behavior: contain; }
.tool--spin .spin__list[hidden] { display: none; }
.tool--spin .spin__list:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 2px; border-radius: 12px; }
.tool--spin .spin__item { margin: 0; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 12px; background: #fff; }
.tool--spin .spin__item.is-over { border-color: #f1b8ae; background: #fffafa; }
.tool--spin .spin__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 6px; font-size: .8rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.tool--spin .spin__num { font-weight: 700; color: var(--c-navy); }
.tool--spin .spin__sim { display: inline-flex; align-items: center; gap: 6px; }
.tool--spin .spin__head .tool__link { margin-left: auto; font-size: .82rem; }
.tool--spin .spin__text { margin: 0; color: var(--c-ink); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.tool--spin .spin__text mark { padding: 0 2px; border-radius: 4px; background: var(--c-orange-soft); color: inherit; box-shadow: inset 0 -2px 0 rgba(221, 153, 51, .6); }
.tool--spin .spin__empty { margin: 14px 0 0; padding: 26px 16px; border: 1px dashed #c7d1dc; border-radius: 12px; color: var(--c-muted); font-size: .9rem; text-align: center; }
.tool--spin .spin__empty[hidden] { display: none; }

/* Aide */
.tool--spin .spin__syntax { margin: 0 0 .8em; padding-left: 1.2em; }
.tool--spin .spin__syntax li { margin: 0 0 .35em; }
.tool--spin .tool__help code { padding: 1px 5px; border-radius: 5px; background: var(--c-mist); color: var(--c-navy); font-family: var(--f-mono); font-size: .85em; overflow-wrap: anywhere; }

@media (max-width: 560px) {
	.tool--spin .spin__head .tool__link { margin-left: 0; }
	.tool--spin .spin__actions .btn { flex: 1 1 calc(50% - 10px); justify-content: center; }
}