/* ======================================================================
   MODALITÀ RETRO — il sito come se fosse il 1995 (pulsante nel footer)
   Sostituisce la vecchia "metal mode". Tutte le regole sono legate a
   "html.retro-mode", quindi finché quella classe non è sull'<html> il file
   non ha alcun effetto su tema scuro e chiaro.
   Lo script è in items/pdp.php (pulsante, barra delle applicazioni,
   menu Avvio, orologio); la classe viene messa subito in items/head.php
   per evitare il lampo del tema normale al caricamento.
   ====================================================================== */

html.retro-mode{
  color-scheme: light;

  /* i token dei temi warm: così quasi tutto il sito si adatta da solo */
  --bg:          #008080;      /* il desktop verde acqua */
  --bg-2:        #c0c0c0;      /* il grigio delle finestre */
  --bg-3:        #c0c0c0;
  --line:        #808080;
  --line-soft:   #a0a0a0;
  --fg:          #000000;
  --fg-muted:    #000000;
  --dim:         #404040;
  --orange:      #000080;      /* l'accento diventa il blu delle barre del titolo */
  --orange-2:    #000080;
  --orange-neon: #000080;
  --orange-dim:  #000060;
  --orange-glow: transparent;
  --orange-soft: rgba(0,0,128,.12);
  --on-accent:   #ffffff;
  --danger:      #a00000;
  --warn:        #806000;
  --ok:          #006000;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
  --glow-sm: none; --glow-md: none; --glow-lg: none;

  --font-sans: "Pixelated MS Sans Serif", "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
  --font-body: var(--font-sans);
  --font-mono: Fixedsys, "Lucida Console", "Courier New", monospace;

  /* bordi in rilievo e incavati di Windows 95, fatti con le ombre */
  --r-su:     inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --r-giu:    inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
  --r-campo:  inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  --r-titolo: linear-gradient(90deg, #000080, #1084d0);
}

/* niente animazioni, transizioni, sfocature o bagliori: nel '95 non c'erano */
html.retro-mode *,
html.retro-mode *::before,
html.retro-mode *::after{
  animation: none !important;
  transition: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  scroll-behavior: auto !important;
}
html.retro-mode{ scroll-behavior: auto; }

/* ---------- desktop ---------- */
html.retro-mode body{
  background: #008080 !important;
  color: #000;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: none;
  padding-bottom: calc(var(--pdp-h, 0px) + 40px);   /* spazio per la barra delle applicazioni */
}
html.retro-mode ::selection{ background: #000080; color: #fff; }

/* ---------- testo ---------- */
html.retro-mode h1, html.retro-mode h2, html.retro-mode h3,
html.retro-mode h4, html.retro-mode h5, html.retro-mode h6{
  color: #000 !important;
  font-family: var(--font-sans) !important;
  font-weight: 700;
  letter-spacing: 0 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
}
html.retro-mode h1{ font-size: clamp(22px, 3.4vw, 30px) !important; }
html.retro-mode h2{ font-size: 20px !important; }
html.retro-mode h3{ font-size: 17px !important; }
html.retro-mode h2::after{ display: none !important; }           /* la linea animata sotto i titoli */
html.retro-mode p, html.retro-mode li, html.retro-mode td, html.retro-mode th,
html.retro-mode dd, html.retro-mode dt, html.retro-mode label, html.retro-mode span,
html.retro-mode small, html.retro-mode figcaption, html.retro-mode .subtitle,
html.retro-mode .text-muted, html.retro-mode .text-muted-custom{
  color: inherit;
}
html.retro-mode .kicker, html.retro-mode .home-label, html.retro-mode .mp-hero-label{
  color: #000080 !important;
  font-family: var(--font-sans) !important;
  font-weight: 700;
}
html.retro-mode .kicker::after, html.retro-mode .term-title::after{ display: none !important; }
html.retro-mode .hl{ color: #000080 !important; background: none !important; -webkit-text-fill-color: currentColor; }
html.retro-mode hr{ border: 0; border-top: 1px solid #808080; border-bottom: 1px solid #fff; opacity: 1; }

/* link "da web anni '90": blu, viola se visitati, sottolineati */
html.retro-mode a{
  color: #0000ee;
  text-decoration: underline;
  border-bottom: 0;
}
html.retro-mode a:visited{ color: #551a8b; }
html.retro-mode a:hover{ color: #ee0000; }
html.retro-mode a:focus-visible,
html.retro-mode button:focus-visible{ outline: 1px dotted #000; outline-offset: -4px; }

/* codice e citazioni: campo bianco incavato */
html.retro-mode code, html.retro-mode kbd, html.retro-mode samp{
  font-family: var(--font-mono) !important;
  color: #000 !important;
  background: #fff !important;
  border: 0 !important;
  padding: 0 3px;
}
html.retro-mode pre, html.retro-mode blockquote{
  font-family: var(--font-mono);
  color: #000 !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: var(--r-campo) !important;
  padding: 10px 12px !important;
}
html.retro-mode blockquote{ font-family: var(--font-sans); font-style: italic; }
html.retro-mode pre code{ padding: 0; }

/* icone: colori originali, senza filtri */
html.retro-mode i, html.retro-mode svg{ filter: none !important; }

/* ======================================================================
   FINESTRE
   Il primo contenitore di ogni pagina diventa una finestra con barra del
   titolo; schede e riquadri al suo interno diventano pannelli in rilievo.
   ====================================================================== */
html.retro-mode body > :is(main, section, article, div[class*="container"], #profilo, #fsx, .oss-container):not(.autore-box):not([id^="retro-"]),
html.retro-mode .articolo{
  position: relative;
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 0 !important;
  box-shadow: var(--r-su) !important;
  margin: 18px auto !important;
  padding: 44px 18px 18px !important;
  width: min(100% - 24px, 1100px) !important;
  max-width: none !important;
  overflow: visible !important;
}
/* barra del titolo, col titolo della pagina (lo imposta lo script) e i tre pulsanti */
html.retro-mode body > :is(main, section, article, div[class*="container"], #profilo, #fsx, .oss-container):not(.autore-box):not([id^="retro-"])::before,
html.retro-mode .articolo::before{
  content: var(--retro-titolo, "Michele Pelosi") !important;
  display: block !important;
  position: absolute !important;     /* fuori dal flusso: funziona anche dentro griglie e flex */
  inset: 3px 3px auto 3px !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  margin: 0 !important;
  z-index: 1;
  padding: 3px 64px 3px 6px !important;
  color: #fff !important;
  font: 700 13px/18px var(--font-sans) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='14'%3E%3Cg shape-rendering='crispEdges'%3E%3Cg id='b'%3E%3Crect width='16' height='14' fill='%23c0c0c0'/%3E%3Cpath d='M0 0h15v1H1v12H0z' fill='%23fff'/%3E%3Cpath d='M15 0h1v14H0v-1h15z' fill='%23000'/%3E%3Cpath d='M14 1h1v12H1v-1h13z' fill='%23808080'/%3E%3C/g%3E%3Cuse href='%23b' x='18'/%3E%3Cuse href='%23b' x='36'/%3E%3Crect x='4' y='9' width='6' height='2'/%3E%3Cpath d='M21 3h9v9h-9zM22 5v6h7V5z'/%3E%3Cpath d='M40 3h2l2 2 2-2h2v1l-3 3 3 3v1h-2l-2-2-2 2h-2v-1l3-3-3-3z'/%3E%3C/g%3E%3C/svg%3E")
      no-repeat right 3px center,
    var(--r-titolo) !important;
  border: 0 !important;
  counter-increment: none;
}
/* contenitori che nella pagina articolo avvolgono .articolo: niente doppia finestra */
html.retro-mode body > div[class*="container"]:has(> .articolo){
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html.retro-mode body > div[class*="container"]:has(> .articolo)::before{ display: none !important; }
html.retro-mode .articolo{ width: min(100%, 860px) !important; font-size: 15.5px; line-height: 1.7; }
html.retro-mode .articolo h2::before{ color: #000080 !important; }

/* pannelli interni: schede, riquadri, terminali */
html.retro-mode :is(article:not(.articolo), .card, .post, .mp-card, .oss-card, .tool-block, .tp-card,
  .callout, .commenti-box, .terminal, details, aside, .alert, .modal-content,
  .autore-box, dialog){
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 0 !important;
  box-shadow: var(--r-su) !important;
  transform: none !important;
}
html.retro-mode :is(.card, .post, .mp-card, .oss-card, .tool-block, .callout, details, .alert, aside){ padding: 12px 14px; }
html.retro-mode :is(.card, .post, .mp-card, .oss-card, .tool-block, .tp-card, .terminal)::before,
html.retro-mode :is(.card, .post, .mp-card, .oss-card, .tool-block, .tp-card, .terminal)::after{
  display: none !important;                          /* gli accenti decorativi sui bordi */
}
html.retro-mode .callout{ border-left: 0 !important; }
html.retro-mode aside{ font-size: 14px; }
html.retro-mode .autore-box{ width: min(100% - 24px, 1100px); margin: 0 auto 18px !important; padding: 10px 14px !important; }

/* il "terminale" diventa una finestra del Prompt di MS-DOS */
html.retro-mode .terminal .term-bar{
  background: var(--r-titolo) !important;
  color: #fff !important;
  border: 0 !important;
  margin: 3px 3px 0;
  padding: 3px 6px !important;
  font: 700 13px/18px var(--font-sans) !important;
}
html.retro-mode .terminal .term-bar *{ color: #fff !important; }
html.retro-mode .terminal .term-bar i{ display: none !important; }       /* i pallini colorati del Mac */
html.retro-mode .terminal .term-body{
  background: #000 !important;
  color: #c0c0c0 !important;
  font-family: var(--font-mono) !important;
  margin: 0 3px 3px;
  box-shadow: var(--r-campo);
}
html.retro-mode .terminal .term-body *:not(a):not(button):not(input):not(textarea):not(select):not(option){ color: #c0c0c0 !important; }
html.retro-mode .terminal .term-body a{ color: #ffff55 !important; }
/* dentro il riquadro commenti si legge meglio in grigio chiaro */
html.retro-mode .commenti-box .term-body{ background: #c0c0c0 !important; color: #000 !important; font-family: var(--font-sans) !important; box-shadow: none; }
html.retro-mode .commenti-box .term-body *:not(a):not(button):not(input):not(textarea){ color: #000 !important; }
html.retro-mode .commenti-box .term-body a{ color: #0000ee !important; }

/* ---------- pulsanti ---------- */
html.retro-mode :is(button, .btn, input[type="submit"], input[type="button"], input[type="reset"],
  .reply-btn, .mp-refresh, .mp-read, .tool-link, .btn-outline, .btn-sostieni, .navbar-toggler){
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 0 !important;
  box-shadow: var(--r-su) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  min-height: 26px;
  padding: 4px 14px !important;
  transform: none !important;
  filter: none !important;
}
html.retro-mode :is(button, .btn, input[type="submit"], input[type="button"], .reply-btn, .mp-refresh,
  .mp-read, .tool-link, .btn-outline, .btn-sostieni, .navbar-toggler):active{
  box-shadow: var(--r-giu) !important;
  padding: 5px 13px 3px 15px !important;
}
html.retro-mode :is(button, .btn, input[type="submit"]):disabled{ color: #808080 !important; text-shadow: 1px 1px #fff !important; }
html.retro-mode :is(.btn, .reply-btn, .mp-read, .tool-link, .btn-sostieni)::after{ display: none !important; }   /* il lampo al passaggio */
html.retro-mode :is(button, .btn) i, html.retro-mode :is(button, .btn) svg{ color: #000 !important; }
html.retro-mode .btn-sostieni i{ color: #c00000 !important; }

/* ---------- campi dei moduli ---------- */
html.retro-mode :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="file"]),
  textarea, select, .form-control, .form-select){
  background: #fff !important;
  color: #000 !important;
  border: 0 !important;
  box-shadow: var(--r-campo) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  padding: 5px 7px;
  outline: none;
}
html.retro-mode :is(input, textarea, select)::placeholder{ color: #808080 !important; }
html.retro-mode input[type="checkbox"], html.retro-mode input[type="radio"]{ accent-color: #000080; }
html.retro-mode input[type="file"]{ color: #000; font-family: var(--font-sans); }
html.retro-mode input[type="file"]::file-selector-button{
  background: #c0c0c0; color: #000; border: 0; box-shadow: var(--r-su); padding: 4px 12px; margin-right: 8px;
  font-family: var(--font-sans);
}
html.retro-mode progress{ accent-color: #000080; height: 18px; box-shadow: var(--r-campo); background: #fff; border: 0; }
html.retro-mode progress::-webkit-progress-bar{ background: #fff; }
html.retro-mode progress::-webkit-progress-value{
  background: repeating-linear-gradient(90deg, #000080 0 10px, transparent 10px 12px);
}

/* schede (tab) e tabelle */
html.retro-mode table{ background: #fff; color: #000; box-shadow: var(--r-campo); border-collapse: separate; border-spacing: 0; padding: 2px; }
html.retro-mode th{ background: #c0c0c0 !important; color: #000 !important; box-shadow: var(--r-su); font-weight: 400; border: 0 !important; padding: 3px 8px; }
html.retro-mode td{ border: 0 !important; border-bottom: 1px dotted #c0c0c0 !important; color: #000 !important; background: transparent !important; padding: 3px 8px; }

/* etichette e badge */
html.retro-mode :is(.badge, .mp-badge, .badge-local, .badge-mastodon, code.tag){
  background: #fff !important; color: #000 !important; border: 1px solid #808080 !important; font-family: var(--font-sans) !important;
}

/* immagini con bagliori o cornici animate */
html.retro-mode img{ filter: none !important; box-shadow: none !important; }
html.retro-mode .logohome{ image-rendering: pixelated; }

/* ======================================================================
   BARRA IN ALTO (menu del sito): una barra grigia con i pulsanti
   ====================================================================== */
html.retro-mode .navbar{
  background: #c0c0c0 !important;
  border: 0 !important;
  box-shadow: var(--r-su) !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
html.retro-mode .navbar .navbar-nav{ gap: 3px; }
html.retro-mode .navbar .navbar-nav .nav-link{
  color: #000 !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  padding: 3px 10px !important;
  text-decoration: none;
}
html.retro-mode .navbar .navbar-nav .nav-link:hover,
html.retro-mode .navbar .navbar-nav .nav-link:focus-visible{
  box-shadow: inset -1px -1px #808080, inset 1px 1px #fff;   /* come i menu di Windows al passaggio */
  color: #000 !important;
}
html.retro-mode .navbar .navbar-nav .nav-link:active{ box-shadow: inset 1px 1px #808080, inset -1px -1px #fff; }
html.retro-mode .navbar .navbar-nav .nav-link::after{ display: none !important; }
html.retro-mode .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
html.retro-mode .navbar-collapse{ background: transparent; }
html.retro-mode #toggle-tema{ display: none !important; }   /* in modalità retro il tema chiaro/scuro non serve */

/* ---------- footer: un pannello grigio come la barra di stato ---------- */
html.retro-mode .footer-moderno,
html.retro-mode body > footer{
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 0 !important;
  box-shadow: var(--r-su) !important;
  width: min(100% - 24px, 1100px);
  max-width: none;
  margin: 0 auto 18px !important;
  padding: 14px !important;
}
html.retro-mode .footer-moderno *{ color: #000; }
html.retro-mode .footer-moderno a:not(.btn){ color: #0000ee !important; }
html.retro-mode .footer-moderno .social-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin: 0 2px;
  background: #c0c0c0 !important; box-shadow: var(--r-su) !important; border: 0 !important;
  text-decoration: none !important;
}
html.retro-mode .footer-moderno .social-icon:active{ box-shadow: var(--r-giu) !important; }
html.retro-mode .footer-moderno .social-icon i{ color: #000080 !important; font-size: 15px; }

/* ---------- barre di scorrimento ---------- */
html.retro-mode ::-webkit-scrollbar{ width: 16px; height: 16px; }
html.retro-mode ::-webkit-scrollbar-track{
  background-color: #dfdfdf;
  background-image: repeating-conic-gradient(#c0c0c0 0 25%, #ffffff 0 50%);
  background-size: 2px 2px;
}
html.retro-mode ::-webkit-scrollbar-thumb{ background: #c0c0c0; box-shadow: var(--r-su); border: 0; }
html.retro-mode ::-webkit-scrollbar-thumb:hover{ background: #c0c0c0; }
html.retro-mode ::-webkit-scrollbar-corner{ background: #c0c0c0; }
html.retro-mode{ scrollbar-color: #c0c0c0 #dfdfdf; }

/* ======================================================================
   BARRA DELLE APPLICAZIONI (creata dallo script in pdp.php)
   ====================================================================== */
#retro-taskbar, #retro-menu{ display: none; }
html.retro-mode #retro-taskbar{
  display: flex;
  align-items: center;
  gap: 4px;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 34px;
  padding: 3px 3px 2px;
  background: #c0c0c0;
  box-shadow: inset 0 1px #dfdfdf, inset 0 2px #fff;
  z-index: 2000;
  font: 400 14px/1 var(--font-sans);
  color: #000;
}
html.retro-mode #retro-taskbar button{ min-height: 0; }
html.retro-mode #retro-start{
  display: inline-flex !important; align-items: center; gap: 5px;
  height: 27px; padding: 0 8px 0 5px !important;
  font-weight: 700 !important;
  flex: none;
}
html.retro-mode #retro-start[aria-expanded="true"]{ box-shadow: var(--r-giu) !important; }
html.retro-mode #retro-start img{ width: 18px; height: 18px; }
html.retro-mode .retro-task{
  flex: 0 1 220px;
  min-width: 0;
  height: 27px;
  padding: 0 8px !important;
  box-shadow: var(--r-giu) !important;
  background-color: #dfdfdf !important;
  background-image: repeating-conic-gradient(#c0c0c0 0 25%, #ffffff 0 50%) !important;
  background-size: 2px 2px !important;
  font-weight: 700 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: left;
}
html.retro-mode .retro-tray{
  margin-left: auto;
  height: 27px;
  display: inline-flex; align-items: center;
  padding: 0 10px;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080;
  flex: none;
}

/* menu Avvio */
html.retro-mode #retro-menu:not([hidden]){
  display: flex;
  position: fixed;
  left: 2px; bottom: 32px;
  min-width: 230px;
  background: #c0c0c0;
  box-shadow: var(--r-su);
  padding: 3px;
  z-index: 2001;
}
html.retro-mode .retro-menu-fascia{
  width: 26px;
  background: linear-gradient(0deg, #000080, #1084d0);
  color: #c0c0c0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 700 18px/26px var(--font-sans);
  padding: 8px 0;
  white-space: nowrap;
}
html.retro-mode .retro-menu-fascia b{ color: #fff; }
html.retro-mode .retro-menu-voci{ flex: 1; display: flex; flex-direction: column; padding: 2px 0; }
html.retro-mode .retro-menu-voci a,
html.retro-mode .retro-menu-voci button{
  display: block;
  padding: 7px 16px 7px 12px !important;
  color: #000 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-align: left;
  font: 400 14px/1.2 var(--font-sans) !important;
  min-height: 0;
}
html.retro-mode .retro-menu-voci a:hover, html.retro-mode .retro-menu-voci a:focus-visible,
html.retro-mode .retro-menu-voci button:hover, html.retro-mode .retro-menu-voci button:focus-visible{
  background: #000080 !important; color: #fff !important; outline: none;
}
html.retro-mode .retro-menu-voci hr{ margin: 3px 2px; }

/* ======================================================================
   PULSANTE NEL FOOTER (attiva/disattiva) — visibile sempre
   ====================================================================== */
.retro-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: var(--sp-2, 8px);
  padding: 0;
  border-radius: 50%;
  background: var(--bg-3);
  border: 1px solid var(--line);
  cursor: pointer;
  vertical-align: middle;
}
.retro-toggle::before{
  content: "";
  width: 20px;
  height: 20px;
  /* un vecchio monitor a tubo catodico */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' shape-rendering='crispEdges'%3E%3Crect x='2' y='2' width='16' height='12' fill='%23c0c0c0'/%3E%3Crect x='4' y='4' width='12' height='8' fill='%23008080'/%3E%3Crect x='5' y='5' width='4' height='1' fill='%23fff'/%3E%3Crect x='7' y='14' width='6' height='2' fill='%23808080'/%3E%3Crect x='4' y='16' width='12' height='2' fill='%23c0c0c0'/%3E%3C/svg%3E") center / contain no-repeat;
}
.retro-toggle:hover{ border-color: var(--orange); }
.retro-toggle::before{ flex: none; }
html.retro-mode .footer-moderno .retro-toggle{
  border-radius: 0;
  width: 30px; height: 30px;
  padding: 0 !important;
  min-height: 0;
  box-shadow: var(--r-giu) !important;   /* resta "premuto" finché la modalità è attiva */
}

@media (max-width: 560px){
  html.retro-mode body > :is(main, section, article, div[class*="container"], #profilo, #fsx, .oss-container):not(.autore-box):not([id^="retro-"]),
  html.retro-mode .articolo{
    width: calc(100% - 12px) !important;
    margin: 10px auto !important;
    padding: 36px 10px 12px !important;
  }
  html.retro-mode .retro-task{ display: none; }
  html.retro-mode .footer-moderno{ width: calc(100% - 12px); }
}

@media print{
  html.retro-mode #retro-taskbar, html.retro-mode #retro-menu{ display: none !important; }
}

/* riquadri dentro il Prompt di MS-DOS: testo DOS, niente pannello grigio */
html.retro-mode .terminal .term-body .callout{ background: transparent !important; box-shadow: none !important; }