/* «In evidenza» (dist/highlights.js). Sizes match flutter_app/lib/widgets/highlights.dart: 72px circles, 3px ring,
   12px labels, 4px progress gap, 16px stage radius. Brand tokens from brand.css with fallbacks. */
.wtg-hl{margin:24px 0;display:grid;gap:10px}
.wtg-hl .wtg-hl-heading,.professional .wtg-hl .wtg-hl-heading{margin:0;font:600 13px var(--display,'Space Grotesk',sans-serif);color:var(--muted,#a7b4c8)}
.wtg-hl-row{list-style:none;margin:0;padding:4px 2px 8px;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.wtg-hl-row::-webkit-scrollbar{display:none}
.wtg-hl-row li{flex:none;scroll-snap-align:start}
.wtg-hl-row .wtg-hl-item{all:unset;box-sizing:border-box;width:76px;display:grid;justify-items:center;gap:6px;padding:0;border:0;background:none;color:var(--text,#f8fafc);cursor:pointer;min-height:44px}
.wtg-hl-disc{width:72px;height:72px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,var(--hl-tone),var(--accent,#7aa7ff),var(--hl-tone));transition:transform .16s cubic-bezier(.2,.8,.2,1)}
.wtg-hl-item.is-seen .wtg-hl-disc{background:var(--line,#2c3a55)}
.wtg-hl-disc>span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden;border:3px solid var(--bg,#070a12);background:var(--surface-2,#151b2b);color:var(--hl-tone)}
.wtg-hl-disc img{width:100%;height:100%;object-fit:cover;display:block}
.wtg-hl-fallback{width:28px;height:28px}
.wtg-hl-item:active .wtg-hl-disc{transform:scale(.94)}
.wtg-hl-row .wtg-hl-item:focus-visible{outline:2px solid var(--accent,#7aa7ff);outline-offset:3px;border-radius:12px}
.wtg-hl-label{font:600 12px/1.25 var(--body,Manrope,sans-serif);max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

html.wtg-hl-lock,html.wtg-hl-lock body{overflow:hidden}
.wtg-hl-viewer{position:fixed;inset:0;z-index:1000;background:var(--space,#05070e);display:grid;place-items:center;perspective:1200px;overflow:hidden;color:var(--text,#f8fafc);font-family:var(--body,Manrope,sans-serif)}
.wtg-hl-viewer[hidden]{display:none}
.wtg-hl-story{position:relative;width:min(100%,430px);height:100%;max-height:900px;display:flex;flex-direction:column;touch-action:none;will-change:transform;
  padding:calc(10px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));box-sizing:border-box}
.wtg-hl-bars{display:flex;gap:4px}
.wtg-hl-bars i{flex:1;height:3px;border-radius:2px;background:rgba(248,250,252,.25);overflow:hidden}
.wtg-hl-bars u{display:block;height:100%;background:var(--text,#f8fafc)}
.wtg-hl-top{display:flex;align-items:center;gap:10px;margin-top:10px}
.wtg-hl-mini{width:34px;height:34px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--surface-2,#151b2b);color:var(--hl-tone);border:1px solid var(--line,#2c3a55)}
.wtg-hl-mini img{width:100%;height:100%;object-fit:cover}.wtg-hl-mini svg{width:18px;height:18px}
.wtg-hl-top div{flex:1;min-width:0}
.wtg-hl-top b{display:block;font:600 14px var(--display,'Space Grotesk',sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wtg-hl-top small{color:var(--muted,#a7b4c8);font-size:12px}
.wtg-hl-icon{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:10px;background:none;color:inherit;cursor:pointer}
.wtg-hl-icon[hidden]{display:none}.wtg-hl-icon svg{width:22px;height:22px}
.wtg-hl-stage{flex:1;position:relative;margin-top:12px;border-radius:16px;overflow:hidden;background:var(--surface,#0e1320);min-height:0}
.wtg-hl-slide{position:absolute;inset:0;display:flex;flex-direction:column}
.wtg-hl-paused{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:rgba(5,7,14,.7);border:1px solid var(--line,#2c3a55);border-radius:999px;padding:4px 12px;font-size:12px;color:var(--muted,#a7b4c8)}
.wtg-hl-photo{position:absolute;inset:0}
.wtg-hl-blur{position:absolute;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);object-fit:cover;filter:blur(24px) brightness(.45)}
.wtg-hl-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.wtg-hl-caption{position:relative;margin:auto 0 0;padding:48px 16px 16px;background:linear-gradient(transparent,rgba(5,7,14,.86));font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.wtg-hl-media{position:relative;flex:1;display:grid;place-items:center;align-content:center;gap:14px;padding:20px;text-align:center;background:radial-gradient(90% 60% at 50% 30%,color-mix(in srgb,var(--update,#8fcfff) 16%,transparent),transparent 70%)}
.wtg-hl-slide[data-type=listen] .wtg-hl-media{background:radial-gradient(90% 60% at 50% 30%,color-mix(in srgb,var(--music,#ffce78) 16%,transparent),transparent 70%)}
.wtg-hl-media iframe{width:100%;height:100%;min-height:240px;border:0;border-radius:12px;align-self:stretch}
.wtg-hl-chip{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--display,'Space Grotesk',sans-serif);padding:4px 10px;border-radius:999px;border:1px solid var(--line,#2c3a55);color:var(--muted,#a7b4c8)}
.wtg-hl-chip svg{width:14px;height:14px}
.wtg-hl-play{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(248,250,252,.4);background:rgba(5,7,14,.55);color:inherit;cursor:pointer}
.wtg-hl-play svg{width:30px;height:30px}
.wtg-hl-hint{margin:0;color:var(--muted,#a7b4c8);font-size:13px}
.wtg-hl-out{color:var(--accent,#7aa7ff);font-weight:600;font-size:14px;min-height:44px;display:inline-flex;align-items:center}
.wtg-hl-card{flex:1;display:flex;flex-direction:column;gap:14px;padding:22px 18px 18px;overflow:auto;background:radial-gradient(120% 70% at 100% 0,color-mix(in srgb,var(--accent,#7aa7ff) 22%,transparent),transparent 60%),var(--surface,#0e1320)}
.wtg-hl-card h3{margin:0;font:600 26px/1.15 var(--display,'Space Grotesk',sans-serif);text-wrap:balance;overflow-wrap:anywhere}
.wtg-hl-card dl{margin:0}
.wtg-hl-card dl>div{display:grid;grid-template-columns:minmax(92px,38%) 1fr;gap:10px;padding:11px 0;border-top:1px solid var(--line,#2c3a55);align-items:baseline}
.wtg-hl-card dt{color:var(--muted,#a7b4c8);font-size:13px}
.wtg-hl-card dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}
.wtg-hl-note{margin:0;font-size:12px;color:var(--muted,#a7b4c8)}
.wtg-hl-slide[data-type=card] .wtg-hl-caption{background:none;padding:0 18px 16px;margin:0}
.wtg-hl-bottom{display:flex;gap:10px;margin-top:12px}
.wtg-hl-contact{flex:1;min-height:48px;border-radius:999px;border:1px solid var(--accent,#7aa7ff);background:var(--accent,#7aa7ff);color:var(--on-accent,#050a16);font:600 14px var(--body,Manrope,sans-serif);cursor:pointer}
.wtg-hl-contact[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.wtg-hl-disc{transition:none}}
.wtg-hl-summary{display:grid;gap:10px;margin:12px 0}
.wtg-hl-sum ol{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.wtg-hl-sum li{display:flex;gap:10px;align-items:center;min-width:0}
.wtg-hl-sum img{width:64px;height:64px;object-fit:cover;border-radius:8px;flex:none}
.wtg-hl-sum span{min-width:0;overflow-wrap:anywhere;font-size:13px}
.wtg-hl-sum small{display:block;color:var(--muted,#a7b4c8);font:600 12px var(--display,'Space Grotesk',sans-serif)}
/* Editor (dist/highlights-editor.js) in the full card form. */
.hle-circle{border:1px solid var(--line,#2c3a55);border-radius:16px;padding:12px;margin:12px 0;display:grid;gap:10px;min-width:0}
.hle-circle legend{padding:0 6px;color:var(--muted,#a7b4c8);font:600 12px var(--display,'Space Grotesk',sans-serif)}
.hle-circle-head,.hle-slide-head{display:flex;gap:8px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.hle-circle-head label{flex:1;min-width:180px}
.hle-circle-head span,.hle-slide-head span,.hle-add{display:flex;gap:6px;flex-wrap:wrap}
.hle-slides{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.hle-slide{background:var(--surface-2,#151b2b);border:1px solid var(--line,#2c3a55);border-radius:12px;padding:10px;display:grid;gap:8px;min-width:0}
.hle-small{min-height:36px;padding:0 12px;font-size:13px}
.hle-field{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px;gap:6px}
.hle-x{min-height:36px;padding:0}
.hle-photo{display:flex;gap:12px;align-items:flex-start}
.hle-photo img,.hle-empty{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;background:var(--surface,#0e1320);border:1px dashed var(--control,#60718d)}
.hle-photo>div{display:grid;gap:6px;min-width:0}
.hle-file{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--accent,#7aa7ff);border-radius:10px;color:var(--accent,#7aa7ff);font-weight:600;cursor:pointer;width:max-content}
.hle-file input{position:absolute;width:1px;height:1px;opacity:0}
.hle-file:focus-within{outline:2px solid var(--accent,#7aa7ff);outline-offset:2px}
.hle-file.is-off{opacity:.5;cursor:not-allowed}
.hle-status{color:var(--muted,#a7b4c8)}
.hle-cover{display:flex;gap:6px;align-items:center;font-size:13px}
.hle-cover input[type=radio]{width:18px;height:18px;min-height:0;margin:0;padding:0;flex:none}
.hle-new{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.hle-new label{flex:1;min-width:200px}
/* Side strips above a running player: the iframe keeps the centre, navigation keeps the edges. */
.wtg-hl-edge{position:absolute;top:0;bottom:0;width:15%;z-index:2;border:0;background:none;padding:0;cursor:pointer}
.wtg-hl-edge.is-prev{left:0}.wtg-hl-edge.is-next{right:0}
.wtg-hl-edge:focus-visible{outline:2px solid var(--accent,#7aa7ff);outline-offset:-4px}
/* Owner: first circle opens the editor, as _EditCircle in the app. */
.wtg-hl-row .wtg-hl-edit .wtg-hl-disc{background:none;border:1.5px solid var(--line,#2c3a55);padding:0}
.wtg-hl-row .wtg-hl-edit .wtg-hl-disc>span{border:0;background:none;color:var(--accent,#7aa7ff)}