/* Televideo — impaginazione, telecomando, versione piatta e versione testo. */
:root {
  --fondo: #050505;
  --luce: rgb(40, 60, 140);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --tv-top: 0px; --tv-bottom: 100vh; --tv-left: 0px; --tv-right: 100vw;
  --sc-x: 0px; --sc-y: 0px; --sc-w: 100vw; --sc-h: 75vw;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: #e9e9e9; }
body { font: 16px/1.5 var(--mono); -webkit-tap-highlight-color: transparent; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --------- barra in alto --------- */
.barra { position: fixed; z-index: 5; top: 0; left: 0; right: 0; display: flex; gap: 18px; justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px; font-size: 13px; letter-spacing: .02em; pointer-events: none; }
.barra a { pointer-events: auto; color: #8d8d8d; text-decoration: none; padding: 4px 2px; }
.barra a:hover, .barra a:focus-visible { color: #fff; }
.barra .vt { color: #c9c9c9; border-bottom: 1px solid #555; }
.barra .corto, .sotto .corto { display: none; }
@media (max-width: 359px) { .barra .lungo, .sotto .lungo { display: none; } .barra .corto, .sotto .corto { display: inline; } }

/* --------- modalità --------- */
#tv, #telecomando, .aiuto, .sotto { display: none; }
.js:not(.testo) body { overflow: hidden; height: 100svh; overscroll-behavior: none; }
.js:not(.testo) #tv { display: block; position: fixed; inset: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.js:not(.testo) #telecomando { display: grid; }
.js:not(.testo) .aiuto { display: block; }
.js:not(.testo) main { position: fixed; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#crt { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#piatto { display: none; }
.piatto #crt { display: none; }
#tt { display: block; }
.gl #tt { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; }

/* --------- versione piatta: niente shader, solo CSS --------- */
.piatto #piatto { display: block; position: absolute; left: var(--sc-x); top: var(--sc-y); width: var(--sc-w); height: var(--sc-h);
  border-radius: 3.5% / 4.6%; background: #0b0d0c; overflow: hidden;
  box-shadow: 0 0 0 calc(var(--sc-h) * .05) #141414, 0 0 0 calc(var(--sc-h) * .052) #222, inset 0 0 calc(var(--sc-h) * .12) rgba(0,0,0,.9); }
.piatto #piatto::before { content: ""; position: absolute; inset: calc(var(--sc-h) * -.4); z-index: -1;
  background: radial-gradient(closest-side, #161616, #0a0a0a 70%, transparent); }
.piatto .vetro { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .6s; }
.piatto #piatto.acceso .vetro { opacity: 1; }
.piatto #tt { position: absolute; left: 10%; top: 6.6%; width: 80%; height: 86.8%; image-rendering: auto; filter: saturate(1.05) blur(.35px) brightness(1.08); }
.piatto .vetro::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 22% 12%, rgba(255,255,255,.05), transparent 40%),
    radial-gradient(140% 120% at 50% 50%, transparent 60%, rgba(0,0,0,.65)),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }

/* --------- telecomando --------- */
/* Plastica nera vera: grana fine, aloni opachi dove lo si impugna, polvere nelle fessure;
   tasti in plastica lucida con il riflesso della stanza in alto e le cifre più usate consumate. */
:root {
  --grana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 -.27'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --sporco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.022' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .76 0 0 0 0 .72 0 0 0 .7 -.47'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}
.tc { position: fixed; z-index: 4; width: 176px; padding: 22px 16px 24px; gap: 14px;
  left: calc(var(--tv-right) + max(14px, (100vw - var(--tv-right) - 176px) / 2));
  top: 50%; transform: translateY(-46%) rotate(1.5deg);
  border-radius: 34px 34px 46px 46px / 30px 30px 60px 60px;
  background:
    var(--grana),
    radial-gradient(70% 30% at 50% 78%, rgba(150,140,125,.07), transparent 70%),
    var(--sporco),
    radial-gradient(120% 60% at 0% 30%, color-mix(in srgb, var(--luce) 10%, transparent), transparent 60%),
    linear-gradient(100deg, #111112 0%, #0b0b0c 45%, #070708 100%);
  background-size: 180px 180px, auto, 300px 300px, auto, auto;
  box-shadow:
    inset 1.5px 0 0 color-mix(in srgb, var(--luce) 28%, #262626),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset -2px 0 3px rgba(0,0,0,.7),
    inset 0 -10px 18px -8px rgba(0,0,0,.8),
    0 34px 50px -12px rgba(0,0,0,.95), 0 3px 6px rgba(0,0,0,.85); }
.tc button { position: relative; font: 600 13px/1 var(--mono); color: #a9a9a6; cursor: pointer; border: 0; padding: 0; height: 30px; border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 22%, transparent 46%),
    radial-gradient(90% 60% at 50% 115%, rgba(255,255,255,.06), transparent 70%),
    linear-gradient(180deg, #232325 0%, #161617 60%, #0f0f10 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 1px rgba(0,0,0,.6),
    0 2px 2px rgba(0,0,0,.75), 0 0 0 1px #050505, 0 0 0 2px rgba(120,115,105,.06);
  text-shadow: 0 -1px 0 rgba(0,0,0,.8);
  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), filter 120ms ease-out;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; }
/* il riflesso lucido: una striscia netta in alto, come sulla plastica stampata */
.tc button::after { content: ""; position: absolute; left: 14%; right: 14%; top: 2px; height: 32%; border-radius: 6px 6px 40% 40% / 6px 6px 100% 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0)); pointer-events: none; }
.tc button:active, .tc button.giu { transform: translateY(1px) scale(0.97); filter: brightness(.82); }
.tc button:focus-visible { outline: 2px solid #ffd400; outline-offset: 2px; }
/* cifre consumate dall'uso: 1, 0 e P+ sono i tasti che il pollice trova sempre */
.tc [data-k="1"], .tc [data-k="0"], .tc [data-k="su"] { color: #7d7c78; }
.tc [data-k="1"]::before, .tc [data-k="0"]::before, .tc [data-k="su"]::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(50% 45% at 50% 55%, rgba(200,195,185,.06), transparent 70%); pointer-events: none; }
.tc-alto { display: flex; align-items: center; justify-content: space-between; }
.tc-power { width: 34px; height: 34px !important; border-radius: 50% !important;
  background: linear-gradient(180deg, rgba(255,255,255,.25), transparent 45%), radial-gradient(circle at 40% 30%, #b8382f, #7a1a15 60%, #4a0e0b) !important; }
.tc-power span { display: block; width: 12px; height: 12px; margin: auto; border: 2px solid rgba(255,235,230,.7); border-top-color: transparent; border-radius: 50%; }
.tc-ir { width: 22px; height: 9px; border-radius: 5px; background: linear-gradient(#2a0d10, #120506); box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255,255,255,.05); }
.tc-audio { width: 46px; font-size: 10px !important; letter-spacing: .06em; text-transform: uppercase; color: #8f8f8c !important; }
.tc-audio[aria-pressed="true"] { color: #ffe14d !important; }
.tc-cifre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 10px; }
.tc-cifre button { font-size: 15px; }
.tc-fast { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
/* tasti colorati: almeno 32×24, da prendere col mouse senza mirare */
.tc-fast button { height: 24px; min-width: 32px; border-radius: 6px; }
.tc-fast button::after { left: 8%; right: 8%; top: 1px; height: 45%; }
.tc-fast .f-r { background: linear-gradient(180deg, rgba(255,255,255,.3), transparent 50%), linear-gradient(#c23328, #7e1912); }
.tc-fast .f-g { background: linear-gradient(180deg, rgba(255,255,255,.3), transparent 50%), linear-gradient(#2f9e41, #185d23); }
.tc-fast .f-y { background: linear-gradient(180deg, rgba(255,255,255,.3), transparent 50%), linear-gradient(#d4b62b, #887213); }
.tc-fast .f-c { background: linear-gradient(180deg, rgba(255,255,255,.3), transparent 50%), linear-gradient(#2893c2, #155979); }
.tc-extra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.tc-extra button { font-size: 10px; color: #9b9b98; }
.tc-marca { margin: 4px 0 0; text-align: center; font: 700 9px/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: .3em; color: #58585a; text-shadow: 0 1px 0 rgba(0,0,0,.9); }
.aiuto { position: fixed; z-index: 3; bottom: max(16px, env(safe-area-inset-bottom)); right: 16px; width: calc(100vw - var(--tv-right) - 32px); text-align: center; margin: 0;
  font-size: 11px; line-height: 1.6; color: #5c5c5c; letter-spacing: .04em; pointer-events: none; }

/* telefono: il telecomando è una striscia di tre file in fondo, lo schermo si prende il resto */
@media (max-width: 759px), (max-aspect-ratio: 95/100) {
  .tc { left: 50%; top: auto; bottom: max(10px, env(safe-area-inset-bottom)); width: min(400px, calc(100vw - 20px));
    transform: translateX(-50%); padding: 11px 12px 12px; gap: 7px;
    grid-template-columns: repeat(7, 1fr); grid-auto-rows: 38px; border-radius: 20px;
    box-shadow: inset 0 1.5px 0 color-mix(in srgb, var(--luce) 28%, #262626), inset 0 -2px 3px rgba(0,0,0,.7), 0 -2px 30px -8px rgba(0,0,0,.9), 0 3px 6px rgba(0,0,0,.85); }
  .tc-alto, .tc-cifre, .tc-fast, .tc-extra { display: contents; }
  .tc button { height: 38px; font-size: 14px; }
  .tc-ir, .tc-marca, .tc [data-k="txt"] { display: none; }
  .tc [data-k="power"] { grid-area: 1 / 1; justify-self: center; align-self: center; width: 34px; height: 34px !important; }
  .tc [data-k="audio"] { grid-area: 2 / 1; width: auto; font-size: 9px !important; }
  .tc [data-k="1"] { grid-area: 1 / 2; } .tc [data-k="2"] { grid-area: 1 / 3; } .tc [data-k="3"] { grid-area: 1 / 4; }
  .tc [data-k="4"] { grid-area: 1 / 5; } .tc [data-k="5"] { grid-area: 1 / 6; } .tc [data-k="su"] { grid-area: 1 / 7; }
  .tc [data-k="6"] { grid-area: 2 / 2; } .tc [data-k="7"] { grid-area: 2 / 3; } .tc [data-k="8"] { grid-area: 2 / 4; }
  .tc [data-k="9"] { grid-area: 2 / 5; } .tc [data-k="0"] { grid-area: 2 / 6; } .tc [data-k="giu"] { grid-area: 2 / 7; }
  .tc [data-k="f0"] { grid-area: 3 / 1; } .tc [data-k="f1"] { grid-area: 3 / 2; } .tc [data-k="f2"] { grid-area: 3 / 3; } .tc [data-k="f3"] { grid-area: 3 / 4; }
  .tc [data-k="indice"] { grid-area: 3 / 5; } .tc [data-k="sub+"] { grid-area: 3 / 6; } .tc [data-k="rivela"] { grid-area: 3 / 7; }
  .tc-fast button { height: 24px; align-self: center; }
  .tc-extra button { font-size: 11px; }
  .aiuto { right: 0; left: 0; width: auto; bottom: auto; top: calc(var(--tv-bottom) + (100svh - var(--tv-bottom) - 168px) / 2 - 1.6em);
    font-size: 11px; color: #4d4d4d; }
  .aiuto .desk { display: none; }
}
/* telefono in verticale: lo schermo prende tutta la larghezza; sotto, nello spazio che resta
   sopra il telecomando, la versione testo e l'email da copiare */
@media (max-width: 759px) and (orientation: portrait), (max-aspect-ratio: 95/100) {
  .js:not(.testo) .sotto { position: fixed; z-index: 3; left: 0; right: 0; top: calc(var(--tv-bottom) + 6px);
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--tc-h)); padding: 0 16px;
    display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; gap: 10px 14px; overflow: hidden; }
  .sotto a { font: 600 14px/1 var(--mono); text-decoration: none; }
  .sotto .leggi { color: #111; background: #00e5ff; padding: 12px 16px; border-radius: 10px; min-height: 44px; display: inline-flex; align-items: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 0 #007f8f; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
  .sotto .leggi:active { transform: scale(0.97); }
  .sotto .mail { color: #ffe14d; padding: 12px 2px; user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; letter-spacing: .01em; }
  .sotto a:focus-visible { outline: 2px solid #ffd400; outline-offset: 3px; }
  /* l'aiuto va sotto il bottone, solo se c'è posto */
  .aiuto { top: auto; bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--tc-h) + 6px); }
}
:root { --tc-h: 168px; }
/* telefoni bassi (320×568): telecomando più compatto, così sotto lo schermo c'è posto per bottone ed email */
@media (max-width: 759px) and (orientation: portrait) and (max-height: 640px) {
  :root { --tc-h: 136px; }
  .tc { grid-auto-rows: 34px; padding: 8px 10px 9px; gap: 6px; }
  .tc button { height: 34px; }
  .sotto { gap: 8px 12px; }
  .sotto .leggi { padding: 9px 14px; min-height: 40px; }
  .sotto .mail { font-size: 13px; }
}
@media (max-width: 759px) and (orientation: portrait) and (max-height: 700px) { .aiuto { display: none !important; } }
/* orizzontale basso (telefono girato): l'aiuto non ci sta */
@media (max-height: 449px) { .aiuto { display: none !important; } }
@media (min-width: 760px) and (min-aspect-ratio: 95/100) { .aiuto .tel { display: none; } }
@media (max-height: 560px) and (min-width: 760px) { .tc button { height: 24px; } .tc { gap: 9px; padding: 14px; } }

/* --------- versione testo (e senza JavaScript) --------- */
main { max-width: 46rem; margin: 0 auto; padding: 72px 20px 80px; }
main h1 { font-size: 1.6rem; line-height: 1.15; margin: 0 0 .6rem; color: #ffeb3b; background: #0018c8; padding: .35em .5em; letter-spacing: .02em; }
main .intro { color: #9fe8ff; margin: 0 0 2.5rem; }
main section { padding: 1.4rem 0 1.6rem; border-top: 2px dotted #2b4cff; }
main h2 { font-size: 1.25rem; margin: 0 0 .8rem; color: #fff; }
main h2 .num { color: #ffeb3b; margin-right: .3em; }
main h3 { font-size: 1.05rem; color: #00e5ff; margin: 1.1rem 0 .4rem; }
main p { margin: .35rem 0 .8rem; color: #e6e6e6; }
main p.grande { font-size: 1.25rem; }
main a { color: #ffeb3b; }
main ul { padding-left: 1.2rem; }
main li { margin: .25rem 0; }
main li .num { color: #6cf36c; }
main .fastext { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
main .fastext a { display: inline-block; padding: .2em .6em; text-decoration: none; color: #000; font-weight: 700; }
main .fastext li:nth-child(1) a { background: #c4161c; color: #fff; } /* 5.9:1 col bianco */
main .fastext li:nth-child(2) a { background: #2bdc3a; }
main .fastext li:nth-child(3) a { background: #ffe600; }
main .fastext li:nth-child(4) a { background: #18d8ff; }
main section:target { outline: 2px solid #ffeb3b; outline-offset: 8px; }

/* --------- Salva in PDF (solo versione testo, con JavaScript) --------- */
main .tv { color: #9fe8ff; font-weight: 400; }
main .cv-stampa { display: none; }
main .salva { display: none; margin: -1.4rem 0 2.4rem; }
.js main .salva { display: block; }
main .salva button { font: 700 15px/1 var(--mono); color: #000; background: #ffeb3b; border: 0; border-radius: 0; padding: .7em 1em; cursor: pointer;
  box-shadow: 4px 4px 0 #0018c8; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 140ms cubic-bezier(0.23, 1, 0.32, 1); }
main .salva button:active { transform: translate(2px, 2px) scale(0.98); box-shadow: 2px 2px 0 #0018c8; }
main .salva button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 359px) { main { padding-left: 16px; padding-right: 16px; } main h1 { font-size: 1.35rem; } }
main { overflow-wrap: anywhere; }

/* --------- stampa: il CV su A4 ---------
   Inchiostro nero su bianco, un solo colore (il blu del Televideo) per i titoli. Via la barra, i tasti
   colorati, l'indice, l'ultim'ora, 888 e 999, i numeri di pagina e i rimandi «Torna a…». */
@page { size: A4; margin: 16mm 17mm 18mm;
  @bottom-left { content: "Federico Mascolo · CV"; font: 8pt ui-monospace, Menlo, monospace; color: #777; }
  @bottom-right { content: counter(page) " / " counter(pages); font: 8pt ui-monospace, Menlo, monospace; color: #777; } }
@media print {
  :root { color-scheme: light; }
  html, body { background: #fff !important; color: #111; }
  body { font: 10pt/1.45 "Helvetica Neue", Helvetica, Arial, sans-serif; }
  .barra, #tv, #telecomando, .aiuto, .sotto, #annuncio, main .intro, main .salva, main .fastext, main nav,
  main .no-stampa, main li.rimando, main .num, main h2 .num { display: none !important; }
  main { position: static !important; width: auto !important; height: auto !important; clip-path: none !important; overflow: visible !important;
    max-width: none; margin: 0; padding: 0; }
  main h1 { color: #111; background: none; padding: 0; font: 700 22pt/1.1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.01em; margin: 0 0 4pt; }
  main h1 .tv { display: none; }
  main .cv-stampa { display: block; margin: 0 0 14pt; padding-bottom: 8pt; border-bottom: 2.5pt solid #0018c8; font: 9pt/1.4 ui-monospace, Menlo, monospace; color: #333; }
  main .cv-stampa a { color: #0018c8; text-decoration: none; }
  main section { border-top: 0; padding: 0; margin: 0 0 12pt; }
  main section + section { padding-top: 8pt; border-top: .5pt solid #ccc; }
  main section:target { outline: 0; }
  main h2 { font: 700 8.5pt/1.2 ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .12em; color: #0018c8; margin: 0 0 6pt; break-after: avoid; }
  main h3 { font: 700 10.5pt/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #111; margin: 8pt 0 2pt; break-after: avoid; }
  main p, main li { color: #222; orphans: 3; widows: 3; }
  main p { margin: 0 0 4pt; }
  main p.grande { font-size: 12pt; }
  main ul { padding-left: 12pt; margin: 2pt 0 6pt; }
  main li { margin: 1.5pt 0; break-inside: avoid; }
  main li strong { color: #111; }
  main a { color: inherit; text-decoration: none; }
  main a[href^="mailto:"] { color: #0018c8; }
  main h2, main h3 { break-inside: avoid; }
  /* doppioni sulla carta: il nome (già in testa), «CV in PDF» (è questo foglio), le lingue (già in 300) */
  main [id="101"] h3:first-of-type, main [id="400"] h3, main [id="400"] h3 + p,
  main [id="600"] h3:last-of-type, main [id="600"] h3:last-of-type + p { display: none !important; }
}
/* versione testo: la barra fissa ha un fondo suo, il testo non le scorre sotto */
.testo .barra, .no-js .barra { background: color-mix(in srgb, var(--fondo) 92%, transparent); border-bottom: 1px solid #1a1a1a; }
@media print { .barra { display: none !important; } }