:root {
  color-scheme: dark;
  --bg: #15171c;
  --panel: #1f2330;
  --panel-2: #262b3a;
  --text: #e8e8ea;
  --muted: #9aa0ad;
  --accent: #ffd60a;
  --led-off: #3a3f4d;
  --led-disk: #ff3b30;
  --led-tape: #34c759;
  --led-mf: #ff9f0a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, sans-serif;
}

header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid #000;
}

header h1 {
  margin: 0;
  font-size: 1.2rem;
}

header h1 span {
  color: var(--muted);
  font-weight: normal;
  font-size: 0.9rem;
}

.state {
  color: var(--muted);
}

main {
  display: grid;
  grid-template-columns: minmax(320px, 2fr) minmax(320px, 1fr);
  gap: 1rem;
  padding: 1rem;
}

@media (min-width: 901px) {
  main {
    grid-template-columns: minmax(200px, 1fr) 6px var(--panels-w, calc((100vw - 2rem) / 3));
  }
}

@media (max-width: 900px) {
  main {
    grid-template-columns: 1fr;
  }
}

/* Écran large : la page tient dans la fenêtre ; l'écran et ses voyants
   restent en place, la configuration à droite défile seule. */
@media (min-width: 901px) {
  body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  main {
    flex: 1;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
  }

  .screen-area,
  .panels {
    min-height: 0;
    overflow-y: auto;
  }

  .panels {
    padding-right: 0.3rem;
  }

  .screen-box {
    width: min(100%, calc((100vh - 13rem) * 4 / 3));
    align-self: center;
  }
}

.splitter {
  display: none;
}

@media (min-width: 901px) {
  .splitter {
    display: block;
    width: 6px;
    border-radius: 3px;
    background: var(--muted);
    opacity: 0.35;
    cursor: col-resize;
    touch-action: none;
  }

  .splitter:hover,
  .splitter:focus-visible,
  .splitter.drag {
    opacity: 0.9;
  }
}

.screen-area {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.screen-box {
  position: relative;
}

/* En bloc : sinon la boîte réserve sous l'écran la place d'une ligne de
   texte, et le canevas cathodique, calé sur la boîte, couvrirait la
   bordure du bas. */
#screen {
  display: block;
}

/* Rendu cathodique : par-dessus l'écran, dans sa bordure ; les événements
   (clavier, crayon optique, dépôt) restent à l'écran du dessous. */
#screen-crt {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  aspect-ratio: auto;
  border: 0;
  image-rendering: auto;
  pointer-events: none;
}

#screen-crt[hidden] {
  display: none;
}

canvas {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  image-rendering: pixelated;
  outline: none;
  border: 2px solid transparent;
}

canvas.pen {
  cursor: crosshair;
}

canvas:focus {
  border-color: var(--accent);
}

/* Après les règles des libellés : seul le lecteur de l'onglet choisi s'affiche. */
.drive-kind.hidden {
  display: none;
}

.drive-row.drop {
  outline: 2px dashed var(--accent, #6cf);
}

dialog {
  background: var(--panel, #1e1e1e);
  color: inherit;
  border: 1px solid var(--muted, #888);
}

canvas.drop {
  border-color: var(--led-tape);
}

.leds {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  color: var(--muted);
}

.led-group {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--led-off);
  box-shadow: inset 0 0 2px #000;
}

.led.disk {
  background: var(--led-disk);
  box-shadow: 0 0 6px var(--led-disk);
}

.led.tape {
  background: var(--led-tape);
  box-shadow: 0 0 6px var(--led-tape);
}

.led.mf {
  background: var(--led-mf);
  box-shadow: 0 0 6px var(--led-mf);
}

/* Session ACSR : enregistrement (rouge) et relecture (vert). */
.led.rec {
  background: #e23b3b;
  box-shadow: 0 0 6px #e23b3b;
}

.led.play {
  background: #3bc46b;
  box-shadow: 0 0 6px #3bc46b;
}

.acsr-bar {
  position: relative;
  margin: 0.4rem 0;
}

.acsr-bar input[type="range"] {
  width: 100%;
}

/* Points de reprise : traits sous la barre de temps. */
.acsr-marks {
  position: relative;
  height: 6px;
}

.acsr-marks i {
  position: absolute;
  top: 0;
  width: 2px;
  height: 6px;
  background: var(--muted);
}

#acsr-check.diverged {
  color: #e23b3b;
}

.counter {
  font-family: ui-monospace, monospace;
  background: #000;
  color: #fff;
  padding: 0 0.3rem;
  border-radius: 2px;
}

.fps {
  margin-left: auto;
  font-family: ui-monospace, monospace;
}

.hint,
.note {
  color: var(--muted);
  margin: 0;
  font-size: 0.85rem;
}

.rom-map {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.rom-map th,
.rom-map td {
  text-align: left;
  padding: 0.1rem 0.4rem;
  border-bottom: 1px solid var(--panel-2);
  white-space: nowrap;
}

.rom-map th {
  color: var(--muted);
  font-weight: normal;
}

.rom-map td:nth-child(5),
.rom-map td:nth-child(1) {
  font-family: ui-monospace, monospace;
}

.rom-map tr.selected td {
  background: var(--panel-2);
  color: var(--accent);
}

.log {
  min-height: 1.5rem;
  color: #ff6b6b;
  white-space: pre-wrap;
  font-size: 0.85rem;
}

.panels details {
  background: var(--panel);
  border-radius: 6px;
  margin-bottom: 0.6rem;
  padding: 0.3rem 0.8rem 0.6rem;
}

.panels summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.3rem 0;
}

fieldset {
  border: 1px solid #000;
  border-radius: 4px;
  margin: 0.5rem 0;
  padding: 0.4rem 0.6rem;
  background: var(--panel-2);
}

legend {
  color: var(--muted);
  padding: 0 0.3rem;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
}

.grid label,
.row label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

label.check {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0;
}

.row label {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}

.drive {
  font-weight: 700;
  width: 1.2rem;
}

.deck button {
  min-width: 2.4rem;
  font-size: 1rem;
}

input[type="file"] {
  max-width: 14rem;
  color: var(--muted);
}

.media-name {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-name.empty {
  color: var(--muted);
}

input[type="number"] {
  width: 3.5rem;
}

input[type="range"] {
  flex: 1;
  min-width: 6rem;
}

textarea,
input[type="text"] {
  width: 100%;
  font-family: ui-monospace, monospace;
  background: #000;
  color: var(--text);
  border: 1px solid #444;
  border-radius: 3px;
}

button {
  background: #3a4160;
  color: var(--text);
  border: 1px solid #000;
  border-radius: 4px;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}

button:hover {
  background: #4a5280;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

button.active {
  background: var(--accent);
  color: #000;
}

select {
  background: #000;
  color: var(--text);
  border: 1px solid #444;
  border-radius: 3px;
}

.terminal {
  background: #000;
  color: #7CFC00;
  font-family: ui-monospace, monospace;
  min-height: 6rem;
  max-height: 12rem;
  overflow: auto;
  margin: 0.3rem 0;
  padding: 0.3rem;
  white-space: pre-wrap;
}

.hidden {
  display: none;
}

/* État affiché quand le moniteur tient la machine arrêtée. */
.state.paused {
  color: #ffb347;
}

.paper {
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: #2a2e38;
}

/* `.paper` vient après `.hidden` : la vue Texte doit cacher le papier. */
.paper.hidden {
  display: none;
}

#printer {
  max-width: 100%;
}

.paper canvas {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  background: #fafaf4;
  image-rendering: auto;
  border: 0;
}

#printer-text {
  width: 100%;
  font-family: ui-monospace, monospace;
  white-space: pre;
  overflow-x: auto;
}

button.tab.active {
  background: var(--accent);
  color: #000;
}

/* Panneau de l'imprimante : voyant du bouton On-line, bouton Turbo qui
   reste enfoncé. */
button.panel-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

button.panel-button[aria-pressed="true"] .led {
  background: var(--led-tape);
  box-shadow: 0 0 6px var(--led-tape);
}

button.toggle[aria-pressed="true"] {
  background: var(--led-mf);
  border-color: var(--led-mf);
  color: #000;
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.5);
}

/* Vue des disquettes ; en grand format, par-dessus la page. */
#disk-view-box.large {
  position: fixed;
  inset: 2vh 2vw;
  z-index: 10;
  overflow-y: auto;
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.6);
}

canvas.disk-view {
  aspect-ratio: auto;
  height: 380px;
  background: transparent;
  image-rendering: auto;
  border: 0;
}

.disk-view-info {
  min-height: 2.8em;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.8rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.legend i {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.3em;
  border-radius: 2px;
  vertical-align: -0.05em;
}

/* Carte de la RAM ; en grand format, par-dessus la page. */
#ram-view-box.large {
  position: fixed;
  inset: 2vh 2vw;
  z-index: 10;
  overflow-y: auto;
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.6);
}

.ram-view {
  position: relative;
  line-height: 0;
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
}

#ram-view-box.large .ram-view {
  max-width: min(100%, 90vh);
}

.ram-view canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  image-rendering: pixelated;
  border: 0;
  background: #000;
}

.ram-view canvas + canvas {
  position: absolute;
  inset: 0;
  height: 100%;
  background: transparent;
  image-rendering: auto;
}

.legend i.ramp {
  width: 4em;
  background: linear-gradient(to right, #000, #281159, #721f81, #be376c, #f1605d, #feb078, #fcfdbf);
}

/* Échelle de la carte thermique : 0, dégradé, plus grand compte. */
.heat-scale {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-right: 1.2em;
}

.heat-scale i {
  display: inline-block;
  width: 8em;
  height: 0.8em;
  border-radius: 2px;
  outline: 1px solid var(--muted);
}

/* Débogueur graphique ; en grand format, par-dessus la page. */
#debug-view-box.large {
  position: fixed;
  inset: 2vh 2vw;
  z-index: 10;
  overflow-y: auto;
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.6);
}

.dbg-state.stopped {
  color: var(--accent);
}

.dbg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

#debug-view-box.large .dbg-grid {
  grid-template-columns: minmax(16rem, 1fr) minmax(24rem, 1.6fr) minmax(14rem, 1fr);
  grid-template-areas:
    "regs disasm side"
    "memory memory journal";
}

#debug-view-box.large .dbg-regs { grid-area: regs; }
#debug-view-box.large .dbg-disasm { grid-area: disasm; }
#debug-view-box.large .dbg-side { grid-area: side; }
#debug-view-box.large .dbg-memory { grid-area: memory; }
#debug-view-box.large .dbg-journal { grid-area: journal; }

.dbg-grid h4 {
  margin: 0.2rem 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.dbg-grid section {
  min-width: 0;
}

.dbg-regs-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.15rem 0.5rem;
  font-family: ui-monospace, monospace;
}

.dbg-regs-small {
  margin-top: 0.3rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dbg-reg-name {
  color: var(--muted);
  margin-right: 0.3em;
}

.dbg-reg-value {
  cursor: pointer;
  border-radius: 2px;
  padding: 0 0.15em;
}

.dbg-reg-value:hover {
  background: #333a4d;
}

.dbg-reg-value.changed,
.dbg-flag.changed,
.dbg-hex-byte.changed {
  background: #5a3b00;
  color: #ffd60a;
}

.dbg-flags {
  display: flex;
  gap: 0.2rem;
  margin-top: 0.4rem;
}

.dbg-flag {
  width: 1.9em;
  padding: 0.1em 0;
  font-family: ui-monospace, monospace;
  background: #11131a;
  color: var(--muted);
}

.dbg-flag.on {
  background: #1d4d2b;
  color: #fff;
}

.dbg-flag.changed {
  background: #5a3b00;
  color: #ffd60a;
}

.dbg-edit {
  width: 4.5em;
  font-family: ui-monospace, monospace;
  background: #000;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.dbg-asm,
.dbg-hex,
#dbg-trace,
#dbg-stack,
#dbg-bps {
  font-family: ui-monospace, monospace;
  font-size: 0.82rem;
  background: #000;
  border: 1px solid #333;
  padding: 0.2rem 0;
  overflow-x: auto;
}

.dbg-asm.running {
  opacity: 0.55;
}

.dbg-row,
.dbg-trace-row,
.dbg-stack-row,
.dbg-bp-row,
.dbg-hex-row {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  white-space: nowrap;
  padding: 0 0.3em;
}

.dbg-row {
  cursor: default;
}

.dbg-row.pc {
  background: #3a3300;
  outline: 1px solid var(--accent);
}

.dbg-row.cursor {
  background: #1d2b4d;
}

.dbg-row.pc.cursor {
  background: #3a3a33;
}

.dbg-margin {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  align-self: center;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid transparent;
  flex: none;
}

.dbg-margin:hover {
  border-color: #c0392b;
}

.dbg-margin.bp {
  background: #e0302a;
  border-color: #e0302a;
}

.dbg-label {
  color: #7fb2ff;
  padding: 0 0.3em 0 1.9em;
}

.dbg-addr {
  color: #8aa;
}

.dbg-bytes {
  color: #667;
  min-width: 10.5em;
  display: inline-block;
}

.dbg-text {
  color: #e8e8ea;
}

.dbg-note {
  color: #6c9;
}

.dbg-link {
  color: #7fb2ff;
  cursor: pointer;
  text-decoration: underline dotted;
}

.dbg-stack-row.top {
  background: #3a1d33;
}

.dbg-bp-number {
  color: var(--muted);
  min-width: 1.5em;
}

.dbg-bp-del {
  margin-left: auto;
  padding: 0 0.4em;
}

.dbg-empty {
  color: var(--muted);
  padding: 0 0.3em;
  white-space: normal;
}

.dbg-hex-byte {
  display: inline-block;
  min-width: 1.4em;
  text-align: center;
  cursor: pointer;
  border-radius: 2px;
}

.dbg-hex-head {
  color: var(--muted);
}

.dbg-hex-head .dbg-hex-byte {
  cursor: default;
}

.dbg-hex-row {
  gap: 0.25em;
}

.dbg-hex-row .dbg-addr {
  min-width: 3em;
  margin-right: 0.4em;
}

.dbg-hex-byte.pc {
  outline: 1px solid var(--accent);
}

.dbg-hex-byte.sp {
  outline: 1px solid #ff6bd6;
}

.dbg-hex-byte.picked {
  background: #1d4d4d;
}

.dbg-ascii {
  color: #9b9;
  margin-left: 0.6em;
}

.dbg-trace-row {
  cursor: pointer;
}

.dbg-trace-row:hover {
  background: #1d2b4d;
}

input.bad {
  outline: 1px solid #e0302a;
}

/* Extensions : interrupteur dans la légende, contenu grisé quand il est coupé. */
fieldset.ext > legend {
  color: var(--text);
}

fieldset.ext > legend label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* `.hidden` perd sinon contre la règle ci-dessus (case DDI-1 du 6128). */
fieldset.ext > legend label.hidden {
  display: none;
}

fieldset.ext:disabled > :not(legend) {
  opacity: 0.4;
}

input.switch {
  appearance: none;
  position: relative;
  flex: none;
  width: 2.2rem;
  height: 1.25rem;
  margin: 0;
  border-radius: 1rem;
  background: var(--led-off);
  cursor: pointer;
  transition: background 0.15s;
}

input.switch::before {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}

input.switch:checked {
  background: var(--led-tape);
}

input.switch:checked::before {
  transform: translateX(0.95rem);
}

input.switch:disabled {
  opacity: 0.4;
  cursor: default;
}

input.switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Fieldset d'un panneau entier (disquettes) : sans cadre. */
fieldset.ext.bare {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
}

fieldset.ext.bare > legend {
  padding: 0;
  margin-bottom: 0.2rem;
}

/* Forme d'onde de la cassette. */
canvas.tape-wave {
  display: block;
  width: 100%;
  height: 48px;
  aspect-ratio: auto;
  margin: 0.2rem 0;
  border: 0;
  border-radius: 3px;
  image-rendering: auto;
}

canvas.tape-wave.scope {
  height: 72px;
}

/* Vue d'ensemble sous le curseur, alignée sur sa course (le centre du
   bouton ne va pas au-delà d'une demi-largeur de bouton des bords). */
.tape-track {
  flex: 1;
  min-width: 6rem;
}

.tape-track input[type="range"] {
  display: block;
  width: 100%;
  margin: 0;
}

#tape-overview {
  width: calc(100% - 16px);
  margin: 0.2rem 8px;
  cursor: pointer;
}

/* Médiathèque : tiroir superposé à gauche de la page. */
.library {
  position: fixed;
  top: 4rem;
  bottom: 0;
  left: 0;
  width: min(360px, 90vw);
  z-index: 90;
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  pointer-events: none;
}

.library.open {
  transform: translateX(0);
  pointer-events: auto;
}

.library-tab {
  position: absolute;
  left: 100%;
  top: 1.5rem;
  width: 2.2rem;
  height: 9rem;
  padding: 0.6rem 0.2rem;
  writing-mode: vertical-rl;
  letter-spacing: 0.2rem;
  font-size: 0.8rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--panel-2);
  border-left: none;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  pointer-events: auto;
}

.library-tab:hover,
.library-tab:focus-visible {
  background: var(--panel-2);
  color: var(--accent);
}

.library-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem;
  background: var(--panel);
  border-right: 1px solid var(--panel-2);
  box-shadow: 4px 0 16px rgb(0 0 0 / 0.5);
}

.library-types {
  display: flex;
  gap: 0.3rem;
}

.library-types button {
  flex: 1;
}

.library-search {
  display: flex;
  gap: 0.3rem;
}

.library-filter {
  flex: 1;
  min-width: 0;
}

.library-state {
  margin: 0;
  color: var(--muted);
}

.library-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem;
  align-content: start;
}

.library-card {
  position: relative;
}

.library-open {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.3rem;
  text-align: left;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

.library-open:hover,
.library-open:focus-visible {
  border-color: var(--accent);
}

.library-open img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 4px;
  background: #000;
}

.library-name {
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.library-b {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.75rem;
}

.library-drives {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: flex;
  gap: 0.2rem;
}

.library-drives button {
  padding: 0.1rem 0.45rem;
  font-size: 0.75rem;
}

/* Écran tactile : B seul, toujours visible, comme avant (dans la ligne
   d'outils pour un média personnel). */
.library-drive-a {
  display: none;
}

.library-tools .library-drives {
  position: static;
  flex: 1;
}

.library-tools .library-drive-b {
  flex: 1;
}

/* Souris : A et B n'apparaissent qu'au survol de la vignette ; A est vert
   (lecteur choisi par un clic sur l'image), B gris, et ils s'inversent quand
   B est survolé. */
@media (hover: hover) and (pointer: fine) {
  .library-drives,
  .library-tools .library-drives {
    position: absolute;
    visibility: hidden;
  }

  .library-tools .library-drive-b {
    flex: none;
  }

  .library-card:hover .library-drives,
  .library-card:focus-within .library-drives {
    visibility: visible;
  }

  .library-drive-a {
    display: inline-block;
  }

  .library-drives button {
    background: #6b7080;
    color: #fff;
  }

  .library-card:hover .library-drive-a,
  .library-drives .library-drive-b:hover {
    background: var(--led-tape);
    color: #000;
  }

  .library-card:has(.library-drive-b:hover) .library-drive-a {
    background: #6b7080;
    color: #fff;
  }
}

.library-scopes {
  display: flex;
  gap: 0.3rem;
}

.library-scopes button {
  flex: 1;
}

.library-create {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.library-create[hidden],
.library-scopes[hidden],
.library-minutes[hidden] {
  display: none;
}

.library-name-input {
  flex: 1 1 100%;
  min-width: 0;
}

.library-detail {
  font-size: 0.7rem;
  color: var(--muted);
}

.library-tools {
  display: flex;
  gap: 0.2rem;
  margin-top: 0.2rem;
}

.library-tools .library-b {
  position: static;
  flex: 1;
}

.library-account[hidden] {
  display: none;
}

.library-sync-state {
  margin: 0.3rem 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.library-account {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: space-between;
}

.account[hidden],
.account [hidden] {
  display: none;
}

.account .row {
  margin-top: 0.4rem;
}

.account input[type="text"] {
  flex: 1;
  min-width: 0;
}

.account .check {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.5rem;
}

.account .button {
  padding: 0.3rem 0.6rem;
  background: var(--panel-2);
  color: var(--text);
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}

.account .account-sep {
  width: 80%;
  margin: 1rem auto;
  border: 0;
  border-top: 1px solid var(--muted);
}

.account button.account-forget {
  background: #b3261e;
  border-color: #b3261e;
  color: #fff;
}

.panels summary .badge {
  display: inline-block;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.5rem;
  padding: 0 0.35rem;
  box-sizing: border-box;
  border-radius: 0.625rem;
  background: #e41e3f;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  vertical-align: 0.1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  animation: badge-pop 0.25s ease-out;
}

.panels summary .badge:empty {
  display: none;
}

@keyframes badge-pop {
  from {
    transform: scale(0.4);
  }
  60% {
    transform: scale(1.25);
  }
  to {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .panels summary .badge {
    animation: none;
  }
}

/* Traceur HP 7475A. */
.plotter-pens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0.5rem 0;
}

#plotter-carousel {
  width: 9rem;
  height: 9rem;
  flex: none;
}

#plotter-carousel .disc {
  transition: transform 1.2s cubic-bezier(0.45, 0, 0.25, 1);
}

#plotter-pen-editors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.35rem 0.75rem;
  flex: 1 1 14rem;
}

#plotter-pen-editors .pen-editor {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

#plotter-pen-editors .pen-editor input[type="color"] {
  width: 2rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--led-off);
  background: none;
}

#plotter-pen-editors .pen-editor.selected {
  color: var(--accent);
}

.plotter-sheet {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  background: #2a2e38;
}

/* La feuille entière tient dans la fenêtre, en paysage comme en portrait. */
#plotter-canvas {
  display: block;
  max-width: 100%;
  max-height: 75vh;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  image-rendering: auto;
  background: #fafaf4;
  border: 0;
}

.plotter-head {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid #ff3b30;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.plotter-head.down {
  background: rgba(255, 59, 48, 0.55);
}

#plotter-progress {
  flex: 1 1 10rem;
  height: 0.9rem;
}

/* Carte M4 : fichiers du dossier affiché de la carte microSD. */
.m4-path {
  font-family: monospace;
  overflow-wrap: anywhere;
}

.m4-files {
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--panel-2);
  border-radius: 4px;
  padding: 0.2rem;
  margin: 0.3rem 0;
  min-height: 3rem;
}

.m4-files.drop {
  outline: 2px dashed var(--accent);
}

.m4-files table {
  width: 100%;
  border-collapse: collapse;
}

.m4-files td {
  padding: 0.1rem 0.3rem;
}

.m4-files tr:hover {
  background: var(--panel-2);
}

.m4-files button.m4-name {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.m4-files button.m4-name.dir {
  color: var(--accent);
}

.m4-files .m4-size {
  text-align: right;
  white-space: nowrap;
  color: var(--muted);
}

.m4-files .m4-actions {
  width: 1%;
  text-align: right;
}

.m4-files .m4-actions {
  white-space: nowrap;
}

.m4-roms .m4-slot {
  width: 1%;
  white-space: nowrap;
  color: var(--muted);
}

.m4-roms .m4-off {
  color: var(--muted);
}

.m4-files .m4-actions button {
  padding: 0 0.4rem;
}

.m4-files .note:empty {
  display: none;
}

/* Aide en ligne : bouton « ? » en haut à droite du cadre, fenêtre de fiche. */
fieldset[data-help] {
  position: relative;
}

.help-button {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border-radius: 50%;
  font-weight: 700;
  line-height: 1;
}

dialog.help {
  width: min(42rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
}

dialog.help.zoom {
  width: calc(100vw - 2rem);
}

dialog.help::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--led-off);
}

.help-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.help-close {
  font-size: 1.3rem;
  line-height: 1;
}

.help-scroll {
  padding: 1rem;
  overflow-y: auto;
  max-height: calc(100vh - 6rem);
}

.help-photo {
  margin: 0 0 0.5rem;
  text-align: center;
}

.help-photo img {
  max-width: 100%;
  max-height: 22rem;
  cursor: zoom-in;
  border-radius: 4px;
}

dialog.help.zoom .help-photo img {
  max-height: calc(100vh - 10rem);
  cursor: zoom-out;
}

.help-photo figcaption {
  color: var(--muted);
  font-size: 0.85rem;
}

.help-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.help-thumbs button {
  padding: 0;
  border: 2px solid transparent;
  line-height: 0;
}

.help-thumbs button[aria-current="true"] {
  border-color: var(--accent);
}

.help-thumbs img {
  height: 3.2rem;
  width: auto;
}

.help-body h2,
.help-body h3 {
  margin: 1rem 0 0.3rem;
  font-size: 1rem;
}

.help-body p,
.help-body ul,
.help-body ol {
  margin: 0.4rem 0;
}

.help-body blockquote {
  margin: 0.6rem 0;
  padding: 0.3rem 0.8rem;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}

.help-body pre {
  padding: 0.5rem;
  overflow-x: auto;
  background: var(--bg);
}

.help-body code {
  font-family: ui-monospace, monospace;
}