/* ring.css — Trust ring + azioni per le superfici TERMINAL (gemello degli stili in gn.css:
   tenerli allineati). Fallback var: --panel/--fg/--line/--dim di case.css. */
.caserow { position: relative; padding-right: 64px; }
.tdot--corner{position:absolute;top:10px;right:10px;width:48px;height:48px}
.ring svg{display:block}
.ring__big{position:absolute;top:-126px;right:-126px;width:300px;height:300px;pointer-events:none;z-index:30;visibility:hidden;opacity:0;transform:scale(.25);transform-origin:50% 50%;transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.3,1)}
.ring.on .ring__big{visibility:visible;opacity:1;transform:scale(1)}
/* L'apertura all'HOVER è solo da mouse. Su un telefono il pointerdown attiva comunque :hover:
   la gauge (300px) diventava visibile E cliccabile SOPRA il cerchio stesso, quindi il click
   successivo non colpiva il cerchio ma la gauge, finendo nel ramo di CHIUSURA. Risultato
   misurato su schermo tattile: gauge visibile ma .on = false — il pannello sembrava aperto
   mentre la logica lo credeva chiuso, e da lì la ✕ "non chiudeva" (beta 2026-09-08, da cell).
   Con questo blocco, su touch l'unico stato è .on e il tap apre e chiude in modo deterministico. */
@media (hover:hover) and (pointer:fine){
  .ring:hover .ring__big{visibility:visible;opacity:1;transform:scale(1)}
}
/* Issue #166: gauge ribaltata a sinistra quando a destra non c'è spazio (vedi ring.js). */
.ring--flip .ring__big{right:auto;left:-126px}
.ring--flip .ring__x{right:auto;left:34px}
.ring__fade{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle closest-side,var(--panel,#fff) 68%,transparent 100%)}
.ring__big svg{position:relative}
.ring__name{font:700 12px var(--sans,sans-serif);letter-spacing:.2px}
.ring__val{font:600 11px var(--sans,sans-serif);fill:var(--fg,#202124)}
.ring__sub{font:400 9.5px var(--sans,sans-serif);fill:var(--muted,#5f6368)}
.ring__topic{font:700 11px var(--sans,sans-serif);fill:#fff;letter-spacing:.3px}
.actions{position:absolute;right:8px;bottom:8px;display:flex;gap:2px}
.actions .save{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--dim,#80868b);opacity:0;transition:opacity .12s,color .12s,background .12s;border:0;background:none;cursor:pointer}
.caserow:hover .actions .save,.actions .save.on{opacity:1}
.actions .save:hover{background:var(--bg,#f1f3f4);color:var(--fg,#202124)}
.actions .save.on{color:var(--accent,#1a73e8)}
/* Card unica: chip topic + entità (stili gemelli di gn.css) */
.tagsline{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center;padding-right:76px}
.tag{font:600 10px/1 var(--sans,sans-serif);color:var(--muted,#5f6368);background:transparent;border:1px solid var(--line,#e3e5e8);padding:4px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px}
.tag--topic{display:inline-flex;align-items:center;gap:6px;color:var(--fg,#202124)}
.tag--ent{cursor:pointer}
.tag--ent:hover{color:var(--accent,#1a73e8);border-color:var(--accent,#1a73e8)}
.tdot--xs{width:14px;height:14px;border-radius:50%;display:inline-block;flex:0 0 auto;border:2px solid var(--tc,#5f6368);background:radial-gradient(circle,var(--tc,#5f6368) 3.5px,var(--panel,#fff) 4.5px)}
/* Colonna di stato a destra: ring (alto) -> segnale/Analyze (centro) -> azioni (basso).
   Altezza standard della card: la colonna (48+30+32) deve sempre starci. */
.caserow{min-height:150px}
.statecol{position:absolute;top:64px;right:10px;width:48px;display:flex;flex-direction:column;align-items:center;gap:6px}
.sigdot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 15px/1 var(--sans,sans-serif);color:#fff;cursor:help}
.sigdot--opp{background:#0CCE6B}
.sigdot--risk{background:#FF4E42}
.an-btn{font:700 9.5px/1 var(--sans,sans-serif);letter-spacing:.4px;color:var(--accent,#1a73e8);border:1.5px solid currentColor;border-radius:999px;padding:5px 8px;text-transform:uppercase;background:var(--panel,#fff)}
/* 2026-09-02 v2: arco di stato nel ring (58px), share sempre visibile, chip al bottom */
.tdot--corner{width:58px;height:58px;top:8px;right:8px}
.caserow{padding-right:80px;padding-bottom:48px}
.tagsline{position:absolute;left:0;bottom:12px;margin-top:0}
.actions .save{opacity:1}
.ring__oatxt{font:800 8px var(--sans,sans-serif);fill:#fff;letter-spacing:1.5px}
/* v3: arco di stato doppio (canvas 96 -> corner 78px), gauge espansa ricentrata sul nuovo centro */
.tdot--corner{width:78px;height:78px;top:6px;right:6px}
.ring__big{top:-105px;right:-105px}
.ring--flip .ring__big{right:auto;left:-105px}
.caserow{padding-right:100px}
.ring__oatxt{font:800 9px var(--sans,sans-serif);letter-spacing:1.8px}
/* v4: chip staccate dal bordo sinistro della card */
.caserow .tagsline{left:14px}
/* Anteprima 2 righe sotto il titolo */
.carddek{font:400 13px/1.45 var(--sans,sans-serif);color:var(--muted,#5f6368);margin:2px 0 4px;max-width:72ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Mobile: chip in flusso (l'ancoraggio bottom le faceva salire sopra l'anteprima quando wrappano) */
@media (max-width: 760px){
  .caserow{padding-bottom:14px}
  .caserow .tagsline{position:static;margin-top:8px;left:auto;bottom:auto}
}
/* Mobile: gauge dentro lo schermo (ancorata a destra) */
@media (max-width:560px){
  .ring__big{right:8px;top:-60px;transform-origin:calc(100% - 46px) 60px}
}
@media (max-width:560px){.ring__big{right:-20px}}
/* Velo della gauge senza sfumatura: disco pieno */
.ring__fade{background:var(--panel,#fff);border:1px solid var(--line,#e3e5e8);box-shadow:0 10px 34px rgba(15,23,42,.22)}
.ring__slice{fill:var(--panel,#fff)}
.ring__big svg{filter:drop-shadow(0 10px 30px rgba(15,23,42,.2))}
.ring.on .ring__big{pointer-events:auto}
.ring__x{position:absolute;top:34px;right:34px;width:30px;height:30px;border-radius:50%;background:var(--panel,#fff);border:1px solid var(--line,#e3e5e8);color:var(--muted,#5f6368);font:600 13px/1 var(--sans,sans-serif);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.15)}
/* Il disegno resta 30px, ma l'area TOCCABILE arriva a 44px (Apple HIG; il minimo WCAG 2.5.8 è
   24px). Su un telefono un bersaglio da 30px si manca, e mancarlo sembra "la ✕ non funziona".
   Fatto con uno pseudo-elemento per non spostare di un pixel la grafica della gauge. */
.ring__x::after{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.ring__x:hover{color:var(--fg,#202124)}
/* Con il mouse la gauge si apre al passaggio e si chiude uscendo: la ✕ lì non serve e confonde
   (beta 2026-09-14). Resta sui touch, dove è l'unica chiusura evidente (issue #166). Il click
   sulla gauge la chiude comunque anche da desktop (ring.js). */
@media (hover:hover) and (pointer:fine){.ring__x{display:none}}
@media (hover:hover) and (pointer:fine){.ring:hover .ring__big{pointer-events:auto}}
/* Chiusura ESPLICITA (✕ o tap sulla gauge): vince anche sull'hover — senza questo, su desktop
   la regola :hover teneva la gauge visibile dopo il click (✕ "morta", beta 2026-09-03) e su iOS
   l'hover appiccicoso post-tap faceva lo stesso. Lo stato cade al mouseleave (vedi ring.js). */
.ring.closed .ring__big{visibility:hidden;opacity:0;transform:scale(.6);pointer-events:none}