/* claudioperrone.it - stile da pagina personale d'altri tempi.
   Nessun font, immagine o script esterno: solo font di sistema e bordi. */

:root {
  color-scheme: light;
  --bg: #e4e0d0;
  --paper: #fffff8;
  --box: #f4f2e2;
  --ink: #1a1a1a;
  --muted: #55524a;
  --line: #9a9684;
  --link: #0000cc;
  --visited: #551a8b;
  --head: #00205b;
  --accent: #a33a1f;
  --lime: #1b6b1b;   /* usato da app.js per lo stato "ok" */
  --bad: #a02020;
  --warn: #a06000;
  --btn: #d4d0c8;
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: Verdana, Tahoma, Geneva, sans-serif;
  --mono: "Courier New", Courier, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 12px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--serif);
}
.page {
  max-width: 920px;
  margin: 18px auto;
  padding: 0 26px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
}
a { color: var(--link); text-decoration: underline; }
a:visited { color: var(--visited); }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px dotted #000;
  outline-offset: 2px;
}
::selection { background: #000080; color: #fff; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--head); line-height: 1.25; }
h1 { font-size: 34px; margin: 6px 0 14px; }
h2 { font-size: 24px; margin: 0 0 12px; padding-bottom: 3px; border-bottom: 1px solid var(--line); }
h3 { font-size: 18px; margin: 0 0 8px; }
h4 { font-size: 15px; margin: 0 0 6px; }
p { margin-bottom: 12px; }
strong { font-weight: bold; }
small { font-size: 12px; }

.skip-link { position: absolute; left: 8px; top: -60px; background: #ffff99; color: #000; padding: 6px 10px; border: 1px solid #000; z-index: 9; }
.skip-link:focus { top: 8px; }

/* Intestazione e menu */
.site-header {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 20px; padding: 14px 0 10px; border-bottom: 3px double var(--line);
}
.site-mark, .site-mark:visited { color: var(--head); text-decoration: none; font: bold 22px var(--serif); }
.site-mark:hover { color: var(--accent); }
.mark-name span { color: var(--accent); }
.live-pill { font: 11px var(--sans); color: var(--muted); display: flex; align-items: center; gap: 6px; }
.main-nav { order: 3; width: 100%; display: flex; flex-wrap: wrap; gap: 2px 0; margin-top: 8px; font: 13px var(--sans); }
.main-nav a { color: var(--link); }
.main-nav a:visited { color: var(--link); }
.main-nav a + a::before { content: "|"; display: inline-block; margin: 0 9px; color: #777; text-decoration: none; }
.main-nav a.active { color: #000; font-weight: bold; }
.nav-external { color: var(--accent); }

/* Stati */
.live-dot, .state-light, .indicator, .pool-indicator {
  display: inline-block; width: 10px; height: 10px; flex: none;
  background: #b5b2a6; border: 1px solid #333;
}
.live-dot.ok, .state-light.up, .indicator.up, .pool-indicator.up { background: #2e9d2e; }
.live-dot.bad, .state-light.down { background: #c33; }
.indicator.dim, .pool-indicator.dim { background: #e0b000; }

main { padding-top: 18px; }
.section, .pool-section, .editorial-section, .intro { margin-bottom: 30px; scroll-margin-top: 12px; }

/* Introduzione e orologio */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 26px; align-items: start; }
.intro p { max-width: 62ch; }
.intro-after { color: var(--muted); }
.intro-foot { font: 12px var(--sans); color: var(--muted); }
.status-glyph, .intro-sep { display: none; }
.clock-card {
  background: var(--box); padding: 10px 14px 12px;
  border: 2px solid; border-color: #fff #6b6858 #6b6858 #fff;
}
.clock-top { display: flex; justify-content: space-between; font: bold 12px var(--sans); color: var(--head); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.clock-label { font: 11px var(--sans); color: var(--muted); margin-top: 8px; display: flex; justify-content: space-between; }
.clock-readout { font: bold 30px/1.2 var(--mono); color: #000; }
.clock-date { font: 12px var(--mono); color: var(--muted); }
.clock-zone { font: 11px var(--sans); }
.clock-divider { border-top: 1px solid var(--line); margin: 10px 0 6px; }
.clock-bottom { display: flex; justify-content: space-between; align-items: baseline; font: 13px var(--sans); }
.clock-bottom strong { font: bold 18px var(--mono); }
.clock-card p { font: 11px var(--sans); color: var(--muted); margin: 2px 0 0; }
.clock-circles, .clock-signoff, .clock-symbol { display: none; }

/* Pool */
.pool-section {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start;
  padding: 16px 18px; background: var(--box); border: 1px solid var(--line);
}
.pool-story h2 { border: 0; padding: 0; font-size: 22px; }
.pool-story h2 em { font-style: normal; }
.fine-print { font: 12px var(--sans); color: var(--muted); }
.fine-dot { display: none; }
.pool-monitor {
  background: #fff; padding: 10px 14px 12px;
  border: 2px solid; border-color: #6b6858 #fff #fff #6b6858;
}
.monitor-heading { display: flex; justify-content: space-between; align-items: center; font: bold 12px var(--sans); color: var(--head); }
.pool-score-line { display: flex; align-items: baseline; gap: 12px; margin: 8px 0; }
.pool-score-num { font: bold 38px/1 var(--mono); }
.mini-label, .monitor-status { display: block; font: 12px var(--sans); }
.monitor-status, .monitor-note { color: var(--muted); }
.monitor-note { font: 11px var(--sans); margin: 8px 0 0; }
.pool-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid #ccc; padding-top: 8px; }
.pool-bottom small { display: block; color: var(--muted); font: 11px var(--sans); }
.pool-bottom strong { font: 13px var(--mono); }

/* Sezioni con dati */
.section-head { margin-bottom: 14px; }
.section-head p { color: var(--muted); max-width: 70ch; margin-bottom: 8px; }
.section-badge { display: inline-block; font: 12px var(--mono); border: 1px solid var(--line); background: var(--box); padding: 1px 8px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.metric, .panel, .editorial-box {
  background: #fff; border: 1px solid var(--line); padding: 10px 14px;
}
.metric { border: 2px solid; border-color: #6b6858 #fff #fff #6b6858; }
.metric-label { font: 12px var(--sans); color: var(--muted); }
.metric-value { font: bold 30px/1.2 var(--mono); }
.metric-value small { font: 13px var(--mono); margin-left: 3px; }
.metric-detail { font: 11px var(--sans); color: var(--muted); }
.ntp-main-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.panel { margin-bottom: 12px; min-width: 0; }
.ntp-main-grid .panel { margin-bottom: 0; }
.panel-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.panel-desc, .chart-explanation, .traffic-intro p { font-size: 14px; color: var(--muted); }
.small-label, .mono-note { font: 11px var(--sans); color: var(--muted); }
.chart-wrap { border: 1px solid #bbb; background: #fff; padding: 4px; }
#offset-chart, #gp-activity-chart { display: block; width: 100%; height: auto; }
#offset-chart { height: 220px; }
.chart-axis { display: flex; justify-content: space-between; font: 11px var(--mono); color: var(--muted); margin-top: 2px; }
.chart-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font: 11px var(--sans); color: var(--muted); margin-top: 6px; }
.legend-dash { display: inline-block; width: 18px; border-top: 2px solid #1f3f99; vertical-align: middle; margin-right: 4px; }
.range-buttons { display: flex; gap: 4px; }
.range-btn {
  font: 12px var(--sans); color: #000; background: var(--btn); padding: 2px 10px; cursor: pointer;
  border: 2px solid; border-color: #fff #404040 #404040 #fff; border-radius: 0;
}
.range-btn.active { font-weight: bold; border-color: #404040 #fff #fff #404040; background: #e8e5dc; }
.selected-source { background: var(--box); border: 1px solid var(--line); padding: 8px 10px; margin: 8px 0 10px; }
.selected-source small { display: block; color: var(--muted); font: 11px var(--sans); }
.selected-source strong { display: block; font: bold 14px var(--mono); overflow-wrap: anywhere; }
.selected-source span { font: 11px var(--mono); color: var(--muted); }
.detail-list { margin: 0; font-size: 14px; }
.detail-list > div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted #aaa; padding: 3px 0; }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; font-family: var(--mono); text-align: right; }
.glossary { margin: 14px 0; border-top: 1px solid var(--line); padding-top: 10px; }
.glossary h3 { font-size: 16px; }
.glossary details { border-bottom: 1px dotted #aaa; padding: 5px 0; }
.glossary summary { cursor: pointer; font-size: 15px; }
.glossary details p { font-size: 14px; color: var(--muted); margin: 6px 0 2px 18px; }
.traffic-panel { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.traffic-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.traffic-stats small { display: block; font: 11px var(--sans); color: var(--muted); }
.traffic-stats strong { font: bold 22px var(--mono); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 480px; }
th { background: var(--btn); text-align: left; font: bold 12px var(--sans); padding: 4px 8px; border: 1px solid #888; }
td { font: 13px var(--mono); padding: 4px 8px; border: 1px solid #bbb; }
.row-good { color: var(--lime); font-weight: bold; }
.row-ok { color: #1f3f99; }
.row-idle, .empty-row { color: var(--muted); }

/* Sonde */
.probe-stack { display: grid; gap: 12px; }
.probe { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; scroll-margin-top: 12px; }
.probe-name { display: flex; align-items: center; gap: 8px; font: bold 15px var(--sans); }
.probe-name small { display: block; font: 11px var(--sans); color: var(--muted); font-weight: normal; }
.probe-marker { display: inline-block; width: 26px; height: 26px; line-height: 24px; text-align: center; font: bold 14px var(--mono); border: 1px solid #000; background: var(--box); }
.probe-state { display: flex; align-items: center; gap: 8px; font: 13px var(--sans); background: var(--box); border: 1px solid var(--line); padding: 4px 8px; margin: 10px 0; }
.state-hint { margin-left: auto; color: var(--muted); }
.probe-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.probe-mini small, .activity-stats small { display: block; font: 11px var(--sans); color: var(--muted); }
.probe-mini strong { font: 13px var(--mono); }
.probe-activity { border-left: 1px dotted #888; padding-left: 18px; }
.activity-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 12px; }
.activity-stats strong { font: bold 18px var(--mono); }
.activity-caption { font-size: 14px; color: var(--muted); }
.category-line { display: grid; grid-template-columns: 80px 1fr 40px; gap: 8px; align-items: center; font: 13px var(--mono); margin-bottom: 4px; }
.category-bar { height: 10px; background: #ddd; border: 1px solid #777; }
.category-bar i { display: block; height: 100%; background: #1f3f99; }
.category-line strong { text-align: right; }
.data-foot { display: block; font: 11px var(--sans); color: var(--muted); margin-top: 8px; }

/* Testi finali */
.editorial-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.social-links, .footer-links { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 13px var(--sans); }
.closing-note { border-top: 1px solid var(--line); padding-top: 14px; }
.closing-note h2 { font-size: 20px; border: 0; }
.closing-note p { color: var(--muted); font-size: 14px; max-width: 70ch; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; border-top: 3px double var(--line); padding-top: 10px; font: 12px var(--sans); color: var(--muted); }
[data-copy] { white-space: pre-line; }

@media (max-width: 760px) {
  body { font-size: 15px; }
  .page { margin: 0; padding: 0 14px 14px; border-width: 0; }
  h1 { font-size: 28px; }
  .intro, .pool-section, .ntp-main-grid, .probe, .traffic-panel, .editorial-columns { grid-template-columns: 1fr; }
  .metric-grid, .traffic-stats, .probe-mini, .activity-stats { grid-template-columns: 1fr; }
  .probe-activity { border-left: 0; padding-left: 0; border-top: 1px dotted #888; padding-top: 12px; }
  .category-line { grid-template-columns: 70px 1fr 36px; }
  .main-nav { gap: 4px 14px; }
  .main-nav a + a::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* BEGIN CP EDITORIALE V1 */
/*
 * Galileo | un cruscotto tecnico che appartiene allo stesso sito del diario.
 * Misure prima dell'ornamento: niente bordi 3D, terracotta o sfondi beige.
 */
:root {
  color-scheme: light;
  --bg: #f1f4f6;
  --paper: #fff;
  --box: #f3f6f8;
  --ink: #26343d;
  --muted: #576874;
  --line: #d2dce2;
  --link: #235d7b;
  --visited: #465b78;
  --head: #203b4d;
  --accent: #315f7b;
  --lime: #236a51;
  --bad: #b13d3d;
  --warn: #9a641a;
  --btn: #edf1f4;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}
body {
  background: var(--bg);
  color: var(--ink);
  font: 15.5px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
.page {
  max-width: 1020px;
  margin: 27px auto 45px;
  padding: 0 36px 32px;
  background: var(--paper);
  border: 0;
  border-top: 3px solid #344f61;
}
a { color: var(--link); text-underline-offset: 3px; }
a:visited { color: var(--visited); }
a:hover { color: #173f58; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #2d607f; outline-offset: 3px; }
::selection { background: #c8dae6; color: #1d303d; }
h1, h2 { font-family: var(--serif); color: var(--head); letter-spacing: -.02em; }
h1 { font-size: 32px; font-weight: 600; line-height: 1.28; }
h2 { font-size: 25px; font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
h3 { font: 650 17px/1.4 var(--sans); color: var(--head); }
h4 { font: 650 14px/1.4 var(--sans); color: var(--head); }
.site-header { padding: 20px 0 15px; border-bottom: 1px solid var(--line); gap: 6px 20px; }
.site-mark, .site-mark:visited { color: #203a4c; font: 700 23px/1.3 var(--sans); letter-spacing: -.045em; }
.mark-name span { color: #45667b; }
.main-nav { margin-top: 12px; gap: 8px 17px; font: 13px/1.5 var(--sans); }
.main-nav a { text-decoration: none; }
.main-nav a:hover { text-decoration: underline; }
.main-nav a + a::before { content: none; }
.main-nav a.active { color: #1d3849; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.nav-external { color: var(--link); }
.live-dot, .state-light, .indicator, .pool-indicator { border: 1px solid #aab8c2; background: #bac5cc; border-radius: 50%; }
.live-dot.ok, .state-light.up, .indicator.up, .pool-indicator.up { background: #267455; }
.live-dot.bad, .state-light.down { background: #b44848; }
.indicator.dim, .pool-indicator.dim { background: #bc8b32; }
main { padding-top: 24px; }
.section, .pool-section, .editorial-section, .intro { margin-bottom: 41px; }
.intro { grid-template-columns: minmax(0,1fr) 270px; gap: 34px; }
.intro p { max-width: 68ch; }
.clock-card {
  background: #f7f9fa;
  border: 1px solid var(--line);
  border-top: 2px solid #55768a;
  padding: 16px 17px;
}
.clock-top { color: var(--head); font: 650 12px var(--sans); padding-bottom: 10px; }
.clock-label { font: 12px var(--sans); color: var(--muted); margin-top: 13px; }
.clock-readout { color: var(--head); font: 600 30px/1.27 var(--mono); letter-spacing: -1.2px; font-variant-numeric: tabular-nums; }
.clock-date { font: 12px var(--mono); }
.clock-italy { margin-top: 13px; padding-top: 7px; border-top: 1px solid var(--line); }
.clock-readout-italy { font-size: 28px; }
.clock-divider { margin: 14px 0 9px; }
.clock-bottom strong { font-weight: 600; }
.pool-section {
  background: #f4f7f9;
  border: 1px solid var(--line);
  border-left: 3px solid #54768b;
  padding: 23px 24px;
  gap: 32px;
}
.pool-story h2 { font-size: 24px; border: 0; }
.pool-monitor { background: #fff; border: 1px solid var(--line); padding: 13px 16px; }
.monitor-heading { font: 650 12px var(--sans); }
.pool-score-num { color: var(--head); font: 600 37px/1 var(--mono); }
.pool-bottom { border-top-color: var(--line); }
.section-badge { background: #f4f7f9; border: 1px solid var(--line); color: var(--muted); padding: 3px 8px; }
.metric-grid { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 5px 0 20px; }
.metric { background: #fff; border: 0; border-right: 1px solid var(--line); padding: 15px 18px 15px 0; }
.metric + .metric { padding-left: 18px; }
.metric:last-child { border-right: 0; }
.metric-label { font-size: 12px; }
.metric-value { color: #203b4d; font: 600 30px/1.32 var(--mono); font-variant-numeric: tabular-nums; }
.metric-detail { font-size: 11px; }
.panel, .editorial-box { border: 1px solid var(--line); background: #fff; padding: 19px 20px; }
.panel { margin-bottom: 16px; }
.ntp-main-grid { gap: 16px; margin-bottom: 16px; }
.chart-wrap { border: 1px solid #dbe3e8; background: #fbfcfd; padding: 8px; }
.range-buttons { gap: 6px; }
.range-btn { border: 1px solid #bfcdd6; border-radius: 2px; background: #fff; color: #2d4f64; padding: 5px 10px; font: 12px var(--sans); }
.range-btn.active { background: #e8f0f5; border: 1px solid #577c94; color: #203d51; font-weight: 700; }
.range-btn:hover { background: #eff4f7; }
.selected-source { background: #f4f7f9; border-color: var(--line); padding: 12px 13px; }
.detail-list > div, .glossary details { border-bottom: 1px solid #e3e9ed; padding: 6px 0; }
.glossary { border-top-color: var(--line); padding-top: 15px; }
.glossary summary { color: #2b4758; }
th { background: #f0f4f7; color: var(--head); border: 1px solid var(--line); padding: 8px 10px; }
td { border: 1px solid var(--line); padding: 7px 10px; }
.row-good { color: var(--lime); }
.row-ok { color: #315f7b; }
.legend-dash { border-top-color: #356b8b; }
.probe-stack { gap: 16px; }
.probe { gap: 25px; }
.probe-marker { background: #f0f5f8; color: #294a5f; border: 1px solid var(--line); }
.probe-state { background: #f6f8f9; border-color: var(--line); padding: 8px 10px; }
.probe-activity { border-left: 1px solid var(--line); }
.category-bar { background: #e9eef1; border: 0; height: 9px; }
.category-bar i { background: #487d9a; }
.editorial-columns { gap: 16px; }
.site-footer { padding-top: 18px; border-top: 1px solid var(--line); line-height: 1.7; }
/* Palette coerente anche per gli SVG disegnati da app.js. */
#offset-chart [stroke="#1f3f99"], #gp-activity-chart [stroke="#1f3f99"] { stroke: #356b8b; }
#offset-chart [fill="#1f3f99"], #gp-activity-chart [fill="#1f3f99"] { fill: #356b8b; }
#offset-chart [stop-color="#1f3f99"], #gp-activity-chart [stop-color="#1f3f99"] { stop-color: #356b8b; }
#gp-activity-chart [stroke="#a33a1f"] { stroke: #356b8b; }
#offset-chart [stroke="#d6d2c4"], #gp-activity-chart [stroke="#d6d2c4"] { stroke: #d8e2e8; }
#offset-chart [stroke="#ebe8dc"], #gp-activity-chart [stroke="#ebe8dc"] { stroke: #e5ecf0; }
#offset-chart [stroke="#8a8674"], #gp-activity-chart [stroke="#8a8674"] { stroke: #94a7b3; }
#offset-chart [fill="#55524a"], #gp-activity-chart [fill="#55524a"] { fill: #65747f; }
@media (max-width: 760px) {
  body { font-size: 15px; }
  .page { margin: 0; padding: 0 18px 25px; border-top: 3px solid #344f61; }
  .site-header { padding: 18px 0 12px; }
  .intro, .pool-section, .ntp-main-grid, .probe, .traffic-panel, .editorial-columns { grid-template-columns: minmax(0,1fr); }
  .metric-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .metric { padding: 12px 10px 12px 0; }
  .metric + .metric { padding-left: 10px; }
  .metric-value { font-size: clamp(18px,4vw,26px); overflow-wrap: anywhere; }
  .metric-label, .metric-detail { font-size: 11px; }
  .probe-activity { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 15px; }
  .clock-readout { font-size: 28px; }
  .pool-section { padding: 17px 16px; }
}
@media (max-width: 420px) {
  .metric-grid { grid-template-columns: 1fr; }
  .metric, .metric + .metric { border-right: 0; border-bottom: 1px solid var(--line); padding: 11px 0; }
  .metric:last-child { border-bottom: 0; }
  .site-mark { font-size: 21px; }
  .main-nav { gap: 9px 15px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* END CP EDITORIALE V1 */