@charset "utf-8";
/*
Diapason Digital PITCH UI
Main CSS file
Version: 2.2.0
Log: Nuovo sistema colore completato, fix su molti componenti. Necessita ancora check su html vecchio
Author: Milo Neri @ Diapason Digital
License: Copyright
Last Update: 6 gen 2026
*/

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* colori */

:root {
	color-scheme:light dark;
	
	--dd-cyan:       #00fff6;        --on-dd-cyan:       #000;
	--dd-light-blue: #00dcff;        --on-dd-light-blue: #000;
	--dd-blue:       #4141ff;        --on-dd-blue:       #fff;
	--dd-violet:     #773eff;        --on-dd-violet:     #fff;
	--dd-purple:     #b92aff;        --on-dd-purple:     #000;	

	--toogood:       light-dark(#279E3A,#2BDC5A);       --on-toogood: light-dark(#fff,#000);
	--warning:       light-dark(#E8600D,#FFA200);       --on-warning: light-dark(#fff,#000);
	--gonebad:       light-dark(#E61818,#FB5050);       --on-gonebad: light-dark(#fff,#000);

	--offwhite:      color-mix(in srgb,#fff,#000 2%);
	--grey10:        color-mix(in srgb,#fff,#000 11%);
	--grey20:        color-mix(in srgb,#fff,#000 20%);
	--grey30:        color-mix(in srgb,#fff,#000 29%);
	--grey40:        color-mix(in srgb,#fff,#000 39%);
	--grey50:        color-mix(in srgb,#fff,#000 48%);
	--grey60:        color-mix(in srgb,#fff,#000 57%);
	--grey70:        color-mix(in srgb,#fff,#000 67%);
	--grey80:        color-mix(in srgb,#fff,#000 76%);
	--grey90:        color-mix(in srgb,#fff,#000 85%);
	--offblack:      color-mix(in srgb,#fff,#000 94%);
	
	
	--scrim:         color-mix(in srgb, #000, transparent 35%);


	--base-bg:       light-dark(  var(--offwhite)   ,   var(--offblack)  );
	--base-color:    light-dark(  var(--offblack)   ,   var(--offwhite)  );
	
	--accent:        light-dark(  var(--dd-blue)   ,   var(--dd-light-blue)  );
	--accent-hover:  color-mix(in srgb, var(--accent), var(--base-bg) 12%);
	--on-accent:     light-dark(#fff,#000);

	--overlay:       color-mix(in srgb, var(--base-color), transparent 20%);
	
	--border-subtle: light-dark(  color-mix(in srgb, var(--base-color), transparent 92%)   ,   color-mix(in srgb, var(--base-color), transparent 92%)  );
	--border:        light-dark(  color-mix(in srgb, var(--base-color), transparent 70%)   ,   color-mix(in srgb, var(--base-color), transparent 74%)  );
	--border-strong: light-dark(  color-mix(in srgb, var(--base-color), transparent 48%)   ,   color-mix(in srgb, var(--base-color), transparent 56%)  );
	
	--btn-bg:        light-dark(  color-mix(in srgb, var(--base-color), var(--surface00) 95%)   ,   color-mix(in srgb, var(--base-color), var(--surface10) 94%)  );
	--btn-bg-hover:  light-dark(  color-mix(in srgb, var(--base-color), var(--surface00) 99%)   ,   color-mix(in srgb, var(--base-color), var(--surface10) 98%)  );
	
	--input-bg:      light-dark(  color-mix(in srgb, var(--base-color), transparent 97%)   ,   color-mix(in srgb, var(--base-color), transparent 97%)  );
	

	--toogood-bg: color-mix(in srgb, var(--toogood), var(--base-bg) 80%);
	--warning-bg: color-mix(in srgb, var(--warning), var(--base-bg) 80%);
	--gonebad-bg: color-mix(in srgb, var(--gonebad), var(--base-bg) 80%);
	
	--color-toogood: color-mix(in srgb, var(--toogood), var(--base-color) 20%);
	--color-warning: color-mix(in srgb, var(--warning), var(--base-color) 20%);
	--color-gonebad: color-mix(in srgb, var(--gonebad), var(--base-color) 15%);
	
	--on-toogood-bg: color-mix(in srgb, var(--toogood), var(--base-color) 50%);
	--on-warning-bg: color-mix(in srgb, var(--warning), var(--base-color) 50%);
	--on-gonebad-bg: color-mix(in srgb, var(--gonebad), var(--base-color) 50%);
	
	
	--bg-tint: var(--accent);
	--tinted-bg-grey: light-dark(  color-mix(in srgb, var(--bg-tint), var(--grey60) 65%)            ,   color-mix(in srgb, var(--bg-tint), var(--grey20) 85%) );

	--bg00:           light-dark(  color-mix(in srgb, var(--tinted-bg-grey), var(--offwhite) 97%)   ,   color-mix(in srgb, var(--tinted-bg-grey), var(--offblack) 95%)  );
	--bg10:           light-dark(  color-mix(in srgb, var(--tinted-bg-grey), var(--offwhite) 92%)   ,   color-mix(in srgb, var(--tinted-bg-grey), var(--offblack) 91%)  );
	--bg20:           light-dark(  color-mix(in srgb, var(--tinted-bg-grey), var(--offwhite) 87%)   ,   color-mix(in srgb, var(--tinted-bg-grey), var(--offblack) 88%)  );
	--bg30:           light-dark(  color-mix(in srgb, var(--tinted-bg-grey), var(--offwhite) 82%)   ,   color-mix(in srgb, var(--tinted-bg-grey), var(--offblack) 84%)  );
	--bg40:           light-dark(  color-mix(in srgb, var(--tinted-bg-grey), var(--offwhite) 77%)   ,   color-mix(in srgb, var(--tinted-bg-grey), var(--offblack) 80%)  );
	--bg50:           light-dark(  color-mix(in srgb, var(--tinted-bg-grey), var(--offwhite) 72%)   ,   color-mix(in srgb, var(--tinted-bg-grey), var(--offblack) 76%)  );
	
	--inverse-bg30:   light-dark(  color-mix(in srgb, var(--tinted-bg-grey), var(--offblack) 85%)   ,   color-mix(in srgb, var(--tinted-bg-grey), var(--offwhite) 85%)  );
	
	
	--surface-tint: var(--accent);
	--tinted-surface-grey: light-dark( color-mix(in srgb, var(--surface-tint), var(--grey60) 25%)   ,   color-mix(in srgb, var(--surface-tint), var(--grey10) 50%) );
	
	--surface00: light-dark(  color-mix(in srgb, var(--tinted-surface-grey), var(--offwhite) 97%)   ,   color-mix(in srgb, var(--tinted-surface-grey), var(--offblack) 95%)  );
	--surface10: light-dark(  color-mix(in srgb, var(--tinted-surface-grey), var(--offwhite) 92%)   ,   color-mix(in srgb, var(--tinted-surface-grey), var(--offblack) 91%)  );
	--surface20: light-dark(  color-mix(in srgb, var(--tinted-surface-grey), var(--offwhite) 87%)   ,   color-mix(in srgb, var(--tinted-surface-grey), var(--offblack) 88%)  );
	--surface30: light-dark(  color-mix(in srgb, var(--tinted-surface-grey), var(--offwhite) 82%)   ,   color-mix(in srgb, var(--tinted-surface-grey), var(--offblack) 84%)  );
	--surface40: light-dark(  color-mix(in srgb, var(--tinted-surface-grey), var(--offwhite) 77%)   ,   color-mix(in srgb, var(--tinted-surface-grey), var(--offblack) 80%)  );
	--surface50: light-dark(  color-mix(in srgb, var(--tinted-surface-grey), var(--offwhite) 72%)   ,   color-mix(in srgb, var(--tinted-surface-grey), var(--offblack) 76%)  );
	
	

	--text-tint: var(--accent);
	--tinted-text-on-bg: color-mix(in srgb, var(--text-tint), var(--base-color) 95%);
	--tinted-text-on-surface: color-mix(in srgb, var(--text-tint), var(--base-color) 83%);

	--on-surface:      color-mix(in srgb,var(--tinted-text-on-surface), transparent 12%);
	--on-surface-dim:  color-mix(in srgb,var(--tinted-text-on-surface), transparent 24%);
	--on-bg:           color-mix(in srgb,var(--tinted-text-on-bg), transparent 14%);;
	--on-bg-dim:       color-mix(in srgb,var(--tinted-text-on-bg), transparent 28%);
	--text:            color-mix(in srgb,var(--base-color), transparent 16%);
	--text-dim:        color-mix(in srgb,var(--base-color), transparent 32%);
	
	

	
	

}


@media (prefers-color-scheme: dark) {
	:root { color-scheme:dark }
}
.color-scheme-dark {color-scheme:only dark;color:var(--base-color);background-color:var(--bg00)}
.color-scheme-light {color-scheme:only light;color:var(--base-color);background-color:var(--bg00)}

.color-swatch {display:inline-block;font-size:var(--m-label);font-family:monospace;padding:1em 1.25em;min-height:5em;min-width:8em}
.color-swatch .contrast-ratio {margin-top:.75em}

.base-color {color:var(--base-color)}
.inverse-color {color:var(--base-bg)}
.toogood {color:var(--toogood)}
.warning {color:var(--warning)}
.gonebad {color:var(--gonebad)}
.color-toogood {color:var(--color-toogood)}
.color-warning {color:var(--color-warning)}
.color-gonebad {color:var(--color-gonebad)}
.color-on-toogood {color:var(--on-toogood)}
.color-on-warning {color:var(--on-warning)}
.color-on-gonebad {color:var(--on-gonebad)}
.color-on-toogood-bg {color:var(--on-toogood-bg)}
.color-on-warning-bg {color:var(--on-warning-bg)}
.color-on-gonebad-bg {color:var(--on-gonebad-bg)}
.color-accent {color:var(--accent)}
.color-on-accent {color:var(--on-accent)}
.color-black {color:#000000}
.color-white {color:#ffffff}
.color-offblack {color:var(--offblack)}
.color-offwhite {color:var(--offwhite)}
.color-on-surface {color:var(--on-surface)}
.color-on-surface-dim {color:var(--on-surface-dim)}
.color-on-bg {color:var(--on-bg)}
.color-on-bg-dim {color:var(--on-bg-dim)}
.color-text {color:var(--text)}
.color-text-dim {color:var(--text-dim)}



.bg-dd-cyan {background-color:var(--dd-cyan)}
.bg-dd-light-blue {background-color:var(--dd-light-blue)}
.bg-dd-blue {background-color:var(--dd-blue)}
.bg-dd-violet {background-color:var(--dd-violet)}
.bg-dd-purple {background-color:var(--dd-purple)}
.bg-toogood {background-color:var(--toogood)}
.bg-warning {background-color:var(--warning)}
.bg-gonebad {background-color:var(--gonebad)}
.bg-toogood-bg {background-color:var(--toogood-bg)}
.bg-warning-bg {background-color:var(--warning-bg)}
.bg-gonebad-bg {background-color:var(--gonebad-bg)}
.base-bg {background-color:var(--base-bg)}
.inverse-bg {background-color:var(--base-color)}
.bg-white {background-color:#ffffff}
.bg-black {background-color:#000000}
.bg-offwhite {background-color:var(--offwhite)}
.bg-offblack {background-color:var(--offblack)}
.bg-grey10 {background-color:var(--grey10)}
.bg-grey20 {background-color:var(--grey20)}
.bg-grey30 {background-color:var(--grey30)}
.bg-grey40 {background-color:var(--grey40)}
.bg-grey50 {background-color:var(--grey50)}
.bg-grey60 {background-color:var(--grey60)}
.bg-grey70 {background-color:var(--grey70)}
.bg-grey80 {background-color:var(--grey80)}
.bg-grey90 {background-color:var(--grey90)}
.bg-accent {background-color:var(--accent)}
.bg-accent-hover {background-color:var(--accent-hover)}
.bg-on-accent {background-color:var(--on-accent)}
.bg-overlay {background-color:var(--overlay)}
.bg-scrim {background-color:var(--scrim)}
.bg-border {background-color:var(--border)}
.bg-border-subtle {background-color:var(--border-subtle)}
.bg-border-strong {background-color:var(--border-strong)}
.btn-bg {background-color:var(--btn-bg)}
.btn-bg-hover {background-color:var(--btn-bg-hover)}
.input-bg {background-color:var(--input-bg)}
.bg00 {background-color:var(--bg00)}
.bg10 {background-color:var(--bg10)}
.bg20 {background-color:var(--bg20)}
.bg30 {background-color:var(--bg30)}
.bg40 {background-color:var(--bg40)}
.bg50 {background-color:var(--bg50)}
.inverse-bg30 {background-color:var(--inverse-bg30)}
.surface00 {background-color:var(--surface00)}
.surface10 {background-color:var(--surface10)}
.surface20 {background-color:var(--surface20)}
.surface30 {background-color:var(--surface30)}
.surface40 {background-color:var(--surface40)}
.surface50 {background-color:var(--surface50)}
.bg-tint {background-color:var(--bg-tint)}
.tinted-bg-grey {background-color:var(--tinted-bg-grey)}
.surface-tint {background-color:var(--surface-tint)}
.tinted-surface-grey {background-color:var(--tinted-surface-grey)}



	

/* sizes */
:root {

	--top: 0;
	--container: 1610px;
	--container-padding:35px;
		

}


/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* layout */


.site-container {padding-left:35px;padding-right:35px}
.in-container {max-width:var(--container);margin-left:auto;margin-right:auto}
.padded {padding:36px}


.row {display:flex;justify-content:space-between}
.col {display:flex;flex-direction:column}
.grid {display:grid}
.s-gap {gap:.5em}
.m-gap {gap:1em}
.l-gap {gap:2em}
.wrap {flex-wrap:wrap}
.align-items-center {align-items:center}
.align-items-baseline {align-items:baseline}
.align-self-stretch {align-self:stretch}
.align-self-center {align-self:center}
.justify-self-center {align-self:stretch}
.justify-content-start {justify-content:flex-start}
.justify-content-center {justify-content:center}
.justify-content-end {justify-content:flex-end}
.stretch {justify-self:stretch}
.grow {flex-grow:2}
.fullheight {max-height:100%;height:100%}
.fullwidth {max-width:100%;width:100%}
.centered {margin-left:auto;margin-right:auto}
.centered-childs {display:flex;align-items:center;justify-content:center}

.dueterzi {aspect-ratio:2/3}
.tremezzi {aspect-ratio:3/2}
.trequarti {aspect-ratio:3/4}
.quattroterzi {aspect-ratio:4/3}
.quattroquinti {aspect-ratio:4/5}
.cinquequarti {aspect-ratio:5/4}
.sedicinoni {aspect-ratio:16/9}
.novesedicesimi {aspect-ratio:9/16}
.ventinoni {aspect-ratio:20/9}
.noveventesimi {aspect-ratio:9/20}
.ventunononi {aspect-ratio:21/9}
.noveventunesimi {aspect-ratio:9/21}


.grid.gtc-1 {grid-template-columns:1fr}
.grid.gtc-2 {grid-template-columns:1fr 1fr}
.grid.gtc-3 {grid-template-columns:1fr 1fr 1fr}
.grid.gtc-4 {grid-template-columns:repeat(4, 1fr)}
.grid.gtc-5 {grid-template-columns:repeat(5, 1fr)}
.grid.gtc-6 {grid-template-columns:repeat(6, 1fr)}
.grid.gtc-7 {grid-template-columns:repeat(7, 1fr)}
.grid.gtc-8 {grid-template-columns:repeat(8, 1fr)}
.grid.gtc-9 {grid-template-columns:repeat(9, 1fr)}
.grid.gtc-10 {grid-template-columns:repeat(10, 1fr)}
.grid.gtc-11 {grid-template-columns:repeat(11, 1fr)}
.grid.gtc-12 {grid-template-columns:repeat(12, 1fr)}

.grid > .colspan-2 {grid-column: span 2}
.grid > .colspan-3 {grid-column: span 3}
.grid > .colspan-4 {grid-column: span 4}
.grid > .colspan-5 {grid-column: span 5}
.grid > .colspan-6 {grid-column: span 6}
.grid > .colspan-7 {grid-column: span 7}
.grid > .colspan-8 {grid-column: span 8}
.grid > .colspan-9 {grid-column: span 9}
.grid > .colspan-10 {grid-column: span 10}
.grid > .colspan-11 {grid-column: span 11}
.grid > .colspan-12 {grid-column: span 12}

@media (min-width:960px) and (max-width:1440px)  {

	.grid.laptop-gtc-1 {grid-template-columns:1fr}
	.grid.laptop-gtc-2 {grid-template-columns:1fr 1fr}
	.grid.laptop-gtc-3 {grid-template-columns:1fr 1fr 1fr}
	.grid.laptop-gtc-4 {grid-template-columns:repeat(4, 1fr)}
	.grid.laptop-gtc-5 {grid-template-columns:repeat(5, 1fr)}
	.grid.laptop-gtc-6 {grid-template-columns:repeat(6, 1fr)}
	.grid.laptop-gtc-7 {grid-template-columns:repeat(7, 1fr)}
	.grid.laptop-gtc-8 {grid-template-columns:repeat(8, 1fr)}
	.grid.laptop-gtc-9 {grid-template-columns:repeat(9, 1fr)}
	.grid.laptop-gtc-10 {grid-template-columns:repeat(10, 1fr)}
	.grid.laptop-gtc-11 {grid-template-columns:repeat(11, 1fr)}
	.grid.laptop-gtc-12 {grid-template-columns:repeat(12, 1fr)}

}
@media (min-width:0px) and (max-width:959px)  {

	.row.col-on-mobile {flex-direction:column}
	
	.grid.mobile-gtc-1,.grid.col-on-mobile {grid-template-columns:1fr}
	.grid.mobile-gtc-2 {grid-template-columns:1fr 1fr}
	.grid.mobile-gtc-3 {grid-template-columns:1fr 1fr 1fr}
	.grid.mobile-gtc-4 {grid-template-columns:repeat(4, 1fr)}
	.grid.mobile-gtc-5 {grid-template-columns:repeat(5, 1fr)}
	.grid.mobile-gtc-6 {grid-template-columns:repeat(6, 1fr)}
	.grid.mobile-gtc-7 {grid-template-columns:repeat(7, 1fr)}
	.grid.mobile-gtc-8 {grid-template-columns:repeat(8, 1fr)}
	.grid.mobile-gtc-9 {grid-template-columns:repeat(9, 1fr)}
	.grid.mobile-gtc-10 {grid-template-columns:repeat(10, 1fr)}
	.grid.mobile-gtc-11 {grid-template-columns:repeat(11, 1fr)}
	.grid.mobile-gtc-12 {grid-template-columns:repeat(12, 1fr)}
	

}

/* quick show/hide classes */
@media (min-width:0px) and (max-width:959px)  { .hide-on-mobile  {display:none!important} .desktop-only{display: none!important}  }
@media (min-width:960px)                      { .hide-on-desktop {display:none!important} .mobile-only {display: none!important}  }


/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* typography */

:root {
	
	--sans-serif: -apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
	
	--s-label:10px;
	--m-label:11px;
	--l-label:12px;
	
	--s-copy:14px;
	--m-copy:16px;
	--l-copy:18px;
	
	--s-title:21px;
	--m-title:24px;
	--l-title:27px;
	
	--s-display:35px;
	--m-display:48px;
	--l-display:63px;
}

small,
.s-label {--font-size:10px; font-size:var(--s-label);line-height:normal;letter-spacing:.066em}
.m-label {--font-size:11px; font-size:var(--m-label);line-height:normal;letter-spacing:.033em}
.l-label {--font-size:12px; font-size:var(--l-label);line-height:normal;letter-spacing:.012em}

.s-copy  {--font-size:14px; font-size:var(--s-copy);line-height:1.5;letter-spacing:normal}
.m-copy  {--font-size:16px; font-size:var(--m-copy);line-height:1.5;letter-spacing:normal}
.l-copy  {--font-size:18px; font-size:var(--l-copy);line-height:1.5;letter-spacing:normal}

h6, .s-title   {--font-size:21px; margin:0;letter-spacing:normal;font-weight:normal;font-size:var(--s-title);line-height:1.3333333}
h5, .m-title   {--font-size:24px; margin:0;letter-spacing:normal;font-weight:normal;font-size:var(--m-title);line-height:1.3333333}
h4, .l-title   {--font-size:27px; margin:0;letter-spacing:normal;font-weight:normal;font-size:var(--l-title);line-height:1.3333333}

h3, .s-display {--font-size:35px; margin:0;letter-spacing:normal;font-weight:normal;font-size:var(--s-display);line-height:1.3333333}
h2, .m-display {--font-size:48px; margin:0;letter-spacing:normal;font-weight:normal;font-size:var(--m-display);line-height:1.3333333}
h1, .l-display {--font-size:63px; margin:0;letter-spacing:normal;font-weight:normal;font-size:var(--l-display);line-height:1.3333333}




/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* general elements */

html, body {padding:0;margin:0;font-family:var(--sans-serif);font-size:var(--m-copy);--font-size:var(--m-copy)}
html {scroll-behavior:smooth}
body {background-color:light-dark(var(--bg00),var(--bg40));color:var(--base-color)}
:not(.btn-img) svg {fill:currentcolor}
img {max-width:100%;height:auto}
figure {display:block;margin:0;line-height:0;position:relative;overflow:hidden}
figure img {width:100%;object-fit:cover;object-position:center center}
figcaption {font-size:var(--s-copy)}
p {margin:0}
hr {background-color:var(--border-subtle);height:1px;border:none;clear:both;margin:1.5em 0}
blockquote {font-style:italic;margin:1em 0 1.5em 1.5em}
pre, .pre {background-color:light-dark(var(--bg10),var(--bg30));border-radius:6px;padding:1em 1.3333333em;font-size:var(--s-copy);line-height:1.8em;font-family:monospace;color:var(--on-bg-dim);overflow:auto}
code {background-color:var(--surface30);padding:0 .25em;border-radius:3px}
iframe {max-width:100%;border:none;outline:none}
table {border-collapse:collapse;width:100%;border-radius:3px;border:solid 1px var(--border);background-color:light-dark(#fff,var(--bg10))}
table :is(td,th) {padding:1em;vertical-align:middle;border-bottom:solid 1px var(--border-subtle)}
table th {font-weight:400;letter-spacing:.025em;font-size:var(--s-copy)}
table tr:last-child td {border-color:var(--border)}
table tr:last-child th {border-color:var(--border)}
table.highlight-rows-on-hover tbody tr:has(:hover) :is(td,th) {background-color:light-dark(var(--surface00),var(--bg20))}

table.dense :is(td,th) {padding:.5em}



svg {fill: currentcolor}
svg.facebook:hover {fill: #1877f2}
svg.linkedin:hover {fill: #0a66c2}
svg.youtube:hover  {fill: #f00}
svg.instagram:hover{fill: #f00}

svg[viewBox="0 0 48 48"],
svg[viewBox="0 0 24 24"]   {width:24px; height:24px}
svg[viewBox="0 0 16 16"]   {width:16px; height:16px}

.show-on-tr-hover {visibility:hidden}
tr:hover .show-on-tr-hover {visibility:visible}

.divider {display:block;width:4px;margin-left:4px;height:1.8rem;border-left:1px solid var(--base-color)}
.spinner {--spinner_size:64px;width:var(--spinner_size);height:var(--spinner_size);position:absolute;top:50%;left:50%;margin-top:calc(var(--spinner_size) / 2 * -1);margin-left:calc(var(--spinner_size) / 2 * -1);border-radius:50%;border:5px solid var(--surface30);border-right-color:var(--accent);animation:rotateSpinner 800ms linear infinite}

@keyframes rotateSpinner {
	to {transform:rotate(360deg)}
}


/* Modifiers */
.copy {max-width:40em;line-height:1.45em}
.sans {font-family:var(--sans-serif)}
.serif {font-family:serif}
.mono {font-family:monospace}
.underline {text-decoration:underline}
.italic {font-style:italic}
.light {font-weight:300}
.regular {font-weight:400}
.medium {font-weight:500}
.demi, .semibold {font-weight:600}
.strong, .bold {font-weight:700}
.uppercase {text-transform:uppercase}
.hidden {display:none}
.list-style-type-none {list-style-type:none;padding:0;margin:0}
.list-style-type-none li {margin:0}
.text-align-center {text-align:center}
.text-align-right {text-align:right}
.text-align-left {text-align:left}
.disabled,[disabled] {opacity:.3;filter:grayscale(100);cursor:default;pointer-events:none}
.inline {display:inline;margin-top:0;margin-bottom:0}
.sticky {position:sticky;top:var(--top);z-index:999}
.relative {position:relative}

.dashed {border-style:dashed}

.entry-content > :is(h1,h2,h3,h4,h5,h6) {margin-top:2em;margin-bottom:.5em}
.entry-content > :is(p,ul,ol,dl,pre,blockquote,div,.form-row) {margin:0 0 1.5em 0}
.entry-content > :is(ul,ol) {padding:0 0 0 1.5em}
.entry-content > :is(ul,ol) li {margin-bottom:1em}
.entry-content > dl dd {margin:0 0 1em 0;line-height:1.5em}
.entry-content > blockquote {padding:0 0 0 1.5em;border-left:solid 1px currentcolor}
.entry-content > :last-child {margin-bottom:0}





figure.avatar {border-radius:50%;aspect-ratio:1/1;max-width:256px;max-height:256px;width:4em;height:auto;box-sizing:border-box;border:solid 1px var(--border-strong);background:var(--btn-bg)}
figure.avatar.status {border:solid 2px transparent;background-position:-2px -2px;background-size:calc(100% + 4px) calc(100% + 4px)}
figure.avatar.status.online {background-image:linear-gradient(135deg,var(--color-toogood),var(--toogood))}
figure.avatar.status.offline {background-image:linear-gradient(135deg,var(--color-warning),var(--warning))}
figure.avatar.size-s {width:2em}
figure.avatar.size-m {width:3em}
figure.avatar.size-l {width:5em}




/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* interactive elements */

::selection {background-color:light-dark(color-mix(in srgb,var(--accent),var(--grey40) 15%),color-mix(in srgb,var(--accent),var(--grey10) 45%));color:var(--base-bg)}

:focus-visible {outline:dotted 2px var(--accent-hover);outline-offset:1px}

a[target="_blank"]::after {content:' ↗'}

a {text-decoration:none;color:var(--accent)}
a:not(.color-toogood,.color-warning,.color-gonebad):hover {text-decoration:underline;text-decoration-style:dashed;color:var(--accent-hover)}
a.hiddenlink {color:currentColor}
a.hiddenlink:is(:hover,:focus-visible) {color:inherit;text-decoration:none}
a.opacitylink {opacity:.70}
a.opacitylink:is(:hover,:focus-visible) {opacity:1}
a.underlinelink {text-decoration:underline}
a.underlinelink:is(:hover,:focus-visible) {text-decoration-style:dashed}
a.disabled,a.btn,a.btn:hover,a.chip,a.chip:hover {text-decoration-line:none !important}



/* Input fields and other form things */
input, .btn, button, select, textarea {border-radius:3px;border:solid 1px currentColor;box-sizing:border-box;font-family:inherit;font-weight:inherit;font-size:var(--font-size);color:inherit}
input, .btn, button, select {line-height:normal;padding:.25em .5em;min-height:max(24px, calc(2em + 2px));display:inline-flex;align-items:center}
input:not([type="submit"],[type="button"]), select, textarea {width:100%;max-width:480px;min-width:180px;color:var(--base-color);background-color:var(--input-bg); border-color:var(--border-strong)}

:is(input,.btn,button,select,textarea):is(:hover,:focus-visible) {border-color:var(--accent-hover);text-decoration:none}

select {appearance:none;padding-right:24px;background-position:right center;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIxOSIgdmlld0JveD0iMCAwIDI0IDE5Ij4NCiAgPHRleHQgZm9udC1zaXplPSIxNCI+PHRzcGFuIHg9IjUuOTcxIiB5PSIxNSI+4pa+PC90c3Bhbj48L3RleHQ+DQo8L3N2Zz4NCg==")}

textarea {padding:.33em .66em;line-height:1.4em}


input:is([type="radio"],[type="checkbox"]) {width:1.5em;height:1.5em;max-width:1.5em;max-height:1.5em;min-width:1.5em;min-height:1.5em;margin:0 .4em .5em 0;vertical-align:middle;cursor:pointer;font-size:inherit;background-color:var(--input-bg);border:solid 1px var(--border-strong);flex-grow:0;flex-shrink:0}
:is(:hover,:focus-visible)>input:is([type="radio"],[type="checkbox"]) {border-color:var(--base-color)}
input:is([type="checkbox"],[type="radio"]):checked {color:var(--accent)}

input[type="radio"] {appearance:none;border-radius:50%;margin:0}
input[type="radio"]:checked {border:solid 2px var(--accent)}
input[type="radio"]:checked+.option-label::before {content:'';display:block;position:absolute;width:1.5em;height:1.5em;border-radius:50%;background:var(--accent);top:0;left:0;border:solid 5px transparent;background-clip:content-box;box-sizing:border-box}

input[type="checkbox"] {appearance:none;border-radius:3px;margin:0}
input[type="checkbox"]:checked {border:solid 2px var(--accent)}
input[type="checkbox"]:checked {background-color:var(--accent);background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTYgMTQgMS41IDkuNWwyLTJMNiAxMGw3LTcgMiAyLTkgOXoiIGZpbGw9IndoaXRlIi8+PC9zdmc+")}


.option-group {display:flex;flex-wrap:wrap;gap:.75em 1.5em}
.option-group .option-element {display:flex;align-items:top;gap:.5em;position:relative;cursor:pointer}
.option-group .option-element .option-label {color:var(--text-dim)}
.option-group .option-element:is(:hover,:focus-visible) .option-label,
.option-group .option-element input:checked+.option-label {color:var(--base-color)}


input[type="checkbox"].switch {width:3em;min-width:3em;max-width:3em;height:1.5em;border-radius:.75em}
input[type="checkbox"].switch:checked {background:var(--accent);border:solid 1px var(--base-color)}
input[type="checkbox"].switch + .option-label::before {content:'';display:block;position:absolute;width:1.5em;height:1.5em;border-radius:.75em;border:solid 1px currentColor;background-color:light-dark(var(--base-bg),var(--bg30));left:0;transition:left .1s ease-out;box-sizing:border-box}
input[type="checkbox"].switch:checked + .option-label::before {left:1.5em;background-color:light-dark(var(--surface10),var(--surface40))}



input[disabled] {background-color:var(--bg20);border-color:var(--border)}
input[disabled]:is(:hover,:focus-visible) {background-color:var(--surface20);border-color:var(--border)}

input[readonly] {background-color:transparent;border-color:var(--border-strong);border-style:dashed;color:var(--text-dim)}
input[readonly]:is(:hover,:focus-visible) {background-color:var(--bg00);border-color:var(--border)}


.form-row {margin-bottom:1.5em;position:relative;display:flex;flex-direction:column;gap:.5em}
:is(.col,.row) > .form-row {margin-bottom:unset}
.form-row.submit {margin-top:2em}
.the-label {line-height:20px;font-weight:600;opacity:.9}
.field-info {display:block;font-size:var(--s-copy)}
.field-info + .form-control-wrap {margin-top:.25em}
.field-notes {display:block;font-size:var(--s-copy)}



/* errors */
.form-row.error, .form-row.live-validation:has(:invalid,:user-invalid,:out-of-range) {color:var(--color-gonebad)}
.form-row.error::before, .form-row.live-validation:has(:invalid,:user-invalid,:out-of-range)::before {content:'';position:absolute;display:block;top:.3em;bottom:0;width:2px;left:-10px;background-color:var(--gonebad)}
.form-row.error :is(input,select,textarea), .form-row.live-validation :is(input,select,textarea):is(:invalid,:user-invalid,:out-of-range) {border-color:var(--color-gonebad)}
.form-row.error :focus-visible, .form-row.live-validation:has(:invalid,:user-invalid,:out-of-range) :focus-visible {outline-color:var(--color-gonebad)}

.error-info {display:block;font-size:var(--s-copy);transition:display 1s 2s allow-discrete;transition-delay:2s}
ul.error-info {display:flex;padding:0 0 0 1em;margin:0 0 .25em 0;flex-direction:column;gap:.25em}
.form-row.error ul.error-info, .form-row.live-validation:has(:invalid,:user-invalid,:out-of-range) ul.error-info {list-style-type:'× '}
ul.error-info li {padding-left:.25em}



/* leading e trailing */
.form-control-wrap {display:block;position:relative;max-width:480px;min-width:180px}
.form-control-wrap[data-leading]::before, .form-control-wrap[data-trailing]::after {display:block;position:absolute;min-width:2em;padding:0 .5em;background-position:center;background-repeat:no-repeat;background-color:transparent;top:1px;bottom:1px;text-align:center;box-sizing:border-box;line-height:2em;font-weight:500;letter-spacing:-.01em;opacity:.6}
.form-control-wrap[data-leading]::before {content:attr(data-leading);left:0}
.form-control-wrap[data-trailing]::after {content:attr(data-trailing);right:0}
.form-control-wrap[data-trailing]:has(input[disabled])::before, .form-control-wrap[data-trailing]:has(input[disabled])::after {opacity:.5}
.form-control-wrap[data-leading] input {padding-left:2.25em}
.form-control-wrap[data-trailing] input {padding-right:2.25em}
.form-control-wrap[data-trailing="Months"] input {padding-right:58px}
.form-control-wrap[data-trailing="Mesi"] input {padding-right:42px}
.form-control-wrap[data-trailing="search"]::after {content:'';background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj48cGF0aCBkPSJNMTEgMTIgNyA3LjhhNCA0IDAgMCAxLTEuMi42IDQgNCAwIDAgMS0xLjQuMyA0LjIgNC4yIDAgMCAxLTMtMS4zIDQuMiA0LjIgMCAwIDEtMS4zLTMgNC4yIDQuMiAwIDAgMSAxLjMtMy4xIDQuMiA0LjIgMCAwIDEgMy0xLjMgNC4yIDQuMiAwIDAgMSAzLjEgMS4zIDQuMiA0LjIgMCAwIDEgMS4zIDMgNCA0IDAgMCAxLS4zIDEuNEE0IDQgMCAwIDEgNy44IDdsNC4yIDRaTTQuNCA3LjNhMi45IDIuOSAwIDAgMCAyLjItLjggMi45IDIuOSAwIDAgMCAuOC0yLjIgMi45IDIuOSAwIDAgMC0uOC0yIDIuOSAyLjkgMCAwIDAtMi4yLTEgMi45IDIuOSAwIDAgMC0yIDEgMi45IDIuOSAwIDAgMC0xIDIgMi45IDIuOSAwIDAgMCAxIDIuMiAyLjkgMi45IDAgMCAwIDIgLjhaIi8+PC9zdmc+")}
.form-control-wrap[data-trailing="date"]::after {content:'';background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMy43IiB2aWV3Qm94PSIwIDAgMTIgMTMuNyI+PHBhdGggZD0iTTEuMyAxMy43YTEuMiAxLjIgMCAwIDEtMS0uNCAxLjIgMS4yIDAgMCAxLS4zLS45VjNhMS4yIDEuMiAwIDAgMSAuNC0uOSAxLjIgMS4yIDAgMCAxIC45LS40aDEuM1YwaDEuM3YxLjdIOFYwaDEuM3YxLjdoMS4zYTEuMiAxLjIgMCAwIDEgMSAuNCAxLjIgMS4yIDAgMCAxIC4zLjl2OS40YTEuMiAxLjIgMCAwIDEtLjQgMSAxLjIgMS4yIDAgMCAxLS45LjNabTAtMS4zaDkuNFY2SDEuM1ptMC03LjdoOS40VjNIMS4zWm0wIDBaTTYgOC42YS42LjYgMCAwIDEtLjUtLjIuNi42IDAgMCAxLS4xLS41LjYuNiAwIDAgMSAuMS0uNC42LjYgMCAwIDEgLjUtLjIuNi42IDAgMCAxIC41LjIuNi42IDAgMCAxIC4xLjQuNi42IDAgMCAxLS4xLjUuNi42IDAgMCAxLS41LjJabS0yLjggMGEuNi42IDAgMCAxLS40LS4yLjYuNiAwIDAgMS0uMi0uNS42LjYgMCAwIDEgLjItLjQuNi42IDAgMCAxIC40LS4yLjYuNiAwIDAgMSAuNS4yLjYuNiAwIDAgMSAuMi40LjYuNiAwIDAgMS0uMi41LjYuNiAwIDAgMS0uNS4yWm01LjYgMGEuNi42IDAgMCAxLS41LS4yLjYuNiAwIDAgMS0uMi0uNS42LjYgMCAwIDEgLjItLjQuNi42IDAgMCAxIC41LS4yLjYuNiAwIDAgMSAuNC4yLjYuNiAwIDAgMSAuMi40LjYuNiAwIDAgMS0uMi41LjYuNiAwIDAgMS0uNC4yWk02IDExYS42LjYgMCAwIDEtLjUtLjEuNi42IDAgMCAxLS4xLS41LjYuNiAwIDAgMSAuMS0uNS42LjYgMCAwIDEgLjUtLjEuNi42IDAgMCAxIC41LjEuNi42IDAgMCAxIC4xLjUuNi42IDAgMCAxLS4xLjUuNi42IDAgMCAxLS41LjFabS0yLjggMGEuNi42IDAgMCAxLS40LS4xLjYuNiAwIDAgMS0uMi0uNS42LjYgMCAwIDEgLjItLjUuNi42IDAgMCAxIC40LS4xLjYuNiAwIDAgMSAuNS4xLjYuNiAwIDAgMSAuMi41LjYuNiAwIDAgMS0uMi41LjYuNiAwIDAgMS0uNS4xWm01LjYgMGEuNi42IDAgMCAxLS41LS4xLjYuNiAwIDAgMS0uMi0uNS42LjYgMCAwIDEgLjItLjUuNi42IDAgMCAxIC41LS4xLjYuNiAwIDAgMSAuNC4xLjYuNiAwIDAgMSAuMi41LjYuNiAwIDAgMS0uMi41LjYuNiAwIDAgMS0uNC4xWiIvPjwvc3ZnPg==")}




/* AJAX search */
.search-results {position:absolute;z-index:99;width:100%;min-height:120px;max-height:50vh;height:auto;top:calc(100% - 1px);left:0;right:0;background-color:var(--base-bg);border:solid 1px var(--border);border-radius:3px;box-shadow:0 6px 12px var(--overlay);box-sizing:border-box;overflow-y:auto}
.search-results.loading :is(.no-results, .results) {display:none}
.search-results.no-results :is(.loader, .results) {display:none}
.search-results.has-results :is(.loader, .no-results) {display:none}
.search-results .search-results-inner {position:relative}
.search-results.loading .loader {display:flex;align-items:center;justify-content:center;min-height:120px}
.search-results.loading .loader::before {content:'';width:36px;height:36px;border:4px solid var(--accent);border-bottom-color:transparent;border-radius:50%;display:block;box-sizing:border-box;animation:rotation 1s linear infinite}
@keyframes rotation {
	0% {transform:rotate(0deg)}
	100% {transform:rotate(360deg)}
}
.search-results .no-results {padding:12px}
.search-results .no-results .query-string {font-weight:600}
.search-results .search-result-item {padding:12px}
.search-results .search-result-item+.search-result-item {border-top:solid 1px var(--border)}
.search-results .search-result-item .title {font-weight:600}
.search-results .search-result-item a {white-space:nowrap}
.search-results .search-result-item .edit {margin-right:.5em}



/* BTN */
.riga-maledetta {color:aliceblue}
input:is([type="submit"],[type="button"]), .btn, button:not(.not-btn) {position:relative;background-color:var(--btn-bg);min-width:24px;min-height:max(24px, calc(2em + 2px));padding:.25em .75em;line-height:normal;display:inline-flex;align-items:center;justify-content:center;gap:.3em;text-decoration:none;text-align:center;cursor:pointer; color:var(--base-color); border-color:var(--border-strong)}
input:is([type="submit"],[type="button"]):is(:hover,:focus-visible), .btn:hover, button:not(.not-btn,.chip):is(:hover,:focus-visible) {background-color:var(--btn-bg-hover);color:var(--accent-hover);text-decoration:none}

.btn.s-btn {min-height:24px;padding:0 .5em}
.btn.m-btn {min-height:34px;padding:0 .75em}
.btn.l-btn {min-height:48px;padding:.75em 1.5em}

.btn.btn-wide {width:100%}

.btn.solid {background-color:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.solid:is(:hover,:focus-visible) {background-color:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}

.btn.tonal {background-color:var(--surface10);border-color:var(--accent);color:var(--accent)}
.btn.tonal:is(:hover,:focus-visible) {background-color:var(--surface30);border-color:var(--accent);color:var(--accent)}

.btn.outline {background-color:transparent;border-color:var(--border-strong);color:currentColor}
.btn.outline:is(:hover,:focus-visible) {background-color:transparent;border-color:var(--accent);color:var(--accent)}

.btn.contrast {background-color:var(--base-color);border-color:var(--base-color);color:var(--base-bg)}
.btn.contrast:is(:hover,:focus-visible) {background-color:var(--base-bg);border-color:var(--base-color);color:var(--base-color)}

.btn.ghost {appearance:none;background-color:transparent;color:color-mix(in srgb,currentcolor,transparent 20%);border-color:transparent}
.btn.ghost:is(:hover,:focus-visible) {appearance:none;background-color:color-mix(in srgb,var(--btn-bg),transparent 40%);color:currentColor;border-color:var(--border-subtle)}



.btn.toogood {background-color:color-mix(var(--toogood-bg),var(--base-bg) 60%);border-color:var(--toogood);color:var(--color-toogood)}
.btn.toogood:hover {background-color:color-mix(var(--toogood-bg),var(--base-bg) 80%);border-color:color-mix(var(--toogood),var(--base-bg) 15%);color:var(--color-toogood)}

.btn.solid.toogood {background-color:var(--toogood);border-color:var(--toogood);color:var(--on-toogood)}
.btn.solid.toogood:hover {background-color:color-mix(var(--toogood),var(--base-bg) 15%);border-color:color-mix(var(--toogood),var(--base-bg) 15%);color:var(--on-toogood)}

.btn.tonal.toogood {background-color:var(--toogood-bg);border-color:var(--toogood);color:var(--on-toogood-bg)}
.btn.tonal.toogood:hover {background-color:color-mix(var(--toogood-bg),var(--base-bg) 80%);border-color:var(--toogood);color:var(--on-toogood-bg)}

.btn.outline.toogood {background-color:transparent;border-color:var(--toogood);color:var(--color-toogood)}
.btn.outline.toogood:is(:hover,:focus-visible) {background-color:color-mix(var(--toogood-bg),var(--base-bg) 80%);border-color:var(--color-toogood);color:var(--color-toogood)}


.btn.warning {background-color:color-mix(var(--warning-bg),var(--base-bg) 60%);border-color:var(--warning);color:var(--color-warning)}
.btn.warning:hover {background-color:color-mix(var(--warning-bg),var(--base-bg) 80%);border-color:color-mix(var(--warning),var(--base-bg) 15%);color:var(--color-warning)}

.btn.solid.warning {background-color:var(--warning);border-color:var(--warning);color:var(--on-warning)}
.btn.solid.warning:hover {background-color:color-mix(var(--warning),var(--base-bg) 15%);border-color:color-mix(var(--warning),var(--base-bg) 15%);color:var(--on-warning)}

.btn.tonal.warning {background-color:var(--warning-bg);border-color:var(--warning);color:var(--on-warning-bg)}
.btn.tonal.warning:hover {background-color:color-mix(var(--warning-bg),var(--base-bg) 80%);border-color:var(--warning);color:var(--on-warning-bg)}

.btn.outline.warning {background-color:transparent;border-color:var(--warning);color:var(--color-warning)}
.btn.outline.warning:is(:hover,:focus-visible) {background-color:color-mix(var(--warning-bg),var(--base-bg) 80%);border-color:var(--color-warning);color:var(--color-warning)}


.btn.gonebad {background-color:color-mix(var(--gonebad-bg),var(--base-bg) 60%);border-color:var(--gonebad);color:var(--color-gonebad)}
.btn.gonebad:hover {background-color:color-mix(var(--gonebad-bg),var(--base-bg) 80%);border-color:color-mix(var(--gonebad),var(--base-bg) 15%);color:var(--color-gonebad)}

.btn.solid.gonebad {background-color:var(--gonebad);border-color:var(--gonebad);color:var(--on-gonebad)}
.btn.solid.gonebad:hover {background-color:color-mix(var(--gonebad),var(--base-bg) 15%);border-color:color-mix(var(--gonebad),var(--base-bg) 15%);color:var(--on-gonebad)}

.btn.tonal.gonebad {background-color:var(--gonebad-bg);border-color:var(--gonebad);color:var(--on-gonebad-bg)}
.btn.tonal.gonebad:hover {background-color:color-mix(var(--gonebad-bg),var(--base-bg) 80%);border-color:var(--gonebad);color:var(--on-gonebad-bg)}

.btn.outline.gonebad {background-color:transparent;border-color:var(--gonebad);color:var(--color-gonebad)}
.btn.outline.gonebad:is(:hover,:focus-visible) {background-color:color-mix(var(--gonebad-bg),var(--base-bg) 80%);border-color:var(--color-gonebad);color:var(--color-gonebad)}



.btn.icon svg.svg-icon {fill:currentColor;user-select:none;height:1.5em;width:auto}

.btn.icon.icon-only {aspect-ratio:1/1;padding:0;width:calc(2em + 2px);height:calc(2em + 2px);min-width:calc(2em + 2px);min-height:calc(2em + 2px)}
.btn.icon.icon-only.s-btn {padding:0;;min-width:24px;min-height:24px;height:auto;width:auto}
.btn.icon.icon-only.s-btn svg.svg-icon {height:18px}
.btn.icon.icon-only.m-btn {padding:0;;min-width:34px;min-height:34px}
.btn.icon.icon-only.l-btn {padding:0;;min-width:48px;min-height:48px}


.btn.double-icon-switch {padding:0;width:calc(4em + 2px);gap:.1em}


.btn.rounded {border-radius:calc(1em + 1px)}
.btn.l-btn.rounded {border-radius:max(24px, calc(1em + 1px))}


.not-btn {appearance:none;padding:0;border-radius:0;font-family:inherit;font-size:var(--font-size);margin:0;border:unset;background:transparent}


.btn-group {display:flex;flex-wrap:wrap;align-items:center;gap:max(6px,.5em)}
.btn-group.segmented-buttons {gap:0}

.btn-group.segmented-buttons > .btn:first-child {border-top-right-radius:0;border-bottom-right-radius:0}
.btn-group.segmented-buttons > .btn:not(:first-child):not(:last-child) {border-radius:0;margin-left:-1px}
.btn-group.segmented-buttons > .btn:last-child {border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}

.btn-group.segmented-buttons > .btn {color:color-mix(in srgb,currentcolor,transparent 25%)}
.btn-group.segmented-buttons > .btn.active {background-color:var(--btn-bg-hover);color:currentColor}


/* Status chips */
.chip {appearance:none;font-size:var(--l-label);--font-size:var(--l-label);letter-spacing:.025em;border-radius:3px;background-color:var(--base-bg);border:solid 1px var(--border);font-weight:500;letter-spacing:.045em;line-height:normal;padding:.25em .75em;height:2em;min-height:max(24px,calc(2em + 2px));box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;position:relative}

.chips-group {display:flex;flex-wrap:wrap;gap:.5em}

.chip.status.closed      {background-color:var(--bg10);border-color:var(--border-subtle);color:var(--text-dim)}
.chip.status.active      {background-color:var(--toogood-bg);border-color:var(--on-toogood-bg);color:var(--on-toogood-bg)}
.chip.status.draft       {background-color:var(--base-bg);border-color:var(--border-strong);color:var(--text-dim);border-style:dashed}
.chip.status.ready       {background-color:var(--base-bg);border-color:var(--toogood);color:var(--color-toogood);border-style:dashed}
.chip.status.development {background-color:var(--base-bg);border-color:var(--warning);color:var(--warning);border-style:dashed}





/* Min Touchtarget SOLO per elementi interattivi */
:is(a,button,input[type="button"],input[type="submit"]):is(.btn,.chip)::before {content:'';display:block;position:absolute;width:100%;min-width:30px;height:100%;min-height:30px;background:transparent;border:none;opacity:0;top:50%;left:50%;transform:translate(-50%,-50%)}
:is(a,button,input[type="button"],input[type="submit"]):is(.btn,.chip).touchtarget-aaa::before {min-height:48px;min-width:48px}
:is(a,button,input[type="button"],input[type="submit"]):is(.btn,.chip).touchtarget-visible::before {background-color:red;opacity:.25}



/* BTN related components & use cases; specialized BTNs & groups */


/* user-badge */
.user-badge {display:inline-flex;align-items:center;justify-content:flex-start;gap:.5em;padding:.25em 1em .25em .75em;}
.user-badge > .col {justify-content:flex-start;align-items:flex-start;gap:.125em}


/* pagination */

.pagination {}
.pagination-items {display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:.5em}
.pagination-item {flex-shrink:0;min-width:max(24px,calc(2em + 2px));min-height:max(24px,calc(2em + 2px))}
.pagination-item:not(.prev,.next){padding-left:0;padding-right:0}
.pagination-item.prev:not(.icon)::before {content:'←';margin-right:.25em}
.pagination-item.next:not(.icon)::after {content:'→';margin-left:.25em}




/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */



/* Accordions */


.accordion {position:relative}
.accordion-trigger {cursor:pointer}
.accordion-content {overflow:hidden;max-height:0;transition:max-height .2s ease-in-out;margin:0}

.accordion-trigger .label {display:inline-flex;align-items:center}

.accordion:not(.active) .accordion-trigger .label.active,
.details:not([open]) summary .label.active {display:none}
.accordion.active .accordion-trigger .label:not(.active),
.details[open] summary .label:not(.active){display:none}

.label-accordion {display:block;margin-top:5px;font-style:italic;text-transform:lowercase}

details:is(.accordion,.tree-view) summary {list-style:none}
details:is(.accordion,.tree-view) summary::-webkit-details-marker {display:none}

summary {cursor:pointer}




/* .tree-view */
.tree-view {position:relative}
.tree-view > .tree-view {padding-left:2.25em}
.tree-view[open]:has(> .tree-view)::before {position:absolute;display:block;content:'';top:1.8em;left:.75em;bottom:calc(var(--last-child-height) - 1em);border-left:dotted 1px currentColor}

.tree-view :is(summary,.fake-summary) {position:relative;display:flex;align-items:center;min-height:2em}
.tree-view :is(summary,.fake-summary)::before {display:inline-flex;position:relative;content:'+';width:1.5em;height:1.5em;justify-content:center;align-items:center;border:solid 1px var(--border);border-radius:3px;margin-right:.75em;line-height:0}
.tree-view summary:is(:hover,:focus-visible)::before {border-color:var(--border-strong);background-color:var(--surface00)}
.tree-view[open] > summary::before {content:'-'}

.tree-view > .tree-view[open]::before  {left:3em}
.tree-view > .tree-view > :is(summary,.fake-summary)::after {position:absolute;display:block;content:'';top:50%;left:-1.5em;width:1.5em;transform:translateY(-50%);border-top:dotted 1px currentColor}

.tree-view > summary + * {padding-left:2.5em}
.tree-view > .fake-summary + * {padding-left:1.5em}
.tree-view > :not(summary,.fake-summary):last-child {margin-bottom:1.5em}

.tree-view .fake-summary::before {content:'';width:.5em;height:.5em;background:var(--btn-bg)}





/* .tabs */
.tabs {position:relative;--tab-width:120px}
.tabs .tabs-navigation {box-sizing:border-box;min-height:max(36px,calc(2em + 2px));padding:.5em 1em;border-bottom:solid 1px var(--border);pointer-events:none}
.tabs .tabs-navigation > * {position:absolute;opacity:0;width:0;overflow:hidden}
.tabs .tabs-inner {display:flex;justify-content:flex-start;align-items:flex-start;gap:0;flex-wrap:nowrap;padding:1em 0}

.tabs summary {position:absolute;display:flex;justify-content:flex-start;align-items:center;box-sizing:border-box;min-width:var(--tab-width);top:0;min-height:max(36px,calc(2em + 2px));padding:.5em 1em;border-bottom:solid 1px var(--border);color:var(--text-dim);background-color:var(--surface00);overflow:hidden}
.tabs summary::before {position:absolute;display:block;content:'';bottom:0;left:0;right:0;height:2px;background:var(--accent);transform:translateX(-100%);transition:ease-out transform .15s}

.tabs summary:is(:hover,:focus-visible) {color:var(--base-color);border-bottom-color:var(--border-strong);background-color:var(--surface10)}
.tabs summary:is(:hover,:focus-visible)::before {transform:translateX(-33%)}

.tabs-inner :nth-child(2) summary {left:calc(1 * var(--tab-width) + 1px)}
.tabs-inner :nth-child(3) summary {left:calc(2 * var(--tab-width) + 1px)}
.tabs-inner :nth-child(4) summary {left:calc(3 * var(--tab-width) + 1px)}
.tabs-inner :nth-child(5) summary {left:calc(4 * var(--tab-width) + 1px)}
.tabs-inner :nth-child(6) summary {left:calc(5 * var(--tab-width) + 1px)}
.tabs-inner :nth-child(7) summary {left:calc(6 * var(--tab-width) + 1px)}
.tabs-inner :nth-child(8) summary {left:calc(7 * var(--tab-width) + 1px)}
.tabs-inner :nth-child(9) summary {left:calc(8 * var(--tab-width) + 1px)}

.tabs details[open] summary {pointer-events:none;border-bottom-color:var(--accent);background-color:light-dark(var(--surface20),var(--surface30));color:var(--base-color)}
.tabs details[open] summary::before {transform:translateX(0)}
.tabs details[open] {width:100%}

.card-body > .tabs .tabs-navigation {margin:0 -1.5em}
.card.dense .card-body > .tabs .tabs-navigation {margin:0 -1em}

.tabs.equal {--tab-width:calc(100% / var(--tabs-count))}
.tabs.equal summary {justify-content:center}
.tabs.equal summary::before {right:unset;left:50%;width:100%;transform:translateX(-50%) scaleX(0)}
.tabs.equal summary:is(:hover,:focus-visible)::before {transform:translateX(-50%) scaleX(.5)}

.tabs.equal .tabs-inner :nth-child(2) summary {left:calc(1 * var(--tab-width) + 1px)}
.tabs.equal .tabs-inner :nth-child(3) summary {left:calc(2 * var(--tab-width) + 1px)}
.tabs.equal .tabs-inner :nth-child(4) summary {left:calc(3 * var(--tab-width) + 1px)}
.tabs.equal .tabs-inner :nth-child(5) summary {left:calc(4 * var(--tab-width) + 1px)}
.tabs.equal .tabs-inner :nth-child(6) summary {left:calc(5 * var(--tab-width) + 1px)}
.tabs.equal .tabs-inner :nth-child(7) summary {left:calc(6 * var(--tab-width) + 1px)}
.tabs.equal .tabs-inner :nth-child(8) summary {left:calc(7 * var(--tab-width) + 1px)}
.tabs.equal .tabs-inner :nth-child(9) summary {left:calc(8 * var(--tab-width) + 1px)}

.tabs.equal details[open] summary::before {transform:translateX(-50%) scaleX(1)}






/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */


/* Pannelli a scomparsa */
/* <dialog> e [popover] */

.panel {box-sizing:border-box;position:fixed;background:var(--base-bg);color:var(--base-color);border:none;margin:0;padding:1em;width:100%;max-width:480px;min-width:200px;min-height:48px;max-height:100%;opacity:0;transition:translate 0.4s ease-out,opacity 0.4s ease-out,display 0.4s allow-discrete,overlay 0.4s allow-discrete;z-index:999;overflow:hidden}

:not(dialog).panel:not([popover]) {display:none;visibility:hidden}
:not(dialog).panel:not([popover]).is-visible {display:block;visibility:visible}

.panel[open], .panel:popover-open, .panel.is-visible {opacity:1}
@starting-style {
	.panel[open], .panel:popover-open, .panel.is-visible {opacity:0}
}

/* Helper Classi Dimensione */
.panel.fullwidth {max-width:100%;width:100%;left:0;right:0}
.panel.fullheight {height:100%;max-height:100%;top:0;bottom:0}


/* POSIZIONAMENTO BASE */

.panel.left {top:0;bottom:auto;left:0;right:auto;translate:-100% 0}
.panel.left[open], .panel.left:popover-open, .panel.left.is-visible {translate:0 0}
@starting-style {
	.panel.left[open], .panel.left:popover-open, .panel.left.is-visible {translate:-100% 0}
}

.panel.right {top:0;bottom:auto;right:0;left:auto;translate:100% 0}
.panel.right[open], .panel.right:popover-open, .panel.right.is-visible {translate:0 0}
@starting-style {
	.panel.right[open], .panel.right:popover-open, .panel.right.is-visible {translate:100% 0}
}

.panel.top {top:0;bottom:auto;left:0;right:0;margin-inline:auto;translate:0 -100%}
.panel.top[open], .panel.top:popover-open, .panel.top.is-visible {translate:0 0}
@starting-style {
	.panel.top[open], .panel.top:popover-open, .panel.top.is-visible {translate:0 -100%}
}

.panel.bottom {bottom:0;top:auto;left:0;right:0;margin-inline:auto;translate:0 100%}
.panel.bottom[open], .panel.bottom:popover-open, .panel.bottom.is-visible {translate:0 0}
@starting-style {
	.panel.bottom[open], .panel.bottom:popover-open, .panel.bottom.is-visible {translate:0 100%}
}

.panel.center {top:50%;left:50%;bottom:auto;right:auto;translate:-50% -45%}
.panel.center[open], .panel.center:popover-open, .panel.center.is-visible {translate:-50% -50%}
@starting-style {
	.panel.center[open], .panel.center:popover-open, .panel.center.is-visible {translate:-50% -45%}
}


/* COMBINAZIONI EXTRA (Overrides) */

.panel.left.center {top:50%;bottom:auto;left:0;right:auto;translate:-100% -50%}
.panel.left.center[open], .panel.left.center:popover-open, .panel.left.center.is-visible {translate:0 -50%}
@starting-style {
	.panel.left.center[open], .panel.left.center:popover-open, .panel.left.center.is-visible {translate:-100% -50%}
}

.panel.left.bottom {top:auto;bottom:0;left:0;right:auto;margin-inline:0;translate:-100% 0}
.panel.left.bottom[open], .panel.left.bottom:popover-open, .panel.left.bottom.is-visible {translate:0 0}
@starting-style {
	.panel.left.bottom[open], .panel.left.bottom:popover-open, .panel.left.bottom.is-visible {translate:-100% 0}
}

.panel.right.center {top:50%;bottom:auto;right:0;left:auto;translate:100% -50%}
.panel.right.center[open], .panel.right.center:popover-open, .panel.right.center.is-visible {translate:0 -50%}
@starting-style {
	.panel.right.center[open], .panel.right.center:popover-open, .panel.right.center.is-visible {translate:100% -50%}
}

.panel.right.bottom {top:auto;bottom:0;right:0;left:auto;margin-inline:0;translate:100% 0}
.panel.right.bottom[open], .panel.right.bottom:popover-open, .panel.right.bottom.is-visible {translate:0 0}
@starting-style {
	.panel.right.bottom[open], .panel.right.bottom:popover-open, .panel.right.bottom.is-visible {translate:100% 0}
}


/* BACKDROP */

.panel.backdrop::backdrop {background-color:var(--black,#000);opacity:0;transition:opacity 0.4s ease-out,display 0.4s allow-discrete,overlay 0.4s allow-discrete;mix-blend-mode:darken}
.panel.backdrop[open]::backdrop, .panel.backdrop:popover-open::backdrop {opacity:0.5}
@starting-style {
	.panel.backdrop[open]::backdrop, .panel.backdrop:popover-open::backdrop {opacity:0}
}
dialog.panel:not(.backdrop)::backdrop {background:transparent;backdrop-filter:none}


/* STILI EXTRA */
.panel:has( > .panel-inner ) {padding:0}
.panel.box-shadow {box-shadow:0 6px 24px 0 rgba(0,0,0,.16)}
.panel.center.rounded {border-radius:16px}
.panel.top.rounded {border-bottom-left-radius:16px;border-bottom-right-radius:16px}
.panel.right.rounded {border-top-left-radius:16px;border-bottom-left-radius:16px}
.panel.bottom.rounded {border-top-left-radius:16px;border-top-right-radius:16px}
.panel.left.rounded {border-top-right-radius:16px;border-bottom-right-radius:16px}


/* FLOATING */
:root {--floating-gap: 8px}
.panel.floating {border-radius:6px}
.panel.floating.top{top:var(--floating-gap)}
.panel.floating.right {top:var(--floating-gap);right:var(--floating-gap)}
.panel.floating.right.center {top:50%}
.panel.floating.right.bottom {top:auto}
.panel.floating.bottom {bottom:var(--floating-gap)}
.panel.floating.left {top:var(--floating-gap);left:var(--floating-gap)}
.panel.floating.left.center {top:50%}
.panel.floating.left.bottom {top:auto}

/* Gestione Floating + Fullwidth/Fullheight */
.panel.fullwidth.floating {max-width:unset;width:auto;left:var(--floating-gap);right:var(--floating-gap)}
.panel.fullheight.floating {max-height:unset;height:auto;top:var(--floating-gap);bottom:var(--floating-gap)}


@media (min-width: 960px) {
	:root {--floating-gap:16px}
	.panel {min-width:360px}
	
	.panel.floating {border-radius:12px}

}



/* Pannelli specializzati */

.panel.sidebar {min-height:50vh}
.sidebar .panel-inner {position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%;background-color:var(--surface00)}
.sidebar .panel-top {height:100%}
.sidebar .panel-header {position:sticky; display:flex;justify-content:space-between;gap:6px;align-items:center;background-color:var(--surface10);min-height:48px;padding:16px 12px 16px 18px}
.sidebar .panel-header .panel-title {font-size:var(--s-title)}
.sidebar .panel-header .panel-subtitle {font-size:var(--s-copy)}
.sidebar .panel-header .panel-title + .panel-subtitle {margin-top:.5em}
.sidebar .panel-body {padding:18px;height:100%;overflow:auto}
.sidebar .panel-footer {padding:18px 18px;border-top:solid 1px var(--border);background-color:var(--surface00)}
.sidebar .panel-footer .panel-actions {display:flex;gap:.5em;align-items:center}


.panel.snackbar {background-color:var(--inverse-bg30);color:var(--base-bg);border-radius:6px;max-width:320px;max-height:240px;min-width:200px;min-height:36px}
.panel.snackbar.top {top:48px}
.panel.snackbar.right {top:48px;right:48px}
.panel.snackbar.right.center {top:50%}
.panel.snackbar.right.bottom {top:auto}
.panel.snackbar.bottom {bottom:48px}
.panel.snackbar.left {top:48px;left:48px}
.panel.snackbar.left.center {top:50%}
.panel.snackbar.left.bottom {top:auto}

.snackbar .panel-inner {position:relative;display:flex;gap:12px;justify-content:space-between;align-items:center;min-height:36px;overflow:hidden}
.snackbar .snackbar-text {padding:8px 12px}







/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* SITE HEADER & MAIN NAVIGATION */

#site-header .header-inner {padding:0 1em 0 .75em;min-height:4em;display:flex;align-items:stretch;border-bottom:solid 1px var(--border-subtle);box-sizing:border-box;background-color:light-dark(#fff,var(--bg10))}
#site-header.floating {margin:1em}
#site-header.floating .header-inner {border-radius:8px;max-width:var(--container);border:solid 1px var(--border-subtle)}

#site-header.admin-bar .header-inner {min-height:2em}

#site-header a {color:var(--base-color);text-decoration:none}
#site-header a:hover {color:var(--accent);text-decoration:underline;text-decoration-style:dashed}
#site-header .current-menu-item>a, #site-header a.current-language {text-decoration:underline}

.top-menu {display:flex;align-items:stretch}
.inline-menu {align-items:stretch;gap:2px}
.menu-item {display:flex;min-height:1.5em;padding:.25em 1em;align-items:center}

.inline-menu > .menu-item > :is(a,button) {position:relative;overflow:hidden;border-radius:0}
.inline-menu > .menu-item > :is(a,button)::before {content:'';position:absolute;display:block;bottom:0;left:0;width:100%;transform:translateX(-100%);height:2px;background-color:var(--accent);transition:transform .15s ease-in-out}

.inline-menu:not(.floating-style) > .menu-item.current-menu-item > :is(a,button),
.inline-menu:not(.floating-style) > .menu-item > :is(a,button):is(:hover,:focus),
.inline-menu:not(.floating-style) > .menu-item:has(:hover,:focus,:focus-within) > :is(a,button) {background-color:light-dark(var(--surface00),var(--bg30))}

.inline-menu > .menu-item.current-menu-item > :is(a,button)::before,
.inline-menu > .menu-item > :is(a,button):is(:hover,:focus)::before,
.inline-menu > .menu-item:has(:hover,:focus,:focus-within) > :is(a,button)::before {transform:translateX(0)}

.inline-menu > .menu-item.has-submenu {position:relative;padding:0;align-items:stretch}
.inline-menu > .menu-item.has-submenu > .submenu-trigger {padding:.25em 2em .25em 1em}
.inline-menu > .menu-item > .submenu-trigger::after {content:' ▾';font-size:1.15em;padding-left:.2em;display:inline-block}

.submenu {position:absolute;visibility:hidden;opacity:0;top:100%;left:-1px;padding:.75em 0;display:flex;flex-direction:column;gap:.25em;background-color:light-dark(#fff,var(--bg20));border:solid 1px var(--border-subtle);min-width:max(100%,180px);width:100%;width:fit-content;max-width:320px;z-index:99;transition:opacity .15s ease-out,transform .15s ease-in-out;box-sizing:border-box}


.menu-item > .submenu-trigger:is(:hover,:focus) + .submenu,
.submenu:is(:hover,:focus-within),
.menu-item > .submenu-trigger[aria-expanded="true"] + .submenu {visibility:visible;opacity:1}


.submenu::after {position:absolute;display:block;content:'';top:-1em;left:0;right:0;height:1.5em;background:transparent}

/* floating style with top arrow */
.inline-menu.floating-style > .menu-item > :is(a,button)::before {height:auto;width:auto;inset:.5em;border-radius:4px;background-color:var(--accent);opacity:0;transform:none}
.inline-menu.floating-style > .menu-item.current-menu-item > :is(a,button)::before,
.inline-menu.floating-style > .menu-item > :is(a,button):is(:hover,:focus)::before,
.inline-menu.floating-style > .menu-item:has(:hover,:focus,:focus-within) > :is(a,button)::before {opacity:.05}

.inline-menu.floating-style > .menu-item.has-submenu > .submenu-trigger {padding:.25em 1.5em}

.inline-menu.floating-style .submenu {top:2em;left:50%;transform:translateX(-50%) translateY(2em);border-radius:8px}
.inline-menu.floating-style .submenu::before {position:absolute;display:block;content:'';top:-9px;width:16px;height:16px;background-color:light-dark(#fff,var(--bg20));border-top:solid 1px var(--border-subtle);border-left:solid 1px var(--border-subtle);transform:translateX(-50%) rotate(45deg);left:50%}
.inline-menu.floating-style .menu-item > .submenu-trigger:is(:hover,:focus) + .submenu,
.inline-menu.floating-style .submenu:is(:hover,:focus-within),
.inline-menu.floating-style .menu-item > .submenu-trigger[aria-expanded="true"] + .submenu {transform:translateX(-50%) translateY(1.3em)}


.submenu a {display:block;width:100%}
.submenu .menu-item {padding:.5em 1em;box-sizing:border-box;min-width:180px;width:100%;width:fit-content;max-width:320px}
.submenu > hr {margin:.5em 0;border-color:var(--border-subtle)}

.inline-menu > hr {margin:0 .5em; align-self:stretch;width:1px;background-color:var(--border-subtle)}


#site-footer {margin-top:5em}
#site-footer .footer-inner {padding:1em 0 3em 0}





/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */




/* CARDS */

.card {display:flex;flex-direction:column;border-radius:12px;border:solid 1px var(--border-subtle);background-color:light-dark(white,var(--bg10));justify-self:start;align-self:start;min-width:180px;width:100%;max-width:640px;min-height:96px;box-sizing:border-box;overflow-x:auto}
.card-inner {display:flex;flex-direction:column}
.card-wrap.row {justify-content:flex-start}
.card-wrap.equal-heights .card {height:100%}
.card-wrap.grid .card {min-width:unset}

.card:has( .card-thumb) {overflow:unset}
.card .card-thumb {margin:-1px;overflow:hidden;border-radius:12px;position:relative}
.card .card-thumb figcaption {position:absolute;inset:auto 0 0 0;width:100%;box-sizing:border-box;background-color:color-mix(in srgb,var(--base-bg),transparent 8%);backdrop-filter:blur(12px);line-height:normal;padding:.5em .75em}
.card .card-thumb .chips {position:absolute;inset:1em 1em auto 1em}


.card-header {padding:1.5em 1.5em .5em 1.5em;display:flex;flex-direction:column;gap:.5em}
.card-header:has( .card-subtitle ) {padding-bottom:1em}
.card-body {padding:.5em 1.5em 1.5em 1.5em;flex-grow:2}
.card-actions {padding:1.5em;display:flex;align-items:center;gap:1em}
.card-footer {padding:1.5em; border-top:dashed 1px var(--border);font-size:var(--s-copy);--font-size:var(--s-copy)}

.card.dense .card-header {padding:1em 1em .25em 1em}
.card.dense .card-header:has( .card-subtitle ) {padding-bottom:1em}
.card.dense .card-body {padding:.25em 1em 1.25em 1em}
.card.dense .card-actions {padding:1em}
.card.dense .card-footer {padding:1em}


.card-wrap.list {display:flex;flex-direction:column}

.card-wrap.list > .card, .card.list-item {flex-direction:row;gap:8px;align-items:stretch}
.card-wrap.list > .card .card-inner, .card.list-item .card-inner {flex-grow:1;width:100%;flex-direction:row;align-items:center;gap:12px;justify-content:space-between}

.card-wrap.list > .card .card-thumb, .card.list-item .card-thumb {max-width:144px;width:100%;min-width:48px;min-height:100%;height:auto}
.card-wrap.list > .card .card-thumb img , .card.list-item .card-thumb img {height:100%}

.card-wrap.list > .card .card-bottom , .card.list-item .card-bottom {display:flex;align-items:center;justify-content:flex-end}
.card-wrap.list > .card .card-actions:has(> .ghost:last-child ), .card.list-item .card-actions:has( .ghost:last-child) {padding:0 6px}
.card-wrap.list > .card .card-footer , .card.list-item .card-footer {border-top:none}

@media (max-width:959px) {
	
	.card.li-on-mobile {flex-direction:row;gap:8px;align-items:stretch}
	.card.li-on-mobile .card-inner {flex-grow:1;width:100%;flex-direction:row;align-items:center;gap:12px;justify-content:space-between}

	.card.li-on-mobile .card-thumb {max-width:144px;width:100%;min-width:48px;min-height:100%;height:auto}
	.card.li-on-mobile .card-thumb img {height:100%}

	.card.li-on-mobile .card-bottom {display:flex;align-items:center;justify-content:flex-end}
	.card.li-on-mobile .card-actions:has( .ghost:last-child) {padding:0 6px}
	.card.li-on-mobile .card-footer {border-top:none}
	
}

/* stili extra */

.card.no-border > .card, .card.no-border {border-width:0}
.card.no-border > .card .card-thumb, .card.no-border .card-thumb {margin:unset}

.card.fullwidth {max-width:100%;width:100%;min-width:100%}




/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* INDEX // LOGIN */

.login {height:100vh}
.login .full-background {background-color:var(--accent);background-size:cover;background-repeat:no-repeat;display:flex;height:100%;box-sizing:border-box}
.login .login-sidebar {width:330px;padding:40px;display:flex;flex-direction:column;justify-content:space-between;background:var(--base-bg)}
.login header {margin-bottom:80px}
.login header .logo-group {margin-bottom:28px}
.login header h1 {margin-bottom:2px}
.login .footer-notes {display:flex;flex-direction:column;gap:9px}


/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* SINGLE PAGE COMMON STYLES */
/* contract, user, categories */

/* Page header */
.page-header {margin-top:48px;margin-bottom:18px}
.page-header .title-group.row {align-items:baseline}
.page-header .title-group.row .btn {position:relative;bottom:5px}
.page-header .title-group.row .status-chip {position:relative;bottom:2px}
.page-header .page-header-actions {align-items:flex-end}
.page-header .page-header-actions .btn {position:relative;bottom:5px}

	
	
/* filters row  */
.filters.row :is(input, select, .form-control-wrap) {max-width:180px}
.filters.row button {flex-shrink:0}
@media (min-width:1600px) {
	.filters.row :is(input, select, .form-control-wrap) {max-width:220px;width:220px}
}

	
	
	

/* Sorting Table & general tables styles */
.list-view {background-color:light-dark(var(--base-bg),var(--bg00))}
.list-view-header {margin-bottom:.5em}
.list-view td {vertical-align:top}
.list-view tbody tr:not(:last-child) td {border-bottom:none}
.list-view tr:nth-child(odd) td {background-color:light-dark(var(--bg00),var(--bg10))}
.list-view.highlight-rows-on-hover tbody tr:has(:hover) :is(td, th) {background-color:light-dark(var(--surface10),var(--bg30))}
.list-view + .list-view-navigation {margin-top:.5em}
.sort-toggle:is(.sort-asc, .sort-desc) {opacity:1;color:var(--accent)}
.sort-toggle::after {content:'▴';opacity:.6;margin-left:.25em}
.sort-toggle:hover::after {opacity:1}
.sort-toggle:is(.sort-asc, .sort-desc)::after {opacity:1}
.sort-toggle.sort-asc::after {content:'▾'}

	

	
/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* CREATE or EDIT ITEMS */

.edit-item-form {background-color:light-dark(#fff,var(--bg10));border:solid 1px var(--border);border-radius:3px}
.edit-item-form .form-body {display:grid;grid-template-columns:1fr 1fr 1fr}
.edit-item-form .form-body>.col {padding:40px 36px}
.edit-item-form .form-body>.col:not(:last-child) {border-right:dashed 1px var(--border)}
.edit-item-form .form-footer {border-top:solid 1px var(--border);padding:34px 36px}
.row.form-body:has(.spinner:not(.hidden)) {position:absolute;top:0;left:0;height:100%;width:100%;background-color:var(--surface00);opacity:50%;z-index:100000;pointer-events:none;cursor:wait}