/* ==========================================================================
   Pagina /compiler (compiler.html, js/compiler.js): barra in alto e la sezione
   Codice alta quanto la finestra. Il resto è quello dell'app (css/code.css).
   ========================================================================== */
html.cp, html.cp body { overscroll-behavior: none; }
.cp-bar {
  position: relative; z-index: 20; display: flex; align-items: center; gap: 10px;
  height: 52px; padding: var(--sat) calc(12px + var(--sar)) 0 calc(12px + var(--sal));
}
.cp-brand { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 4px; border-radius: 12px; text-decoration: none; color: var(--ink); flex: none; }
.cp-brand:hover { background: var(--fill-2); }
.cp-brand b { font-size: 16px; font-weight: 650; letter-spacing: -0.02em; }
.cp-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--solid); color: var(--on-solid); }
.cp-mark svg { width: 18px; height: 18px; }
.cp-title { margin: 0; font-size: 15px; font-weight: 500; color: var(--ink-2); white-space: nowrap; letter-spacing: -0.01em; }
.cp-title::before { content: "/"; margin-right: 10px; color: var(--ink-4); }
.cp-grow { flex: 1; }

/* i linguaggi: un pallino per stato (in attesa, scarico, pronto, errore, a richiesta) */
.cp-langs { display: flex; gap: 4px; margin-left: 6px; }
.cp-lang {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 9px; border: 0; border-radius: 999px;
  background: var(--fill-2); color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: default;
}
.cp-lang b { font-weight: 600; }
.cp-lang i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); flex: none; box-sizing: border-box; }
.cp-lang[data-s="load"] i { background: transparent; border: 2px solid var(--ink-3); border-top-color: transparent; animation: cpSpin 0.8s linear infinite; width: 10px; height: 10px; }
.cp-lang[data-s="ok"] { color: var(--ink); }
.cp-lang[data-s="ok"] i { background: var(--cd-run); }
.cp-lang[data-s="err"] i { background: var(--ko); }
.cp-lang[data-s="ask"] i { background: transparent; border: 1.5px solid var(--ink-3); }
.cp-lang[data-s="off"] { opacity: 0.5; }
.cp-lang[data-s="off"] b { text-decoration: line-through; }
.cp-lang:is([data-s="ask"], [data-s="err"]) { cursor: pointer; }
.cp-lang:is([data-s="ask"], [data-s="err"]):hover { background: var(--fill-3); color: var(--ink); }
@keyframes cpSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cp-lang[data-s="load"] i { animation-duration: 2.4s; } }

.cp-store { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.cp-store.warn { color: var(--ko); font-weight: 600; }
.cp-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; border: 0; border-radius: 999px;
  background: var(--fill-2); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; flex: none;
}
.cp-btn:hover { background: var(--fill-3); }
.cp-btn svg { width: 17px; height: 17px; }

/* la sezione Codice: tutta l'altezza sotto la barra (a tutto schermo resta quella di code.css) */
.cp-main { padding: 0 calc(10px + var(--sar)) 10px calc(10px + var(--sal)); }
html.cp .cd-app:not(.full) { height: calc(100dvh - 62px - var(--sat) - var(--sab)); }
@media (max-width: 980px) {
  .cp-main { padding: 0 var(--sar) 0 var(--sal); }
  html.cp .cd-app:not(.full) { height: calc(100dvh - 52px - var(--sat)); }
  .cp-store { display: none; }
}
@media (max-width: 760px) {
  .cp-title { display: none; }
  .cp-bar { gap: 6px; padding-left: calc(6px + var(--sal)); padding-right: calc(8px + var(--sar)); }
  .cp-langs { margin-left: 0; gap: 3px; }
  .cp-lang { padding: 0 8px 0 7px; gap: 5px; font-size: 12px; }
}
@media (max-width: 520px) {
  .cp-brand b { display: none; }
  .cp-brand { padding: 0 4px; }
  .cp-btn span { display: none; }
  .cp-btn { padding: 0 8px; }
  #theme-seg button { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 400px) { #theme-seg { display: none; } }