/*
 * Machine de Turing - visualiseur et simulateur.
 * SPDX-FileCopyrightText: 2015-2021 Andy Li
 * SPDX-FileCopyrightText: 2026 Laurent Abbal
 * SPDX-License-Identifier: BSD-3-Clause AND AGPL-3.0-only
 * Voir LICENSE-BSD.txt et LICENSE.txt.
 */

body {
  font-variant-ligatures: contextual;
}

button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.btn {
  font-size: 0.875rem;
}

.navbar {
  border-radius: 0;
  border-width: 0 0 1px;
  min-height: 58px;
  padding: 0;
}

.navbar-form {
  display: flex;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 12px;
}

nav .navbar-right {
  margin-left: auto;
}

.navbar-form > .btn-group {
  margin-left: 0.5em;
}

#tm-doc-menu {
  padding-right: 2.5em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23555' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 8px 5px;
  -webkit-appearance: none;
  appearance: none;
}

#tm-doc-menu::-ms-expand {
  display: none;
}

.tm-help-toggle {
  margin: 14px 0;
  padding: 5px 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #555;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  -webkit-appearance: none;
  appearance: none;
}

.tm-help-toggle > .fa-circle-question {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
}

.tm-help-toggle:hover,
.tm-help-toggle:focus {
  color: #158cba;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 58px;
  padding-top: 17px;
  padding-bottom: 17px;
  font-family: inherit;
}

.form-group {
  margin-bottom: 15px;
}

/* Bootstrap 5 no longer ships the panel component used by the help text. */
.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
}

.panel-default {
  border-color: #ddd;
}

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
}

.panel-default > .panel-heading {
  background-color: #f5f5f5;
  border-color: #ddd;
}

.panel-title {
  margin: 0;
  font-size: 16px;
}

.panel-body {
  padding: 15px;
}

.panel-group .panel {
  margin-bottom: 0;
  border-radius: 4px;
}

.panel-group .panel + .panel {
  margin-top: 5px;
}

.list-inline > li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}

.navbar-brand-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

pre {
  background-color: hsl(0, 0%, 98%);
}

.editor-shortcuts td:first-child {
  text-align: right;
}

/* Adjusted from Stack Overflow's old <kbd> style. */
kbd {
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
  color: #333;
  display: inline-block;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 85%;
  line-height: 1.4;
  margin: 0 .1em;
  padding: .1em .6em;
  text-shadow: 0 1px 0 #fff;
}

/* When diagram and editor are side by side. */
@media (min-width: 992px) {
  /* Visually center diagram horizontally. */
  #diagram-column {
    padding-right: 0;
    width: 53%;
  }

  #editor-column {
    width: 47%;
  }
}

/* Editor */
#editor-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 89%;
  max-width: 85ch;
  margin: 20px auto 0;
}

#editor-alerts-container:empty {
  display: none;
}

#editor-alerts-container .alert:last-child {
  margin-bottom: 0;
}

button.tm-editor-load {
  display: block;
  margin: 0 auto 0 0;
}

.tm-editor.ace_editor {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 0;
  font-family: monospace;
  line-height: 1.5;
  text-align: left;
}

/* Print styles */
@media print {
  button.btn,
  hr {
    display: none;
  }

  #tutorial {
    page-break-before: always;
  }
}

/* Simulator controls: centered on "Step", Reset and Run mirror each other. */
.tm-controls {
  display: flex;
  justify-content: center;
  gap: 4em;
}

/* Same size for all buttons, including the Run/Pause swap. */
.tm-btn-diagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6em;
  height: 2.8em;
  padding-left: 0;
  padding-right: 0;
}

.tm-control-icon {
  display: inline-block;
  width: 1.25em;
  font-size: 1.5em;
  line-height: 1;
  transform: translateY(1px);
}

/* Save button */
.btn-wide-save {
  padding-left: 1.5em;
  padding-right: 1.5em;
}

/* Checkbox table */
.checkbox-table tr > :first-child,
.checkbox-table tr > :last-child {
  text-align: right;
}

.checkbox-table tbody tr,
input[type="checkbox"] {
  cursor: pointer;
}

/* Disclosure triangle */
a.disclosure-triangle {
  cursor: pointer;
  text-decoration: none;
}

a.disclosure-triangle::before {
  content: '▸';
  transform: rotate(90deg);
  transform-origin: center;
  transition: transform 0.1s linear;
  display: inline-block;
  font-size: larger;
  margin-right: 0.2em;
}

a.disclosure-triangle.collapsed::before {
  transform: none;
}

a.disclosure-triangle + div.collapse > .panel:first-child,
a.disclosure-triangle + div.collapsing > .panel:first-child {
  margin-top: 1em;
}

/* Page footer */
html {
  background: #fff;
}

body {
  background: #fff;
}

.page-footer {
  margin: 8em 0 0;
  padding: 1.5em 1em;
  border-top: 1px solid #ddd;
  background: #fff;
  text-align: center;
  color: hsl(0, 0%, 45%);
  font-size: 0.875em;
  line-height: 1.8;
}

.page-footer .credits {
  margin: 0;
}

/* Forge links. GitLab icons (MIT), inlined as SVG: no network request. */
.page-footer .forge {
  position: relative;
  margin-top: 1.25em;
  padding-top: 1.25em;
}

.page-footer .forge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6em;
  border-top: 1px solid #ddd;
}

.page-footer .forge-name {
  display: block;
  font-size: 0.8em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}

.page-footer .forge-links {
  display: flex;
  justify-content: center;
  gap: 1.25em;
  margin-top: 0.5em;
}

.page-footer .forge-links a {
  display: inline-flex;
  color: hsl(0, 0%, 45%);
  transition: color 0.2s, transform 0.2s;
}

.page-footer .forge-links a:hover,
.page-footer .forge-links a:focus {
  color: #158cba;
  transform: translateY(-2px);
}

.page-footer .forge-links svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Titre plus compact et croix de fermeture plus discrète dans les dialogues. */
.modal-title {
  font-size: 1.125rem;
  font-weight: 700;
}

.modal-header .btn-close {
  --bs-btn-close-opacity: 0.4;
  width: 0.75em;
  height: 0.75em;
  padding: 0.25em;
}

/* Bootstrap donne aux boutons du pied de dialogue une marge de 0,25 rem que
   les règles de survol de Lumen remplacent par 1–2 px : les boutons
   remontent au lieu de s'enfoncer. On ajoute l'enfoncement à cette marge. */
.modal-footer > .btn:not(.disabled):hover {
  margin-top: calc(var(--bs-modal-footer-gap) * 0.5 + 1px);
}

.modal-footer > .btn:not(.disabled):active {
  margin-top: calc(var(--bs-modal-footer-gap) * 0.5 + 2px);
}

/* Fix overflow inside modal caused by td pre. */
.modal-dialog td pre {
  white-space: pre-wrap;
  font-size: smaller;
}

/* Fix some cases of extra margins in Bootstrap. */
.modal-body .panel:last-child,
.panel-body > *:last-child {
  margin-bottom: 0;
}