/* Graphorum · le Impostazioni in una struttura sola (c-tu.js), nel tema del guscio: la stessa testata del foglio, le
   stesse righe di Tu (icona nel tondo colorato, titolo, riga di stato, freccia), le stesse misure di testo e lo stesso
   spazio, in chiaro e in scuro, sul telefono e sul computer, guscio nuovo o interfaccia classica.
   Tre viste (#tab-settings[data-view]): «home» (la ricerca e i sette gruppi), «group» (le pagine di un gruppo), «page»
   (i campi di sempre). Regole del capo (polish.css): la pagina è il foglio, i gruppi si separano con una riga sottile e
   lo spazio, nessun riquadro dietro caselle, pulsanti e linguette, un solo arrotondamento, pulsanti e caselle della
   stessa riga alla stessa altezza. Tutte le misure in rem: le sei misure del testo (Aspetto) le fanno crescere insieme.
   I selettori partono da #tab-settings: qui vincono sulle regole vecchie delle Impostazioni (style.css, polish.css). */

/* ------------------------------------------------------------------ il contenitore e le tre viste */
#tab-settings:not(.hidden) { display: flex !important; flex-direction: column; gap: 0; column-gap: 0; }
#tab-settings > * { grid-column: auto !important; grid-row: auto !important; min-width: 0; }
#tab-settings > .set-reg { display: none !important; }
html.c-shell #tab-settings { padding-inline: 1.429rem; }
@media (min-width: 861px) { html.c-shell #tab-settings { padding-inline: 1.714rem; } }
/* una misura di lettura: le righe e i moduli non si allungano su tutto lo schermo; le pagine con tabelle più larghe */
#tab-settings { --set-w: 46rem; }
#tab-settings[data-view="page"]:has(> .set-pane:is([data-pane="models"], [data-pane="users"], [data-pane="company"], [data-pane="audit"],
  [data-pane="modello"], [data-pane="providers"], [data-pane="externals"], [data-pane="social"], [data-pane="connect"]):not(.hidden)) { --set-w: 72rem; }
#tab-settings > :is(.set-head, .set-home, .set-group, .set-note, .set-subtabs, .set-pane) { width: 100%; max-width: var(--set-w) !important; }

/* ------------------------------------------------------------------ la testata (interfaccia classica; nel guscio è quella del foglio) */
#tab-settings > .set-head { display: block; margin: 0 0 1.143rem; }
#tab-settings > .set-head h2 { margin: 0; font: 500 1.857rem/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
#tab-settings > .set-head .sub { margin: .286rem 0 0; max-width: none; font: 400 1.036rem/1.4 var(--font); color: var(--muted); }
#tab-settings > .set-head .sub:empty { display: none; }
#tab-settings > .set-head .set-back { display: inline-flex; margin: 0 0 .429rem -.429rem; }
#tab-settings > .set-head .set-back.hidden { display: none; }
html.c-shell #tab-settings > .set-head { display: none; }

/* ------------------------------------------------------------------ le righe: pagina iniziale e pagina di un gruppo */
#tab-settings .c-tu-find { margin: 0 0 .571rem; }
.set-out { margin-top: .571rem; border-top: 1px solid var(--line); }
html.c-shell .set-out { display: none; }                 /* nel guscio «Esci» sta in fondo a Tu */
.set-sec { margin: 1.429rem 0 .143rem; }
.set-group > .set-sec:first-child { margin-top: .286rem; }
.set-apart { margin-top: 1.143rem; border-top: 1px solid var(--line); }
.c-row.set-danger .t1 { color: var(--danger); }
/* il gruppo aperto, in Tu accanto al foglio (computer) */
.c-row.on .t1, .c-row.on > svg:last-child { color: var(--c-accent-text); }
/* in Tu, mentre cerchi: il profilo, la casella e i risultati (Notifiche, il PC ed Esci tornano quando la svuoti) */
.c-tu .c-sbody.c-finding > :not(.c-me-head):not(.c-tu-find) { display: none; }
/* dove sta un risultato della ricerca: i pezzi separati da «›» (ognuno si traduce da solo) */
.set-where > span + span::before { content: "›"; margin: 0 .357rem; color: var(--c-faint); }

/* ------------------------------------------------------------------ una pagina: «si salvano da sole» e le linguette */
#tab-settings > .set-note { margin: 0 0 .571rem; font: 400 .929rem/1.45 var(--font); color: var(--muted); }
#tab-settings > .set-note .save-state { font: inherit; }
/* le linguette della pagina come quelle del foglio: le voci da sole, quella scelta in blu con il filo sotto, a capo
   invece di uscire dallo schermo (anche una voce lunga va a capo: mai tagliata) */
#tab-settings > .set-subtabs:not(.hidden) { display: flex !important; flex-wrap: wrap !important; column-gap: 1.286rem !important; row-gap: 0 !important;
  margin: 0 0 .286rem !important; padding: 0 !important; overflow: visible !important; border: 0 !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
#tab-settings > .set-subtabs button { position: relative; flex: 0 1 auto; max-width: 100%; height: auto; min-height: 2.86rem !important; padding: .55rem 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--muted) !important;
  font: 500 1.071rem/1.3 var(--font) !important; text-align: left; white-space: normal !important; overflow-wrap: anywhere; }
#tab-settings > .set-subtabs button:hover:not(.on) { color: var(--ink) !important; }
#tab-settings > .set-subtabs button.on { color: var(--c-accent-text) !important; font-weight: 600 !important; box-shadow: none !important; }
#tab-settings > .set-subtabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px; background: var(--accent); }
#tab-settings > .set-subtabs button:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
/* sul computer le linguette restano in vista mentre scorri la pagina */
@media (min-width: 861px) {
  html.c-shell #tab-settings > .set-subtabs:not(.hidden) { position: sticky; top: 0; z-index: 3; background: var(--surface) !important; }
}

/* ------------------------------------------------------------------ una pagina: i campi di sempre, nel tema nuovo */
#tab-settings > .set-pane:not(.hidden) { display: block !important; columns: auto !important; column-count: auto !important; }
#tab-settings .set-pane > * { margin: 0 !important; grid-row-end: auto !important; }
#tab-settings .set-pane > .q-hide, #tab-settings .set-pane > .sub-off, #tab-settings .set-pane [data-subhost] > .sub-off { display: none !important; }
#tab-settings .set-pane[data-pane="links"] > .links-tabs { display: none !important; }    /* le due viste sono due pagine */
/* ogni gruppo di campi: una riga sottile sopra e lo spazio, il testo allineato al titolo del foglio (niente riquadri) */
#tab-settings .set-pane :is(.panel, .registry) { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 1.286rem 0 1.429rem !important; }
#tab-settings .set-pane :is(.panel, .registry) :is(.panel, .registry) { border-top: 0 !important; padding: 0 !important; }
#tab-settings .set-pane > .set-top,
#tab-settings .set-pane > [data-subhost] > .set-top { border-top: 0 !important; padding-top: .571rem !important; }
#tab-settings .set-pane > .panel.form-grid, #tab-settings .set-pane .form-grid { grid-template-columns: minmax(0, 1fr) !important; row-gap: .714rem; column-gap: 0; }
#tab-settings .set-pane > .panel.form-grid > * { grid-column: 1 / -1 !important; }
#tab-settings .set-pane [data-subhost] { display: block; }
/* i titoli: come una riga di Tu (titolo); quello uguale al titolo del foglio o alla linguetta non si ripete */
#tab-settings .set-pane :is(legend, .panel > h3, .card-head h3, .us-head h3) { margin: 0 0 .143rem; padding: 0; font: 600 1.214rem/1.3 var(--font) !important;
  letter-spacing: -.005em; color: var(--ink); overflow-wrap: anywhere; }
#tab-settings .set-pane legend { float: left; width: 100%; }
#tab-settings .set-pane legend + * { clear: both; }
#tab-settings .set-pane .set-dup { display: none !important; }
#tab-settings .set-pane .set-dup + * { clear: both; }
/* i sottotitoli dentro un gruppo (Email, WhatsApp, Il resto…): piccoli, in maiuscolo, con lo spazio sopra */
#tab-settings .set-pane h4 { margin: 1rem 0 0 !important; padding: 0 !important; border: 0 !important; font: 600 .857rem/1.2 var(--font) !important;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted) !important; }
/* le spiegazioni: come la seconda riga di Tu */
#tab-settings .set-pane :is(.hint, .sub) { max-width: 44rem; margin: 0; font: 400 1.036rem/1.5 var(--font) !important; color: var(--muted); }
#tab-settings .set-pane .meta { font-size: .929rem; line-height: 1.45; }
#tab-settings .set-pane .card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .714rem 1rem; margin: 0 0 .571rem; }
#tab-settings .set-pane .card-head > div:first-child { flex: 1 1 18rem; min-width: 0; }
#tab-settings .set-pane .card-head .hint { margin-top: .143rem; }
/* le etichette dei campi e i campi: una misura sola, la stessa altezza dei pulsanti della riga */
#tab-settings .set-pane label:not(.check):not(.lk-color) { font: 500 1rem/1.35 var(--font) !important; color: var(--ink-2); }
#tab-settings .set-pane :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"]), select) {
  min-height: var(--c-ctl, 2.75rem); font-size: 1.071rem; }
#tab-settings .set-pane textarea { font-size: 1.071rem; line-height: 1.55; }
#tab-settings .set-pane .row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .857rem; }
#tab-settings .set-pane .row > .field { flex: 1 1 13rem; min-width: 0; }
#tab-settings .set-pane .row > .field.narrow { flex: 0 1 8rem; }
#tab-settings .set-pane .field:not(.soc-set-pick) { display: grid; gap: .429rem; }
#tab-settings .set-pane .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .571rem; }
/* le spunte: righe della lista, separate da una riga sottile, il testo a tutta larghezza (va a capo, mai tagliato) */
#tab-settings .set-pane label.check { display: flex; align-items: flex-start; gap: .857rem; margin: 0; padding: .714rem 0; min-height: var(--c-ctl, 2.75rem);
  border-top: 1px solid var(--line); font: 400 1.071rem/1.45 var(--font) !important; color: var(--ink); justify-self: stretch; overflow-wrap: anywhere; }
#tab-settings .set-pane label.check + label.check { margin-top: -.714rem; }
#tab-settings .set-pane label.check input { width: 1.286rem; height: 1.286rem; margin: .143rem 0 0; flex: none; }
#tab-settings .set-pane label.check .meta { font-size: .929rem; }
#tab-settings .set-pane :is(h4, .hint, p) + label.check { border-top: 0; }
/* i pulsanti della pagina: la stessa altezza delle caselle; i piccoli tutti uguali */
#tab-settings .set-pane button:not(.c-chip):not(.c-row):not([data-c-shape]):not(.linkish) { font-size: 1.036rem; }
#tab-settings .set-pane button.small { font-size: .964rem; }

/* le scelte a pulsanti (Ombre, Tema…) e le azioni di una riga vanno a capo invece di uscire dalla pagina, a ogni misura */
#tab-settings .set-pane .seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; overflow: visible; }
#tab-settings .set-pane .cn-actions button { white-space: normal; max-width: 100%; }

/* i numeri in breve (Backup: adesso, ultimo, prossimo): sulla pagina, senza riquadri */
#tab-settings .set-pane .fb-sizes { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .714rem 1.429rem; }
#tab-settings .set-pane .fb-sizes > div { padding: 0; background: none; border-radius: 0; }
#tab-settings .set-pane .fb-sizes strong { font: 600 1.286rem/1.25 var(--font); }

/* ------------------------------------------------------------------ Aspetto e lingua › Barra e aree (guscio C) */
#look-cbar .set-cbar .c-bp { padding-top: .857rem; }
#look-cbar .set-cbar .c-blk:first-of-type { border-top: 0; }
#look-cbar .set-shape { display: grid; gap: .714rem; padding-top: 1rem; border-top: 1px solid var(--line); }
#look-cbar .set-shape.hidden { display: none; }
#look-cbar .c-seg { max-width: 24rem; }

/* ------------------------------------------------------------------ telefono */
@media (max-width: 860px) {
  /* Tu e le Impostazioni salgono fino in cima (sotto la linguetta dei lavori, se c'è: --c-slot-h la misura guscio.js) */
  html.c-shell body.c-main-full:not(.c-main-behind) main:has(> #tab-settings:not(.hidden)),
  html.c-shell .c-sheet.c-tu.full:not(.behind) {
    top: calc(env(safe-area-inset-top, 0px) + var(--c-slot-h, 0px) + min(.857rem, var(--c-slot-h, 0px) * 100)); }
  #tab-settings > .set-head h2 { font-size: 1.643rem; }
  #tab-settings .set-pane .card-head > :not(div:first-child) { max-width: 100%; }
}

/* ------------------------------------------------------------------ le tre viste (in fondo e più forti: vincono su tutto) */
#tab-settings#tab-settings:not([data-view="home"]) > .set-home,
#tab-settings#tab-settings:not([data-view="group"]) > .set-group,
#tab-settings#tab-settings:not([data-view="page"]) > :is(.set-note, .set-subtabs, .set-pane) { display: none !important; }