/* --- Font auto-ospitati ------------------------------------------------
   Prima arrivavano da fonts.googleapis.com con un <link> bloccante: il
   browser doveva fare DNS+TLS verso due domini esterni (googleapis, poi
   gstatic) prima di disegnare una sola riga di testo. Ora sono file
   nostri, serviti da WhiteNoise con cache lunga e nome con fingerprint.

   Subset "latin", che copre tutto l'italiano. Per rigenerarli basta
   scaricare i .woff2 elencati da:
   https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap
   (con uno User-Agent da browser moderno, altrimenti risponde in .ttf).
   Il Sans latin oggi e' un font variabile: un solo file copre 400-700. */

@font-face{
  font-family:'IBM Plex Sans';

  font-style:normal;

  font-weight:400 700;

  font-display:swap;

  src:url("../fonts/ibm-plex-sans.b2c9031d9fd6.woff2") format('woff2')
}

@font-face{
  font-family:'IBM Plex Mono';

  font-style:normal;

  font-weight:400;

  font-display:swap;

  src:url("../fonts/ibm-plex-mono-400.79936b18df9f.woff2") format('woff2')
}

@font-face{
  font-family:'IBM Plex Mono';

  font-style:normal;

  font-weight:500;

  font-display:swap;

  src:url("../fonts/ibm-plex-mono-500.b1c8a895f5fd.woff2") format('woff2')
}

@font-face{
  font-family:'IBM Plex Mono';

  font-style:normal;

  font-weight:600;

  font-display:swap;

  src:url("../fonts/ibm-plex-mono-600.5a2ce7798732.woff2") format('woff2')
}

*, ::before, ::after{
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}

::backdrop{
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: IBM Plex Sans, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: IBM Plex Mono, monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

/* --- Modalita' notte: le due palette -----------------------------------
     I token di tailwind.config.js sono rgb(var(--x) / alfa), quindi qui
     stanno i CANALI separati da spazi, non gli hex.

     Tre stati, come li scrive il bottone del tema (base.html):
       nessuna classe su <html> -> segue il sistema
       .tema-chiaro             -> chiaro forzato
       .tema-scuro              -> scuro forzato

     Il contrasto di ogni coppia e' verificato: python scripts/contrasto.py.
     Non cambiare un valore a occhio senza rilanciarlo. */

:root {
  --paper: 250 248 245;
  --surface: 255 255 255;
  /* il "bianco" delle card */
  --ink: 27 36 48;
  --ink-secondary: 90 100 114;
  --line: 225 226 227;
  --navy: 77 124 58;
  /* verde felce, come riempimento */
  --accento: 77 124 58;
  /* e come testo: nel chiaro e' lo stesso */
  --gold: 250 213 5;
  --confirm: 76 154 46;
  --confirm-bg: 231 243 225;
  --confirm-text: 46 107 27;
  --amber: 201 122 46;
  --amber-bg: 251 238 221;
  --amber-text: 138 77 20;
  --danger: 179 38 30;
  --danger-bg: 251 232 230;
  --info: 61 116 176;
  --info-bg: 229 238 247;
  --info-text: 44 90 138;
  --violet: 122 90 176;
  --violet-bg: 239 233 247;
  --violet-text: 90 63 138;
  /* i due blu delle serie dei grafici (stats/views.py PALETTE_GRAFICI e
       static/js/stats_grafici.js): nello scuro diventano info, se no spariscono */
  --grafico-blu: 11 45 89;
  --grafico-blu-chiaro: 27 74 133;
}

/* Lo scuro serve in due casi: sistema in notturna senza scelta
     dell'utente, e scelta esplicita. Palette "Bosco": fondo appena tinto
     di verde, cosi' il verde del brand sta tono su tono invece di
     staccarsi sul nero; testo verde chiaro e morbido. */

@media (prefers-color-scheme: dark) {
  html:not(.tema-chiaro) {
    --paper: 18 24 20;
    /* quasi nero con un filo di verde: lega col brand, niente nero puro (aloni su OLED) */
    --surface: 25 33 28;
    /* le card salgono di un gradino di luce: nello scuro l'elevazione e' luce, non ombra */
    --ink: 220 227 221;
    /* ~88% di luce: il bianco pieno abbaglia e "sbava" */
    --ink-secondary: 149 163 152;
    --line: 42 52 45;
    --navy: 67 113 58;
    /* verde del brand un filo piu' scuro come riempimento: bianco sopra 5,7:1 */
    --accento: 165 207 148;
    /* verde schiarito e un po' desaturato: resta verde, non vibra */
    --gold: 226 192 64;
    --confirm: 126 188 100;
    --confirm-bg: 35 51 34;
    --confirm-text: 180 216 162;
    --amber: 222 160 92;
    --amber-bg: 58 48 30;
    --amber-text: 228 196 142;
    --danger: 235 167 156;
    --danger-bg: 62 37 34;
    --info: 122 168 212;
    --info-bg: 28 44 60;
    --info-text: 172 204 234;
    --violet: 172 150 220;
    --violet-bg: 45 37 62;
    --violet-text: 208 192 238;
    --grafico-blu: 122 168 212;
    --grafico-blu-chiaro: 172 204 234;
  }
}

html.tema-scuro {
  --paper: 18 24 20;
  /* quasi nero con un filo di verde: lega col brand, niente nero puro (aloni su OLED) */
  --surface: 25 33 28;
  /* le card salgono di un gradino di luce: nello scuro l'elevazione e' luce, non ombra */
  --ink: 220 227 221;
  /* ~88% di luce: il bianco pieno abbaglia e "sbava" */
  --ink-secondary: 149 163 152;
  --line: 42 52 45;
  --navy: 67 113 58;
  /* verde del brand un filo piu' scuro come riempimento: bianco sopra 5,7:1 */
  --accento: 165 207 148;
  /* verde schiarito e un po' desaturato: resta verde, non vibra */
  --gold: 226 192 64;
  --confirm: 126 188 100;
  --confirm-bg: 35 51 34;
  --confirm-text: 180 216 162;
  --amber: 222 160 92;
  --amber-bg: 58 48 30;
  --amber-text: 228 196 142;
  --danger: 235 167 156;
  --danger-bg: 62 37 34;
  --info: 122 168 212;
  --info-bg: 28 44 60;
  --info-text: 172 204 234;
  --violet: 172 150 220;
  --violet-bg: 45 37 62;
  --violet-text: 208 192 238;
  --grafico-blu: 122 168 212;
  --grafico-blu-chiaro: 172 204 234;
}

/* i controlli nativi (caselle, calendari, scrollbar) seguono il tema */

:root {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  html:not(.tema-chiaro) {
    color-scheme: dark;
  }
}

html.tema-scuro {
  color-scheme: dark;
}

/* Il reset di Tailwind mette un grigio fisso (#e5e7eb) sul bordo di OGNI
     elemento e uno (#9ca3af) sui segnaposto: su una card scura si vedono. */

*, ::before, ::after {
  border-color: rgb(var(--line));
}

::-moz-placeholder {
  color: rgb(var(--ink-secondary) / 0.6);
}

::placeholder {
  color: rgb(var(--ink-secondary) / 0.6);
}

body{
  --tw-bg-opacity:1;
  background-color:rgb(var(--paper) / var(--tw-bg-opacity, 1));
  font-family:IBM Plex Sans, sans-serif;
  --tw-text-opacity:1;
  color:rgb(var(--ink) / var(--tw-text-opacity, 1));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color: transparent
}

h1, h2, h3{
  font-weight:600;
  letter-spacing:-0.025em;
  --tw-text-opacity:1;
  color:rgb(var(--ink) / var(--tw-text-opacity, 1))
}

[x-cloak] {
  display: none !important;
}

/* Le microinterazioni restano leggere ma rispettano sempre la preferenza
     di sistema: nessuna animazione deve mai "muovere" chi l'ha disattivata. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Pulsanti -------------------------------------------------------
     Un'unica scala di varianti, tutte con touch target >= 48px e lo
     stesso ritmo (raggio, peso, transizione). Chi legge il markup deve
     riconoscere subito "azione primaria" da "azione secondaria". */

.btn-primary{
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  border-radius:10px;
  --tw-bg-opacity:1;
  background-color:rgb(var(--navy) / var(--tw-bg-opacity, 1));
  padding-left:1.25rem;
  padding-right:1.25rem;
  padding-top:0.75rem;
  padding-bottom:0.75rem;
  text-align:center;
  font-size:15px;
  font-weight:500;
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property:transform;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.btn-primary:focus-visible{
  outline:2px solid transparent;
  outline-offset:2px;
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(var(--accento) / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width:2px;
  --tw-ring-offset-color:rgb(var(--paper) / 1)
}

.btn-primary:active{
  --tw-scale-x:0.98;
  --tw-scale-y:0.98;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.btn-primary:disabled{
  pointer-events:none;
  opacity:0.5
}

.btn-secondary{
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  border-radius:10px;
  border-width:1px;
  --tw-border-opacity:1;
  border-color:rgb(var(--line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity:1;
  background-color:rgb(var(--surface) / var(--tw-bg-opacity, 1));
  padding-left:1.25rem;
  padding-right:1.25rem;
  padding-top:0.75rem;
  padding-bottom:0.75rem;
  text-align:center;
  font-size:15px;
  font-weight:500;
  --tw-text-opacity:1;
  color:rgb(var(--ink) / var(--tw-text-opacity, 1));
  transition-property:transform;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.btn-secondary:focus-visible{
  outline:2px solid transparent;
  outline-offset:2px;
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(var(--accento) / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width:2px;
  --tw-ring-offset-color:rgb(var(--paper) / 1)
}

.btn-secondary:active{
  --tw-scale-x:0.98;
  --tw-scale-y:0.98;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.btn-secondary:disabled{
  pointer-events:none;
  opacity:0.5
}

.btn-subtle{
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  gap:0.375rem;
  border-radius:10px;
  padding-left:0.75rem;
  padding-right:0.75rem;
  font-size:0.875rem;
  line-height:1.25rem;
  font-weight:500;
  --tw-text-opacity:1;
  color:rgb(var(--ink-secondary) / var(--tw-text-opacity, 1));
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.btn-subtle:hover{
  background-color:rgb(var(--line) / 0.4);
  --tw-text-opacity:1;
  color:rgb(var(--accento) / var(--tw-text-opacity, 1))
}

.btn-subtle:focus-visible{
  outline:2px solid transparent;
  outline-offset:2px;
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(var(--accento) / var(--tw-ring-opacity, 1))
}

.btn-subtle:active{
  --tw-scale-x:0.98;
  --tw-scale-y:0.98;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.btn-destructive{
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  border-radius:10px;
  border-width:1px;
  border-color:rgb(var(--danger) / 0.3);
  --tw-bg-opacity:1;
  background-color:rgb(var(--surface) / var(--tw-bg-opacity, 1));
  padding-left:1.25rem;
  padding-right:1.25rem;
  padding-top:0.75rem;
  padding-bottom:0.75rem;
  text-align:center;
  font-size:15px;
  font-weight:500;
  --tw-text-opacity:1;
  color:rgb(var(--danger) / var(--tw-text-opacity, 1));
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.btn-destructive:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--danger-bg) / var(--tw-bg-opacity, 1))
}

.btn-destructive:focus-visible{
  outline:2px solid transparent;
  outline-offset:2px;
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(var(--danger) / var(--tw-ring-opacity, 1))
}

.btn-destructive:active{
  --tw-scale-x:0.98;
  --tw-scale-y:0.98;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.icon-btn{
  display:inline-flex;
  height:2.75rem;
  width:2.75rem;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  --tw-text-opacity:1;
  color:rgb(var(--ink-secondary) / var(--tw-text-opacity, 1));
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.icon-btn:hover{
  background-color:rgb(var(--line) / 0.4);
  --tw-text-opacity:1;
  color:rgb(var(--accento) / var(--tw-text-opacity, 1))
}

.icon-btn:focus-visible{
  outline:2px solid transparent;
  outline-offset:2px;
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(var(--accento) / var(--tw-ring-opacity, 1))
}

.icon-btn:active{
  --tw-scale-x:.95;
  --tw-scale-y:.95;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

/* --- Superfici -------------------------------------------------------- */

.card{
  border-radius:16px;
  border-width:1px;
  --tw-border-opacity:1;
  border-color:rgb(var(--line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity:1;
  background-color:rgb(var(--surface) / var(--tw-bg-opacity, 1));
  padding:1rem;
  --tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.04);
  --tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

/* --- Campi -------------------------------------------------------- */

.input-field{
  min-height:48px;
  width:100%;
  border-radius:10px;
  border-width:1px;
  --tw-border-opacity:1;
  border-color:rgb(var(--line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity:1;
  background-color:rgb(var(--surface) / var(--tw-bg-opacity, 1));
  padding-left:0.875rem;
  padding-right:0.875rem;
  padding-top:0.75rem;
  padding-bottom:0.75rem;
  font-size:1rem;
  line-height:1.5rem;
  --tw-text-opacity:1;
  color:rgb(var(--ink) / var(--tw-text-opacity, 1));
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.input-field::-moz-placeholder{
  color:rgb(var(--ink-secondary) / 0.6)
}

.input-field::placeholder{
  color:rgb(var(--ink-secondary) / 0.6)
}

.input-field:focus{
  --tw-border-opacity:1;
  border-color:rgb(var(--accento) / var(--tw-border-opacity, 1));
  outline:2px solid transparent;
  outline-offset:2px;
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color:rgb(var(--accento) / 0.15)
}

.label-field{
  margin-bottom:0.375rem;
  display:block;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.025em;
  --tw-text-opacity:1;
  color:rgb(var(--ink-secondary) / var(--tw-text-opacity, 1))
}

.field-hint{
  margin-top:0.375rem;
  font-size:0.75rem;
  line-height:1rem;
  --tw-text-opacity:1;
  color:rgb(var(--ink-secondary) / var(--tw-text-opacity, 1))
}

.field-error{
  margin-top:0.375rem;
  font-size:0.75rem;
  line-height:1rem;
  font-weight:500;
  --tw-text-opacity:1;
  color:rgb(var(--danger) / var(--tw-text-opacity, 1))
}

/* Pulsante "mostra/nascondi" sovrapposto ai campi password (vedi
     x-data="{ mostra: false }" sul contenitore relative che lo circonda). */

.input-toggle-btn{
  position:absolute;
  right:0.375rem;
  top:50%;
  display:inline-flex;
  height:2.25rem;
  width:2.25rem;
  --tw-translate-y:-50%;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  align-items:center;
  justify-content:center;
  border-radius:0.375rem;
  --tw-text-opacity:1;
  color:rgb(var(--ink-secondary) / var(--tw-text-opacity, 1));
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.input-toggle-btn:hover{
  background-color:rgb(var(--line) / 0.4);
  --tw-text-opacity:1;
  color:rgb(var(--accento) / var(--tw-text-opacity, 1))
}

.input-toggle-btn:focus-visible{
  outline:2px solid transparent;
  outline-offset:2px;
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(var(--accento) / var(--tw-ring-opacity, 1))
}

.input-toggle-btn:active{
  --tw-scale-x:.95;
  --tw-scale-y:.95;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

/* --- Scelte a tocco: sostituiscono gli hack "label + onclick" con un
     unico componente coerente per radio/checkbox travestiti da bottoni. --- */

.choice-tile{
  display:flex;
  min-height:48px;
  cursor:pointer;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  align-items:center;
  gap:0.75rem;
  border-radius:10px;
  border-width:1px;
  --tw-border-opacity:1;
  border-color:rgb(var(--line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity:1;
  background-color:rgb(var(--surface) / var(--tw-bg-opacity, 1));
  padding-left:1rem;
  padding-right:1rem;
  padding-top:0.875rem;
  padding-bottom:0.875rem;
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.choice-tile:has(:checked){
  --tw-border-opacity:1;
  border-color:rgb(var(--accento) / var(--tw-border-opacity, 1));
  background-color:rgb(var(--accento) / 0.04);
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.choice-tile:has(:focus-visible){
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.choice-tile:has(:checked){
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(var(--accento) / var(--tw-ring-opacity, 1))
}

.choice-tile:has(:focus-visible){
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(var(--accento) / var(--tw-ring-opacity, 1))
}

.choice-tile-compact{
  display:flex;
  min-height:76px;
  cursor:pointer;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.25rem;
  border-radius:10px;
  border-width:1px;
  --tw-border-opacity:1;
  border-color:rgb(var(--line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity:1;
  background-color:rgb(var(--surface) / var(--tw-bg-opacity, 1));
  padding-left:0.75rem;
  padding-right:0.75rem;
  padding-top:1rem;
  padding-bottom:1rem;
  text-align:center;
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.choice-tile-compact:has(:checked){
  --tw-border-opacity:1;
  border-color:rgb(var(--accento) / var(--tw-border-opacity, 1));
  --tw-bg-opacity:1;
  background-color:rgb(var(--navy) / var(--tw-bg-opacity, 1));
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.choice-tile-compact:has(:focus-visible){
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(var(--accento) / var(--tw-ring-opacity, 1))
}

/* --- Etichette di stato ------------------------------------------- */

.chip{
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
  border-radius:9999px;
  background-color:rgb(var(--line) / 0.6);
  padding-left:0.625rem;
  padding-right:0.625rem;
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  font-size:0.75rem;
  line-height:1rem;
  font-weight:500;
  --tw-text-opacity:1;
  color:rgb(var(--ink-secondary) / var(--tw-text-opacity, 1))
}

.badge-success{
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
  border-radius:9999px;
  --tw-bg-opacity:1;
  background-color:rgb(var(--confirm-bg) / var(--tw-bg-opacity, 1));
  padding-left:0.625rem;
  padding-right:0.625rem;
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  font-size:0.75rem;
  line-height:1rem;
  font-weight:500;
  --tw-text-opacity:1;
  color:rgb(var(--confirm-text) / var(--tw-text-opacity, 1))
}

.badge-warning{
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
  border-radius:9999px;
  --tw-bg-opacity:1;
  background-color:rgb(var(--amber-bg) / var(--tw-bg-opacity, 1));
  padding-left:0.625rem;
  padding-right:0.625rem;
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  font-size:0.75rem;
  line-height:1rem;
  font-weight:500;
  --tw-text-opacity:1;
  color:rgb(var(--amber-text) / var(--tw-text-opacity, 1))
}

.badge-danger{
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
  border-radius:9999px;
  --tw-bg-opacity:1;
  background-color:rgb(var(--danger-bg) / var(--tw-bg-opacity, 1));
  padding-left:0.625rem;
  padding-right:0.625rem;
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  font-size:0.75rem;
  line-height:1rem;
  font-weight:500;
  --tw-text-opacity:1;
  color:rgb(var(--danger) / var(--tw-text-opacity, 1))
}

.badge-neutral{
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
  border-radius:9999px;
  background-color:rgb(var(--line) / 0.6);
  padding-left:0.625rem;
  padding-right:0.625rem;
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  font-size:0.75rem;
  line-height:1rem;
  font-weight:500;
  --tw-text-opacity:1;
  color:rgb(var(--ink-secondary) / var(--tw-text-opacity, 1))
}

/* Quinto tono per stati "in corso" intermedi, tra il neutro e l'amber
     (es. pipeline Deal): blu tenue, stessa struttura pastello-bg/testo-scuro
     degli altri badge (mai il colore del brand a bassa opacita': su sfondo
     chiaro risultava troppo debole per leggersi come una pillola). */

.badge-info{
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
  border-radius:9999px;
  --tw-bg-opacity:1;
  background-color:rgb(var(--info-bg) / var(--tw-bg-opacity, 1));
  padding-left:0.625rem;
  padding-right:0.625rem;
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  font-size:0.75rem;
  line-height:1rem;
  font-weight:500;
  --tw-text-opacity:1;
  color:rgb(var(--info-text) / var(--tw-text-opacity, 1))
}

/* --- Filtri a pillola (periodo statistiche, ecc.): scorrono in
     orizzontale su mobile invece di andare a capo in disordine. --- */

.pill-row {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pill-row::-webkit-scrollbar {
  display: none;
}

.pill-row{
  margin-left:-1rem;
  margin-right:-1rem;
  display:flex;
  gap:0.375rem;
  overflow-x:auto;
  padding-left:1rem;
  padding-right:1rem
}

@media (min-width: 768px){
  .pill-row{
    margin-left:0px;
    margin-right:0px;
    padding-left:0px;
    padding-right:0px
  }
}

.pill{
  flex-shrink:0;
  white-space:nowrap;
  border-radius:9999px;
  border-width:1px;
  --tw-border-opacity:1;
  border-color:rgb(var(--line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity:1;
  background-color:rgb(var(--surface) / var(--tw-bg-opacity, 1));
  padding-left:0.875rem;
  padding-right:0.875rem;
  padding-top:0.5rem;
  padding-bottom:0.5rem;
  font-size:0.875rem;
  line-height:1.25rem;
  font-weight:500;
  --tw-text-opacity:1;
  color:rgb(var(--ink-secondary) / var(--tw-text-opacity, 1));
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.pill:hover{
  border-color:rgb(var(--accento) / 0.4)
}

.pill-active{
  --tw-border-opacity:1;
  border-color:rgb(var(--accento) / var(--tw-border-opacity, 1));
  --tw-bg-opacity:1;
  background-color:rgb(var(--navy) / var(--tw-bg-opacity, 1));
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

/* periodo: piu' stretta, alta uguale */

.pill-sm{
  padding-left:0.625rem;
  padding-right:0.625rem;
  font-size:0.75rem;
  line-height:1rem
}

/* pillola a scelta del pannello filtri: checkbox nascosta dentro una <label>
     (piu' accese insieme, funziona senza JS e da tastiera). Va a capo: nella
     colonna di destra del foglio i nomi lunghi non stanno. */

.pill-scelta{
  display:inline-flex;
  min-height:48px;
  max-width:100%;
  cursor:pointer;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  align-items:center;
  white-space:normal;
  text-align:left;
  line-height:1.375
}

.pill-scelta:has(:checked){
  --tw-border-opacity:1;
  border-color:rgb(var(--accento) / var(--tw-border-opacity, 1));
  --tw-bg-opacity:1;
  background-color:rgb(var(--navy) / var(--tw-bg-opacity, 1));
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.pill-scelta:has(:focus-visible){
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(var(--accento) / var(--tw-ring-opacity, 1))
}

/* --- Numeri: litri, prezzi, KPI. Sempre monospaziati e allineati. --- */

.numero-chiave{
  font-family:IBM Plex Mono, monospace;
  font-weight:500;
  --tw-numeric-spacing:tabular-nums;
  font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity:1;
  color:rgb(var(--accento) / var(--tw-text-opacity, 1))
}

/* --- Intestazioni tabella ordinabili (desktop) --------------------- */

.th-ordinabile{
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.th-ordinabile:hover{
  --tw-text-opacity:1;
  color:rgb(var(--accento) / var(--tw-text-opacity, 1))
}

/* Intestazione ancorata per le tabelle "semplici" (elenco ordini): il
     riquadro scorre da solo in verticale e i th restano in cima. Il filo
     sotto e' un inset box-shadow e non un border perche' con
     border-collapse Chrome e Safari non disegnano il bordo delle celle
     sticky (per lo stesso motivo la tabella Deal usa border-separate). */

.th-ancorata{
  position:sticky;
  top:0px;
  z-index:10;
  --tw-bg-opacity:1;
  background-color:rgb(var(--surface) / var(--tw-bg-opacity, 1));
  box-shadow: inset 0 -1px 0 rgb(var(--line))
}

/* --- Pillola vivida della tabella deal: sfondo pieno + testo bianco,
     cosi' il valore si riconosce dal colore prima che dalla parola
     (richiesta: "colori forti, vivi"). Il colore di sfondo arriva inline
     (style="background-color: ..."), calcolato in deals.views._colori_pill
     in modo che due valori diversi non abbiano mai lo stesso colore. --- */

.dpill{
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
  white-space:nowrap;
  border-radius:6px;
  padding-left:0.5rem;
  padding-right:0.5rem;
  padding-top:0.125rem;
  padding-bottom:0.125rem;
  font-size:0.75rem;
  font-weight:600;
  line-height:1.25rem;
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1));
  background-color: var(--c)
  /* il colore arriva inline: style="--c: #hex" */
}

/* Nel tema scuro i colori a DB pieni accecano: pillola "tonale", fondo
     appena tinto, bordo sottile e testo del colore schiarito. Il chiaro
     resta pieno con testo bianco. */

@media (prefers-color-scheme: dark) {
  html:not(.tema-chiaro) .dpill {
    background-color: color-mix(in srgb, var(--c) 22%, rgb(var(--surface)));
    color: color-mix(in srgb, var(--c) 42%, rgb(var(--ink)));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent);
  }
}

html.tema-scuro .dpill {
  background-color: color-mix(in srgb, var(--c) 22%, rgb(var(--surface)));
  color: color-mix(in srgb, var(--c) 42%, rgb(var(--ink)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent);
}

/* Gruppo di pillole multi-valore (regione, provincia, tipologia, assegnato):
     max-width stretto cosi' le pillole vanno a capo invece di allargare la
     colonna e lasciare un "buco" nelle righe con un solo valore. */

.dpill-group{
  display:inline-flex;
  max-width:8.5rem;
  flex-wrap:wrap;
  align-items:center;
  gap:0.25rem;
  vertical-align:middle
}

@media (min-width: 768px){
  .dpill-group{
    max-width:14rem
  }
}

/* --- Tabella Deal: un'unica tabella per desktop e mobile, dentro un
     riquadro che scorre in orizzontale e in verticale. L'altezza massima
     serve su entrambi: e' il riquadro a scorrere in verticale, quindi lo
     sticky delle intestazioni ha un contenitore a cui ancorarsi e la riga
     dei titoli resta a schermo anche su mobile (prima l'altezza massima era
     solo md: e su mobile l'intestazione se ne andava via con la pagina).
     svh e non dvh/vh: con dvh l'altezza cambia mentre la barra URL del
     browser mobile si nasconde e la tabella "salta". overscroll solo su X:
     in verticale, arrivati in fondo, lo scorrimento deve proseguire sulla
     pagina, altrimenti il dito resta incastrato nel riquadro.
     Prima colonna ("Deal") sempre ancorata a sinistra. border-separate (non
     collapse): con collapse i bordi delle celle sticky spariscono in
     Chrome/Safari. --- */

.deal-tabella-wrap{
  position:relative;
  max-height:70svh;
  overflow:auto;
  border-radius:10px;
  border-width:1px;
  --tw-border-opacity:1;
  border-color:rgb(var(--line) / var(--tw-border-opacity, 1))
}

@media (min-width: 768px){
  .deal-tabella-wrap{
    max-height:75vh
  }
}

.deal-tabella-wrap {
  overscroll-behavior-x: contain;
}

.deal-tabella{
  width:100%;
  border-collapse:separate;
  --tw-border-spacing-x:0px;
  --tw-border-spacing-y:0px;
  border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);
  font-size:0.75rem;
  line-height:1rem
}

@media (min-width: 768px){
  .deal-tabella{
    font-size:13px
  }
}

/* Niente min-width fisso: ogni colonna si stringe sul suo contenuto reale
     (l'intestazione non va a capo, whitespace-nowrap, quindi fa da larghezza
     minima naturale). Evita gli "spazi morti" quando una cella ha una sola
     pillola corta. w-0 forza le colonne al minimo, lasciando il resto a Deal/Note. */

.deal-tabella th,
  .deal-tabella td{
  width:0px;
  white-space:nowrap;
  border-bottom-width:1px;
  --tw-border-opacity:1;
  border-color:rgb(var(--line) / var(--tw-border-opacity, 1));
  padding-left:0.5rem;
  padding-right:0.5rem;
  padding-top:0.375rem;
  padding-bottom:0.375rem;
  text-align:left;
  vertical-align:middle
}

@media (min-width: 768px){
  .deal-tabella th,
  .deal-tabella td{
    padding-left:0.75rem;
    padding-right:0.75rem;
    padding-top:0.75rem;
    padding-bottom:0.75rem
  }
}

.deal-tabella tbody tr:last-child td{
  border-bottom-width:0px
}

.deal-tabella thead th{
  position:sticky;
  top:0px;
  z-index:20;
  --tw-bg-opacity:1;
  background-color:rgb(var(--paper) / var(--tw-bg-opacity, 1));
  font-size:11px;
  font-weight:500;
  --tw-text-opacity:1;
  color:rgb(var(--ink-secondary) / var(--tw-text-opacity, 1))
}

.deal-tabella tbody tr:hover td{
  --tw-bg-opacity:1;
  background-color:rgb(var(--paper) / var(--tw-bg-opacity, 1))
}

/* Prima colonna ancorata: sfondo opaco obbligatorio + bordo e ombra a
     destra per staccarla dal contenuto che le scorre sotto. */

.deal-tabella th:first-child,
  .deal-tabella td:first-child{
  position:sticky;
  left:0px;
  z-index:10;
  min-width:6.5rem;
  max-width:7.5rem;
  white-space:normal;
  border-right-width:1px;
  --tw-border-opacity:1;
  border-color:rgb(var(--line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity:1;
  background-color:rgb(var(--surface) / var(--tw-bg-opacity, 1))
}

@media (min-width: 768px){
  .deal-tabella th:first-child,
  .deal-tabella td:first-child{
    min-width:11rem;
    max-width:13rem;
    white-space:nowrap
  }
}

.deal-tabella th:first-child,
  .deal-tabella td:first-child {
  box-shadow: 2px 0 4px -2px rgb(27 36 48 / 0.06);
}

.deal-tabella thead th:first-child{
  z-index:30;
  --tw-bg-opacity:1;
  background-color:rgb(var(--paper) / var(--tw-bg-opacity, 1))
}

.deal-tabella tbody tr:hover td:first-child{
  --tw-bg-opacity:1;
  background-color:rgb(var(--paper) / var(--tw-bg-opacity, 1))
}

/* Intestazione colonna: etichetta + comando ordina, uguale per ogni
     colonna (in Fase 3 si aggiunge qui l'icona filtro). */

.dth{
  display:flex;
  align-items:center;
  gap:0.25rem
}

/* p-1 -m-1: area toccabile piu' grande (mobile) senza allargare l'header. */

.dth-sort{
  margin:-0.25rem;
  display:inline-flex;
  border-radius:6px;
  padding:0.25rem;
  color:rgb(var(--ink-secondary) / 0.4);
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.dth-sort:hover{
  --tw-text-opacity:1;
  color:rgb(var(--accento) / var(--tw-text-opacity, 1))
}

.dth-sort.attivo{
  --tw-text-opacity:1;
  color:rgb(var(--accento) / var(--tw-text-opacity, 1))
}

/* Colonna azioni (ultima): stretta, l'icona ⋯ centrata. */

.deal-tabella th:last-child,
  .deal-tabella td:last-child {
  min-width: 0;
  width:3rem;
  text-align:center;
}

/* Cella modificabile inline (Fase 4): tap -> editor. Segnala che si puo'
     toccare senza gridare "bottone". */

.cella-edit{
  margin-left:-0.25rem;
  margin-right:-0.25rem;
  border-radius:6px;
  padding-left:0.25rem;
  padding-right:0.25rem;
  text-align:left
}

.cella-edit:hover{
  background-color:rgb(var(--accento) / 0.05)
}

/* Voce del menu azioni di riga (Fase 5, _deal_azioni.html). */

.dmenu-voce{
  display:flex;
  align-items:center;
  gap:0.75rem;
  border-radius:10px;
  padding-left:0.75rem;
  padding-right:0.75rem;
  padding-top:0.75rem;
  padding-bottom:0.75rem;
  text-align:left;
  font-size:0.875rem;
  line-height:1.25rem
}

.dmenu-voce:hover{
  background-color:rgb(var(--line) / 0.4)
}

/* --- Stati vuoti / errore: testo chiaro, un'icona sobria, un'azione. --- */

.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding-top:2.5rem;
  padding-bottom:2.5rem;
  padding-left:1rem;
  padding-right:1rem;
  text-align:center;
  --tw-text-opacity:1;
  color:rgb(var(--ink-secondary) / var(--tw-text-opacity, 1))
}

/* Nasconde la scrollbar orizzontale della pill-row mantenendola scrollabile. */

/* --- Barra laterale desktop richiudibile ---------------------------
     Stato in <html class="sidebar-chiusa">, impostato da uno script inline
     nel <head> (localStorage) e dai due bottoni. Niente Alpine: deve
     funzionare anche senza la CDN. Solo desktop: su mobile la barra e'
     gia' nascosta e c'e' la nav in basso. */

.sidebar-riapri {
  display: none;
}

@media (min-width: 768px) {
  .sidebar-chiusa .app-sidebar {
    display: none;
  }

  .sidebar-chiusa .sidebar-riapri {
    display: inline-flex;
  }
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border-width:0
}

.pointer-events-none{
  pointer-events:none
}

.visible{
  visibility:visible
}

.collapse{
  visibility:collapse
}

.static{
  position:static
}

.fixed{
  position:fixed
}

.absolute{
  position:absolute
}

.relative{
  position:relative
}

.sticky{
  position:sticky
}

.inset-0{
  inset:0px
}

.inset-x-3{
  left:0.75rem;
  right:0.75rem
}

.bottom-0{
  bottom:0px
}

.bottom-20{
  bottom:5rem
}

.bottom-\[calc\(5rem\+env\(safe-area-inset-bottom\)\)\]{
  bottom:calc(5rem + env(safe-area-inset-bottom))
}

.left-0{
  left:0px
}

.left-1{
  left:0.25rem
}

.left-1\/2{
  left:50%
}

.left-3\.5{
  left:0.875rem
}

.right-0{
  right:0px
}

.right-1\.5{
  right:0.375rem
}

.right-4{
  right:1rem
}

.right-\[22\%\]{
  right:22%
}

.top-0{
  top:0px
}

.top-1{
  top:0.25rem
}

.top-1\.5{
  top:0.375rem
}

.top-1\/2{
  top:50%
}

.top-16{
  top:4rem
}

.top-3{
  top:0.75rem
}

.top-full{
  top:100%
}

.z-30{
  z-index:30
}

.z-40{
  z-index:40
}

.z-50{
  z-index:50
}

.z-\[70\]{
  z-index:70
}

.z-\[71\]{
  z-index:71
}

.col-span-2{
  grid-column:span 2 / span 2
}

.-m-1{
  margin:-0.25rem
}

.m-3{
  margin:0.75rem
}

.-mx-2{
  margin-left:-0.5rem;
  margin-right:-0.5rem
}

.-mx-4{
  margin-left:-1rem;
  margin-right:-1rem
}

.-my-2{
  margin-top:-0.5rem;
  margin-bottom:-0.5rem
}

.mx-auto{
  margin-left:auto;
  margin-right:auto
}

.my-2{
  margin-top:0.5rem;
  margin-bottom:0.5rem
}

.\!mb-0{
  margin-bottom:0px !important
}

.-ml-2\.5{
  margin-left:-0.625rem
}

.-ml-3{
  margin-left:-0.75rem
}

.-mr-0\.5{
  margin-right:-0.125rem
}

.-mr-1{
  margin-right:-0.25rem
}

.-mr-2{
  margin-right:-0.5rem
}

.-mt-0\.5{
  margin-top:-0.125rem
}

.-mt-1{
  margin-top:-0.25rem
}

.-mt-2{
  margin-top:-0.5rem
}

.mb-0\.5{
  margin-bottom:0.125rem
}

.mb-1{
  margin-bottom:0.25rem
}

.mb-1\.5{
  margin-bottom:0.375rem
}

.mb-2{
  margin-bottom:0.5rem
}

.mb-3{
  margin-bottom:0.75rem
}

.mb-4{
  margin-bottom:1rem
}

.mb-5{
  margin-bottom:1.25rem
}

.mb-6{
  margin-bottom:1.5rem
}

.mb-8{
  margin-bottom:2rem
}

.ml-9{
  margin-left:2.25rem
}

.ml-auto{
  margin-left:auto
}

.mt-0\.5{
  margin-top:0.125rem
}

.mt-1{
  margin-top:0.25rem
}

.mt-1\.5{
  margin-top:0.375rem
}

.mt-2{
  margin-top:0.5rem
}

.mt-3{
  margin-top:0.75rem
}

.mt-4{
  margin-top:1rem
}

.mt-6{
  margin-top:1.5rem
}

.mt-auto{
  margin-top:auto
}

.line-clamp-2{
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2
}

.block{
  display:block
}

.inline-block{
  display:inline-block
}

.inline{
  display:inline
}

.flex{
  display:flex
}

.inline-flex{
  display:inline-flex
}

.table{
  display:table
}

.grid{
  display:grid
}

.contents{
  display:contents
}

.hidden{
  display:none
}

.\!h-8{
  height:2rem !important
}

.h-1{
  height:0.25rem
}

.h-1\.5{
  height:0.375rem
}

.h-10{
  height:2.5rem
}

.h-11{
  height:2.75rem
}

.h-12{
  height:3rem
}

.h-14{
  height:3.5rem
}

.h-2{
  height:0.5rem
}

.h-2\.5{
  height:0.625rem
}

.h-3{
  height:0.75rem
}

.h-3\.5{
  height:0.875rem
}

.h-4{
  height:1rem
}

.h-5{
  height:1.25rem
}

.h-52{
  height:13rem
}

.h-56{
  height:14rem
}

.h-6{
  height:1.5rem
}

.h-64{
  height:16rem
}

.h-7{
  height:1.75rem
}

.h-8{
  height:2rem
}

.h-9{
  height:2.25rem
}

.h-\[18px\]{
  height:18px
}

.h-\[22px\]{
  height:22px
}

.h-full{
  height:100%
}

.max-h-56{
  max-height:14rem
}

.max-h-64{
  max-height:16rem
}

.max-h-\[85vh\]{
  max-height:85vh
}

.max-h-full{
  max-height:100%
}

.\!min-h-0{
  min-height:0px !important
}

.min-h-0{
  min-height:0px
}

.min-h-\[16rem\]{
  min-height:16rem
}

.min-h-\[40px\]{
  min-height:40px
}

.min-h-\[44px\]{
  min-height:44px
}

.min-h-\[48px\]{
  min-height:48px
}

.min-h-screen{
  min-height:100vh
}

.min-h-touch{
  min-height:48px
}

.\!w-24{
  width:6rem !important
}

.\!w-48{
  width:12rem !important
}

.\!w-8{
  width:2rem !important
}

.\!w-auto{
  width:auto !important
}

.w-10{
  width:2.5rem
}

.w-11{
  width:2.75rem
}

.w-12{
  width:3rem
}

.w-14{
  width:3.5rem
}

.w-2{
  width:0.5rem
}

.w-3{
  width:0.75rem
}

.w-3\.5{
  width:0.875rem
}

.w-4{
  width:1rem
}

.w-40{
  width:10rem
}

.w-5{
  width:1.25rem
}

.w-56{
  width:14rem
}

.w-6{
  width:1.5rem
}

.w-7{
  width:1.75rem
}

.w-72{
  width:18rem
}

.w-8{
  width:2rem
}

.w-9{
  width:2.25rem
}

.w-\[18px\]{
  width:18px
}

.w-\[22px\]{
  width:22px
}

.w-\[calc\(100\%-1\.5rem\)\]{
  width:calc(100% - 1.5rem)
}

.w-auto{
  width:auto
}

.w-full{
  width:100%
}

.min-w-0{
  min-width:0px
}

.min-w-4{
  min-width:1rem
}

.min-w-5{
  min-width:1.25rem
}

.min-w-\[9\.5rem\]{
  min-width:9.5rem
}

.min-w-\[9rem\]{
  min-width:9rem
}

.max-w-2xl{
  max-width:42rem
}

.max-w-3xl{
  max-width:48rem
}

.max-w-4xl{
  max-width:56rem
}

.max-w-5xl{
  max-width:64rem
}

.max-w-6xl{
  max-width:72rem
}

.max-w-\[18rem\]{
  max-width:18rem
}

.max-w-\[calc\(100vw-2rem\)\]{
  max-width:calc(100vw - 2rem)
}

.max-w-full{
  max-width:100%
}

.max-w-md{
  max-width:28rem
}

.max-w-sm{
  max-width:24rem
}

.max-w-xl{
  max-width:36rem
}

.flex-1{
  flex:1 1 0%
}

.shrink-0{
  flex-shrink:0
}

.-translate-x-1\/2{
  --tw-translate-x:-50%;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-translate-y-1\/2{
  --tw-translate-y:-50%;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.translate-y-0{
  --tw-translate-y:0px;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.translate-y-full{
  --tw-translate-y:100%;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.rotate-180{
  --tw-rotate:180deg;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.transform{
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.cursor-pointer{
  cursor:pointer
}

.select-none{
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none
}

.resize{
  resize:both
}

.list-none{
  list-style-type:none
}

.grid-cols-1{
  grid-template-columns:repeat(1, minmax(0, 1fr))
}

.grid-cols-2{
  grid-template-columns:repeat(2, minmax(0, 1fr))
}

.grid-cols-3{
  grid-template-columns:repeat(3, minmax(0, 1fr))
}

.grid-cols-4{
  grid-template-columns:repeat(4, minmax(0, 1fr))
}

.grid-cols-5{
  grid-template-columns:repeat(5, minmax(0, 1fr))
}

.grid-cols-\[1fr_auto\]{
  grid-template-columns:1fr auto
}

.flex-col{
  flex-direction:column
}

.flex-wrap{
  flex-wrap:wrap
}

.items-start{
  align-items:flex-start
}

.items-end{
  align-items:flex-end
}

.items-center{
  align-items:center
}

.items-baseline{
  align-items:baseline
}

.items-stretch{
  align-items:stretch
}

.\!justify-start{
  justify-content:flex-start !important
}

.\!justify-center{
  justify-content:center !important
}

.justify-center{
  justify-content:center
}

.justify-between{
  justify-content:space-between
}

.justify-around{
  justify-content:space-around
}

.gap-0\.5{
  gap:0.125rem
}

.gap-1{
  gap:0.25rem
}

.gap-1\.5{
  gap:0.375rem
}

.gap-2{
  gap:0.5rem
}

.gap-2\.5{
  gap:0.625rem
}

.gap-3{
  gap:0.75rem
}

.gap-4{
  gap:1rem
}

.gap-x-2{
  -moz-column-gap:0.5rem;
       column-gap:0.5rem
}

.gap-x-3{
  -moz-column-gap:0.75rem;
       column-gap:0.75rem
}

.gap-x-4{
  -moz-column-gap:1rem;
       column-gap:1rem
}

.gap-x-6{
  -moz-column-gap:1.5rem;
       column-gap:1.5rem
}

.gap-y-0\.5{
  row-gap:0.125rem
}

.gap-y-1{
  row-gap:0.25rem
}

.gap-y-1\.5{
  row-gap:0.375rem
}

.gap-y-2{
  row-gap:0.5rem
}

.gap-y-4{
  row-gap:1rem
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(0.125rem * var(--tw-space-y-reverse))
}

.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(0.25rem * var(--tw-space-y-reverse))
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(0.375rem * var(--tw-space-y-reverse))
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))
}

.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))
}

.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(1rem * var(--tw-space-y-reverse))
}

.space-y-5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))
}

.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse:0;
  border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width:calc(1px * var(--tw-divide-y-reverse))
}

.divide-line > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--line) / var(--tw-divide-opacity, 1))
}

.divide-line\/60 > :not([hidden]) ~ :not([hidden]){
  border-color:rgb(var(--line) / 0.6)
}

.overflow-auto{
  overflow:auto
}

.overflow-hidden{
  overflow:hidden
}

.overflow-x-auto{
  overflow-x:auto
}

.overflow-y-auto{
  overflow-y:auto
}

.overflow-x-hidden{
  overflow-x:hidden
}

.overscroll-contain{
  overscroll-behavior:contain
}

.truncate{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.\!whitespace-normal{
  white-space:normal !important
}

.whitespace-nowrap{
  white-space:nowrap
}

.whitespace-pre-line{
  white-space:pre-line
}

.break-words{
  overflow-wrap:break-word
}

.rounded{
  border-radius:6px
}

.rounded-full{
  border-radius:9999px
}

.rounded-lg{
  border-radius:10px
}

.rounded-md{
  border-radius:0.375rem
}

.rounded-none{
  border-radius:0px
}

.rounded-xl{
  border-radius:16px
}

.rounded-t-2xl{
  border-top-left-radius:1rem;
  border-top-right-radius:1rem
}

.rounded-t-xl{
  border-top-left-radius:16px;
  border-top-right-radius:16px
}

.border{
  border-width:1px
}

.border-2{
  border-width:2px
}

.border-b{
  border-bottom-width:1px
}

.border-l{
  border-left-width:1px
}

.border-l-4{
  border-left-width:4px
}

.border-r{
  border-right-width:1px
}

.border-t{
  border-top-width:1px
}

.\!border-accento{
  --tw-border-opacity:1 !important;
  border-color:rgb(var(--accento) / var(--tw-border-opacity, 1)) !important
}

.border-amber-text\/25{
  border-color:rgb(var(--amber-text) / 0.25)
}

.border-amber\/30{
  border-color:rgb(var(--amber) / 0.3)
}

.border-amber\/40{
  border-color:rgb(var(--amber) / 0.4)
}

.border-confirm\/25{
  border-color:rgb(var(--confirm) / 0.25)
}

.border-danger\/25{
  border-color:rgb(var(--danger) / 0.25)
}

.border-danger\/30{
  border-color:rgb(var(--danger) / 0.3)
}

.border-ink{
  --tw-border-opacity:1;
  border-color:rgb(var(--ink) / var(--tw-border-opacity, 1))
}

.border-line{
  --tw-border-opacity:1;
  border-color:rgb(var(--line) / var(--tw-border-opacity, 1))
}

.border-line\/60{
  border-color:rgb(var(--line) / 0.6)
}

.border-transparent{
  border-color:transparent
}

.border-l-navy{
  --tw-border-opacity:1;
  border-left-color:rgb(var(--navy) / var(--tw-border-opacity, 1))
}

.\!bg-accento\/10{
  background-color:rgb(var(--accento) / 0.1) !important
}

.\!bg-amber-bg{
  --tw-bg-opacity:1 !important;
  background-color:rgb(var(--amber-bg) / var(--tw-bg-opacity, 1)) !important
}

.\!bg-black\/50{
  background-color:rgb(0 0 0 / 0.5) !important
}

.\!bg-navy{
  --tw-bg-opacity:1 !important;
  background-color:rgb(var(--navy) / var(--tw-bg-opacity, 1)) !important
}

.bg-accento\/10{
  background-color:rgb(var(--accento) / 0.1)
}

.bg-accento\/\[0\.04\]{
  background-color:rgb(var(--accento) / 0.04)
}

.bg-accento\/\[0\.05\]{
  background-color:rgb(var(--accento) / 0.05)
}

.bg-accento\/\[0\.07\]{
  background-color:rgb(var(--accento) / 0.07)
}

.bg-amber-bg{
  --tw-bg-opacity:1;
  background-color:rgb(var(--amber-bg) / var(--tw-bg-opacity, 1))
}

.bg-amber-bg\/40{
  background-color:rgb(var(--amber-bg) / 0.4)
}

.bg-amber-bg\/60{
  background-color:rgb(var(--amber-bg) / 0.6)
}

.bg-black{
  --tw-bg-opacity:1;
  background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))
}

.bg-black\/40{
  background-color:rgb(0 0 0 / 0.4)
}

.bg-confirm-bg{
  --tw-bg-opacity:1;
  background-color:rgb(var(--confirm-bg) / var(--tw-bg-opacity, 1))
}

.bg-danger{
  --tw-bg-opacity:1;
  background-color:rgb(var(--danger) / var(--tw-bg-opacity, 1))
}

.bg-danger-bg{
  --tw-bg-opacity:1;
  background-color:rgb(var(--danger-bg) / var(--tw-bg-opacity, 1))
}

.bg-gold{
  --tw-bg-opacity:1;
  background-color:rgb(var(--gold) / var(--tw-bg-opacity, 1))
}

.bg-line{
  --tw-bg-opacity:1;
  background-color:rgb(var(--line) / var(--tw-bg-opacity, 1))
}

.bg-line\/30{
  background-color:rgb(var(--line) / 0.3)
}

.bg-line\/70{
  background-color:rgb(var(--line) / 0.7)
}

.bg-navy{
  --tw-bg-opacity:1;
  background-color:rgb(var(--navy) / var(--tw-bg-opacity, 1))
}

.bg-paper{
  --tw-bg-opacity:1;
  background-color:rgb(var(--paper) / var(--tw-bg-opacity, 1))
}

.bg-paper\/95{
  background-color:rgb(var(--paper) / 0.95)
}

.bg-surface{
  --tw-bg-opacity:1;
  background-color:rgb(var(--surface) / var(--tw-bg-opacity, 1))
}

.bg-transparent{
  background-color:transparent
}

.bg-white{
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.bg-white\/15{
  background-color:rgb(255 255 255 / 0.15)
}

.object-contain{
  -o-object-fit:contain;
     object-fit:contain
}

.\!p-0{
  padding:0px !important
}

.\!p-1{
  padding:0.25rem !important
}

.\!p-1\.5{
  padding:0.375rem !important
}

.\!p-2{
  padding:0.5rem !important
}

.\!p-2\.5{
  padding:0.625rem !important
}

.\!p-3{
  padding:0.75rem !important
}

.\!p-4{
  padding:1rem !important
}

.\!p-5{
  padding:1.25rem !important
}

.p-0\.5{
  padding:0.125rem
}

.p-1{
  padding:0.25rem
}

.p-1\.5{
  padding:0.375rem
}

.p-2{
  padding:0.5rem
}

.p-2\.5{
  padding:0.625rem
}

.p-3{
  padding:0.75rem
}

.p-4{
  padding:1rem
}

.p-5{
  padding:1.25rem
}

.\!px-1\.5{
  padding-left:0.375rem !important;
  padding-right:0.375rem !important
}

.\!px-2{
  padding-left:0.5rem !important;
  padding-right:0.5rem !important
}

.\!px-2\.5{
  padding-left:0.625rem !important;
  padding-right:0.625rem !important
}

.\!px-3{
  padding-left:0.75rem !important;
  padding-right:0.75rem !important
}

.\!px-4{
  padding-left:1rem !important;
  padding-right:1rem !important
}

.\!py-0\.5{
  padding-top:0.125rem !important;
  padding-bottom:0.125rem !important
}

.\!py-1{
  padding-top:0.25rem !important;
  padding-bottom:0.25rem !important
}

.\!py-1\.5{
  padding-top:0.375rem !important;
  padding-bottom:0.375rem !important
}

.\!py-2{
  padding-top:0.5rem !important;
  padding-bottom:0.5rem !important
}

.\!py-4{
  padding-top:1rem !important;
  padding-bottom:1rem !important
}

.px-0\.5{
  padding-left:0.125rem;
  padding-right:0.125rem
}

.px-1{
  padding-left:0.25rem;
  padding-right:0.25rem
}

.px-1\.5{
  padding-left:0.375rem;
  padding-right:0.375rem
}

.px-2{
  padding-left:0.5rem;
  padding-right:0.5rem
}

.px-2\.5{
  padding-left:0.625rem;
  padding-right:0.625rem
}

.px-3{
  padding-left:0.75rem;
  padding-right:0.75rem
}

.px-3\.5{
  padding-left:0.875rem;
  padding-right:0.875rem
}

.px-4{
  padding-left:1rem;
  padding-right:1rem
}

.py-1{
  padding-top:0.25rem;
  padding-bottom:0.25rem
}

.py-1\.5{
  padding-top:0.375rem;
  padding-bottom:0.375rem
}

.py-10{
  padding-top:2.5rem;
  padding-bottom:2.5rem
}

.py-2{
  padding-top:0.5rem;
  padding-bottom:0.5rem
}

.py-2\.5{
  padding-top:0.625rem;
  padding-bottom:0.625rem
}

.py-3{
  padding-top:0.75rem;
  padding-bottom:0.75rem
}

.py-3\.5{
  padding-top:0.875rem;
  padding-bottom:0.875rem
}

.py-5{
  padding-top:1.25rem;
  padding-bottom:1.25rem
}

.py-8{
  padding-top:2rem;
  padding-bottom:2rem
}

.pb-1{
  padding-bottom:0.25rem
}

.pb-28{
  padding-bottom:7rem
}

.pb-3{
  padding-bottom:0.75rem
}

.pl-10{
  padding-left:2.5rem
}

.pl-3{
  padding-left:0.75rem
}

.pl-4{
  padding-left:1rem
}

.pr-1{
  padding-right:0.25rem
}

.pr-11{
  padding-right:2.75rem
}

.pr-16{
  padding-right:4rem
}

.pr-3{
  padding-right:0.75rem
}

.pt-1{
  padding-top:0.25rem
}

.pt-2{
  padding-top:0.5rem
}

.pt-3{
  padding-top:0.75rem
}

.pt-4{
  padding-top:1rem
}

.text-left{
  text-align:left
}

.text-center{
  text-align:center
}

.text-right{
  text-align:right
}

.align-middle{
  vertical-align:middle
}

.\!font-mono{
  font-family:IBM Plex Mono, monospace !important
}

.font-mono{
  font-family:IBM Plex Mono, monospace
}

.\!text-3xl{
  font-size:1.875rem !important;
  line-height:2.25rem !important
}

.\!text-\[10px\]{
  font-size:10px !important
}

.\!text-base{
  font-size:1rem !important;
  line-height:1.5rem !important
}

.\!text-sm{
  font-size:0.875rem !important;
  line-height:1.25rem !important
}

.\!text-xs{
  font-size:0.75rem !important;
  line-height:1rem !important
}

.text-2xl{
  font-size:1.5rem;
  line-height:2rem
}

.text-\[10\.5px\]{
  font-size:10.5px
}

.text-\[10px\]{
  font-size:10px
}

.text-\[11px\]{
  font-size:11px
}

.text-\[15px\]{
  font-size:15px
}

.text-\[22px\]{
  font-size:22px
}

.text-base{
  font-size:1rem;
  line-height:1.5rem
}

.text-lg{
  font-size:1.125rem;
  line-height:1.75rem
}

.text-sm{
  font-size:0.875rem;
  line-height:1.25rem
}

.text-xl{
  font-size:1.25rem;
  line-height:1.75rem
}

.text-xs{
  font-size:0.75rem;
  line-height:1rem
}

.\!font-semibold{
  font-weight:600 !important
}

.font-bold{
  font-weight:700
}

.font-medium{
  font-weight:500
}

.font-normal{
  font-weight:400
}

.font-semibold{
  font-weight:600
}

.uppercase{
  text-transform:uppercase
}

.italic{
  font-style:italic
}

.tabular-nums{
  --tw-numeric-spacing:tabular-nums;
  font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)
}

.leading-none{
  line-height:1
}

.leading-relaxed{
  line-height:1.625
}

.leading-snug{
  line-height:1.375
}

.leading-tight{
  line-height:1.25
}

.tracking-wide{
  letter-spacing:0.025em
}

.\!text-accento{
  --tw-text-opacity:1 !important;
  color:rgb(var(--accento) / var(--tw-text-opacity, 1)) !important
}

.\!text-confirm{
  --tw-text-opacity:1 !important;
  color:rgb(var(--confirm) / var(--tw-text-opacity, 1)) !important
}

.\!text-danger{
  --tw-text-opacity:1 !important;
  color:rgb(var(--danger) / var(--tw-text-opacity, 1)) !important
}

.\!text-ink-secondary{
  --tw-text-opacity:1 !important;
  color:rgb(var(--ink-secondary) / var(--tw-text-opacity, 1)) !important
}

.\!text-white{
  --tw-text-opacity:1 !important;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1)) !important
}

.text-accento{
  --tw-text-opacity:1;
  color:rgb(var(--accento) / var(--tw-text-opacity, 1))
}

.text-amber-text{
  --tw-text-opacity:1;
  color:rgb(var(--amber-text) / var(--tw-text-opacity, 1))
}

.text-confirm{
  --tw-text-opacity:1;
  color:rgb(var(--confirm) / var(--tw-text-opacity, 1))
}

.text-confirm-text{
  --tw-text-opacity:1;
  color:rgb(var(--confirm-text) / var(--tw-text-opacity, 1))
}

.text-danger{
  --tw-text-opacity:1;
  color:rgb(var(--danger) / var(--tw-text-opacity, 1))
}

.text-ink{
  --tw-text-opacity:1;
  color:rgb(var(--ink) / var(--tw-text-opacity, 1))
}

.text-ink-secondary{
  --tw-text-opacity:1;
  color:rgb(var(--ink-secondary) / var(--tw-text-opacity, 1))
}

.text-ink-secondary\/40{
  color:rgb(var(--ink-secondary) / 0.4)
}

.text-ink-secondary\/50{
  color:rgb(var(--ink-secondary) / 0.5)
}

.text-ink-secondary\/70{
  color:rgb(var(--ink-secondary) / 0.7)
}

.text-navy{
  --tw-text-opacity:1;
  color:rgb(var(--navy) / var(--tw-text-opacity, 1))
}

.text-white{
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.text-white\/75{
  color:rgb(255 255 255 / 0.75)
}

.text-white\/85{
  color:rgb(255 255 255 / 0.85)
}

.text-white\/90{
  color:rgb(255 255 255 / 0.9)
}

.underline{
  text-decoration-line:underline
}

.line-through{
  text-decoration-line:line-through
}

.decoration-dotted{
  text-decoration-style:dotted
}

.underline-offset-4{
  text-underline-offset:4px
}

.accent-accento{
  accent-color:rgb(var(--accento) / 1)
}

.opacity-40{
  opacity:0.4
}

.opacity-50{
  opacity:0.5
}

.opacity-60{
  opacity:0.6
}

.shadow-\[inset_3px_0_0_currentColor\]{
  --tw-shadow:inset 3px 0 0 currentColor;
  --tw-shadow-colored:inset 3px 0 0 var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-card{
  --tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.04);
  --tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-elevated{
  --tw-shadow:0 4px 16px -4px rgb(0 0 0 / 0.14);
  --tw-shadow-colored:0 4px 16px -4px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-lg{
  --tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-nav{
  --tw-shadow:0 -1px 0 0 rgb(var(--line)), 0 -8px 24px -12px rgb(0 0 0 / 0.12);
  --tw-shadow-colored:0 -1px 0 0 var(--tw-shadow-color), 0 -8px 24px -12px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-sm{
  --tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.ring-2{
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.ring-accento{
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(var(--accento) / var(--tw-ring-opacity, 1))
}

.filter{
  filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.backdrop-blur{
  --tw-backdrop-blur:blur(8px);
  -webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.transition{
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.transition-\[width\]{
  transition-property:width;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.transition-colors{
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.transition-transform{
  transition-property:transform;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.duration-150{
  transition-duration:150ms
}

.duration-200{
  transition-duration:200ms
}

.duration-300{
  transition-duration:300ms
}

.ease-in{
  transition-timing-function:cubic-bezier(0.4, 0, 1, 1)
}

.ease-out{
  transition-timing-function:cubic-bezier(0, 0, 0.2, 1)
}

.\[a-zA-Z\:\\-\\\.\]{
  a-z-a--z:\-\.
}

/* --- Barra di caricamento della navigazione --------------------------
   Con hx-boost ogni click e' una richiesta in background: senza un
   segnale visibile sembra che non stia succedendo niente ("momento
   morto"). La classe .htmx-indicator la accende/spegne da sola: htmx
   mette .htmx-request sull'indicatore per tutta la durata della
   richiesta. Position fixed in cima, non sposta nulla in pagina. */

.barra-caricamento {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100;
  pointer-events: none;
  overflow: hidden;
}

.barra-caricamento::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  background: #FAD505;
  animation: barra-caricamento 900ms ease-in-out infinite;
}

@keyframes barra-caricamento {
  0%   {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(350%);
  }
}

.open\:card[open]{
  border-radius:16px;
  border-width:1px;
  --tw-border-opacity:1;
  border-color:rgb(var(--line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity:1;
  background-color:rgb(var(--surface) / var(--tw-bg-opacity, 1));
  padding:1rem;
  --tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.04);
  --tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

@media (min-width: 768px){
  .md\:open\:card[open]{
    border-radius:16px;
    border-width:1px;
    --tw-border-opacity:1;
    border-color:rgb(var(--line) / var(--tw-border-opacity, 1));
    --tw-bg-opacity:1;
    background-color:rgb(var(--surface) / var(--tw-bg-opacity, 1));
    padding:1rem;
    --tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.04);
    --tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);
    box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }
}

.file\:mr-3::file-selector-button{
  margin-right:0.75rem
}

.file\:rounded-md::file-selector-button{
  border-radius:0.375rem
}

.file\:border-0::file-selector-button{
  border-width:0px
}

.file\:bg-navy::file-selector-button{
  --tw-bg-opacity:1;
  background-color:rgb(var(--navy) / var(--tw-bg-opacity, 1))
}

.file\:px-3::file-selector-button{
  padding-left:0.75rem;
  padding-right:0.75rem
}

.file\:py-1\.5::file-selector-button{
  padding-top:0.375rem;
  padding-bottom:0.375rem
}

.file\:text-sm::file-selector-button{
  font-size:0.875rem;
  line-height:1.25rem
}

.file\:font-medium::file-selector-button{
  font-weight:500
}

.file\:text-white::file-selector-button{
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.first\:pt-1:first-child{
  padding-top:0.25rem
}

.last\:border-0:last-child{
  border-width:0px
}

.last\:pb-0:last-child{
  padding-bottom:0px
}

.open\:basis-full[open]{
  flex-basis:100%
}

.empty\:mt-0:empty{
  margin-top:0px
}

.hover\:border-accento\/40:hover{
  border-color:rgb(var(--accento) / 0.4)
}

.hover\:border-ink\/30:hover{
  border-color:rgb(var(--ink) / 0.3)
}

.hover\:\!bg-danger-bg:hover{
  --tw-bg-opacity:1 !important;
  background-color:rgb(var(--danger-bg) / var(--tw-bg-opacity, 1)) !important
}

.hover\:\!bg-navy:hover{
  --tw-bg-opacity:1 !important;
  background-color:rgb(var(--navy) / var(--tw-bg-opacity, 1)) !important
}

.hover\:bg-accento\/10:hover{
  background-color:rgb(var(--accento) / 0.1)
}

.hover\:bg-accento\/\[0\.06\]:hover{
  background-color:rgb(var(--accento) / 0.06)
}

.hover\:bg-confirm-bg:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--confirm-bg) / var(--tw-bg-opacity, 1))
}

.hover\:bg-danger-bg:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--danger-bg) / var(--tw-bg-opacity, 1))
}

.hover\:bg-line\/20:hover{
  background-color:rgb(var(--line) / 0.2)
}

.hover\:bg-line\/30:hover{
  background-color:rgb(var(--line) / 0.3)
}

.hover\:bg-line\/40:hover{
  background-color:rgb(var(--line) / 0.4)
}

.hover\:bg-paper:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--paper) / var(--tw-bg-opacity, 1))
}

.hover\:bg-white\/10:hover{
  background-color:rgb(255 255 255 / 0.1)
}

.hover\:\!text-danger:hover{
  --tw-text-opacity:1 !important;
  color:rgb(var(--danger) / var(--tw-text-opacity, 1)) !important
}

.hover\:\!text-white:hover{
  --tw-text-opacity:1 !important;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1)) !important
}

.hover\:text-accento:hover{
  --tw-text-opacity:1;
  color:rgb(var(--accento) / var(--tw-text-opacity, 1))
}

.hover\:text-ink:hover{
  --tw-text-opacity:1;
  color:rgb(var(--ink) / var(--tw-text-opacity, 1))
}

.hover\:text-white:hover{
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.hover\:underline:hover{
  text-decoration-line:underline
}

.hover\:opacity-100:hover{
  opacity:1
}

.focus\:bg-surface:focus{
  --tw-bg-opacity:1;
  background-color:rgb(var(--surface) / var(--tw-bg-opacity, 1))
}

.focus\:outline-none:focus{
  outline:2px solid transparent;
  outline-offset:2px
}

.focus\:ring-1:focus{
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus\:ring-accento:focus{
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(var(--accento) / var(--tw-ring-opacity, 1))
}

.focus-visible\:ring-white:focus-visible{
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(255 255 255 / var(--tw-ring-opacity, 1))
}

.active\:scale-\[0\.99\]:active{
  --tw-scale-x:0.99;
  --tw-scale-y:0.99;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.group[open] .group-open\:rotate-180{
  --tw-rotate:180deg;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.group:hover .group-hover\:text-ink-secondary{
  --tw-text-opacity:1;
  color:rgb(var(--ink-secondary) / var(--tw-text-opacity, 1))
}

.peer:checked ~ .peer-checked\:bg-navy{
  --tw-bg-opacity:1;
  background-color:rgb(var(--navy) / var(--tw-bg-opacity, 1))
}

.peer:checked ~ .peer-checked\:text-white{
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

@media not all and (min-width: 640px){
  .max-sm\:sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border-width:0
  }

  .max-sm\:hidden{
    display:none
  }

  .max-sm\:w-12{
    width:3rem
  }

  .max-sm\:w-full{
    width:100%
  }

  .max-sm\:\!px-0{
    padding-left:0px !important;
    padding-right:0px !important
  }
}

@media (max-width: 359px){
  .max-\[359px\]\:sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border-width:0
  }

  .max-\[359px\]\:w-11{
    width:2.75rem
  }

  .max-\[359px\]\:\!px-0{
    padding-left:0px !important;
    padding-right:0px !important
  }
}

@media (min-width: 640px){
  .sm\:col-span-2{
    grid-column:span 2 / span 2
  }

  .sm\:inline{
    display:inline
  }

  .sm\:hidden{
    display:none
  }

  .sm\:grid-cols-2{
    grid-template-columns:repeat(2, minmax(0, 1fr))
  }

  .sm\:grid-cols-3{
    grid-template-columns:repeat(3, minmax(0, 1fr))
  }

  .sm\:grid-cols-5{
    grid-template-columns:repeat(5, minmax(0, 1fr))
  }

  .sm\:grid-cols-\[1fr_auto_6rem\]{
    grid-template-columns:1fr auto 6rem
  }

  .sm\:gap-2{
    gap:0.5rem
  }

  .sm\:gap-3{
    gap:0.75rem
  }

  .sm\:divide-x > :not([hidden]) ~ :not([hidden]){
    --tw-divide-x-reverse:0;
    border-right-width:calc(1px * var(--tw-divide-x-reverse));
    border-left-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))
  }

  .sm\:divide-y-0 > :not([hidden]) ~ :not([hidden]){
    --tw-divide-y-reverse:0;
    border-top-width:calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width:calc(0px * var(--tw-divide-y-reverse))
  }

  .sm\:\!px-4{
    padding-left:1rem !important;
    padding-right:1rem !important
  }
}

@media (min-width: 768px){
  .md\:static{
    position:static
  }

  .md\:bottom-6{
    bottom:1.5rem
  }

  .md\:left-auto{
    left:auto
  }

  .md\:right-4{
    right:1rem
  }

  .md\:top-3{
    top:0.75rem
  }

  .md\:z-auto{
    z-index:auto
  }

  .md\:mx-0{
    margin-left:0px;
    margin-right:0px
  }

  .md\:block{
    display:block
  }

  .md\:flex{
    display:flex
  }

  .md\:hidden{
    display:none
  }

  .md\:h-80{
    height:20rem
  }

  .md\:max-h-\[75vh\]{
    max-height:75vh
  }

  .md\:max-h-\[80vh\]{
    max-height:80vh
  }

  .md\:min-h-screen{
    min-height:100vh
  }

  .md\:w-60{
    width:15rem
  }

  .md\:max-w-lg{
    max-width:32rem
  }

  .md\:max-w-sm{
    max-width:24rem
  }

  .md\:shrink-0{
    flex-shrink:0
  }

  .md\:translate-y-0{
    --tw-translate-y:0px;
    transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .md\:grid-cols-2{
    grid-template-columns:repeat(2, minmax(0, 1fr))
  }

  .md\:grid-cols-3{
    grid-template-columns:repeat(3, minmax(0, 1fr))
  }

  .md\:grid-cols-4{
    grid-template-columns:repeat(4, minmax(0, 1fr))
  }

  .md\:flex-col{
    flex-direction:column
  }

  .md\:items-center{
    align-items:center
  }

  .md\:justify-center{
    justify-content:center
  }

  .md\:rounded-2xl{
    border-radius:1rem
  }

  .md\:rounded-xl{
    border-radius:16px
  }

  .md\:border-r{
    border-right-width:1px
  }

  .md\:border-t{
    border-top-width:1px
  }

  .md\:border-line{
    --tw-border-opacity:1;
    border-color:rgb(var(--line) / var(--tw-border-opacity, 1))
  }

  .md\:bg-surface{
    --tw-bg-opacity:1;
    background-color:rgb(var(--surface) / var(--tw-bg-opacity, 1))
  }

  .md\:px-0{
    padding-left:0px;
    padding-right:0px
  }

  .md\:px-10{
    padding-left:2.5rem;
    padding-right:2.5rem
  }

  .md\:px-3{
    padding-left:0.75rem;
    padding-right:0.75rem
  }

  .md\:py-6{
    padding-top:1.5rem;
    padding-bottom:1.5rem
  }

  .md\:py-9{
    padding-top:2.25rem;
    padding-bottom:2.25rem
  }

  .md\:pb-9{
    padding-bottom:2.25rem
  }

  .md\:pt-0{
    padding-top:0px
  }

  .md\:pt-2{
    padding-top:0.5rem
  }

  .md\:pt-6{
    padding-top:1.5rem
  }

  .md\:opacity-0{
    opacity:0
  }

  .md\:opacity-100{
    opacity:1
  }

  .md\:open\:basis-full[open]{
    flex-basis:100%
  }

  .md\:open\:\!p-0[open]{
    padding:0px !important
  }

  .group[open] .md\:group-open\:m-3{
    margin:0.75rem
  }
}

@media (min-width: 1024px){
  .lg\:grid-cols-2{
    grid-template-columns:repeat(2, minmax(0, 1fr))
  }
}

@media (min-width: 1280px){
  .xl\:max-w-3xl{
    max-width:48rem
  }

  .xl\:max-w-none{
    max-width:none
  }
}

.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{
  display:none
}

@media not all and (min-width: 640px){
  .max-sm\:\[\&\:not\(\[open\]\)\]\:flex-1:not([open]){
    flex:1 1 0%
  }
}

.\[\&_p\]\:mb-2 p{
  margin-bottom:0.5rem
}

.\[\&_strong\]\:font-semibold strong{
  font-weight:600
}