/* [PACCHETTO F] Anteprime curate dei post senza file e pagina «Collega account». Colori e caratteri del brand
   Graphorum (blu #2F6BFF, azzurro #38BDF8, Space Grotesk per i titoli); chiaro e scuro dai token della piattaforma. */

/* ---------------------------------------------------------------- anteprima di un post senza foto sul PC */
.sp-miss { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .55rem; padding: .95rem; text-align: left;
  overflow: hidden; isolation: isolate; color: var(--ink);
  background: linear-gradient(158deg, color-mix(in srgb, #2f6bff 15%, var(--surface-2)) 0%,
                                      color-mix(in srgb, #38bdf8 9%, var(--surface-2)) 62%, var(--surface-2) 100%); }
/* linee di progetto: una griglia leggera che svanisce, e un nodo con i suoi collegamenti */
.sp-miss::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .7;
  background-image: linear-gradient(color-mix(in srgb, #2f6bff 13%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, #2f6bff 13%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(130% 95% at 100% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(130% 95% at 100% 0%, #000 0%, transparent 72%); }
.sp-miss::after { content: ""; position: absolute; right: -2.2rem; top: -2.2rem; width: 8.5rem; height: 8.5rem; z-index: -1;
  border-radius: 50%; border: 1px solid color-mix(in srgb, #2f6bff 30%, transparent);
  box-shadow: 0 0 0 1.4rem color-mix(in srgb, #38bdf8 7%, transparent), 0 0 0 2.8rem color-mix(in srgb, #38bdf8 4%, transparent); }
.sp-miss-top { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; padding: .22rem .6rem .22rem .45rem;
  border-radius: var(--radius); font: 600 var(--fs-2xs)/1.2 var(--font); letter-spacing: .05em; text-transform: uppercase; color: #2f6bff;
  background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid color-mix(in srgb, #2f6bff 18%, transparent); }
.sp-miss-top svg { width: var(--ic-xs); height: var(--ic-xs); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-miss strong { margin-top: auto; font: 400 var(--fs-lg)/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sp-miss small { display: flex; gap: .45rem; align-items: flex-start; font-size: var(--fs-2xs); line-height: 1.38; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sp-miss .st-spin { display: inline-block; width: .8rem; height: .8rem; border-width: 2px; vertical-align: -.1rem; margin-right: .35rem;
  border-color: color-mix(in srgb, #2f6bff 25%, transparent); border-top-color: #2f6bff; }
.sp-miss.big { position: relative; min-height: min(26rem, 62vh); padding: 1.5rem; border-radius: inherit; }
.sp-miss.big strong { font-size: var(--fs-3xl); -webkit-line-clamp: 5; }
.sp-miss.big small { font-size: var(--fs-base); -webkit-line-clamp: 4; max-width: 34rem; }
.pc-media .sp-miss { border-radius: inherit; }
.pc-media .sp-miss strong { font-size: var(--fs-md); }
:root[data-theme="dark"] .sp-miss-top { color: #7dd3fc; border-color: color-mix(in srgb, #38bdf8 28%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sp-miss-top { color: #7dd3fc; border-color: color-mix(in srgb, #38bdf8 28%, transparent); }
}

/* ---------------------------------------------------------------- Impostazioni › Collega account */
.cn-wrap { display: grid; gap: 1.1rem; max-width: 72rem; min-width: 0; }
.cn-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .8rem 1.2rem; }
.cn-head h2 { margin: 0 0 .25rem; font: 400 var(--fs-3xl)/1.15 var(--font-display); letter-spacing: -.02em; }
.cn-head .hint { margin: 0; max-width: 44rem; }
.cn-hub { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: var(--radius); font-size: var(--fs-sm);
  font-weight: 600; white-space: nowrap; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.cn-hub svg { width: var(--ic-xs); height: var(--ic-xs); fill: none; stroke: currentColor; stroke-width: 2; }
.cn-hub.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); }
.cn-hub.warn { color: var(--warn); border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }

.cn-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.15rem 1.2rem;
  box-shadow: var(--e1, none); min-width: 0; }
.cn-sec-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.cn-sec-head h3 { margin: 0; font: 500 var(--fs-lg)/1.2 var(--font-display); letter-spacing: -.01em; }
.cn-sec-head .hint { margin: .15rem 0 0; }
.cn-mark { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--radius);
  font: 600 var(--fs-sm)/1 var(--font-display); letter-spacing: -.01em; color: var(--net);
  background: color-mix(in srgb, var(--net) 11%, var(--surface)); border: 1px solid color-mix(in srgb, var(--net) 22%, var(--line)); }
:root[data-theme="dark"] .cn-mark { color: color-mix(in srgb, var(--net) 55%, #fff); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cn-mark { color: color-mix(in srgb, var(--net) 55%, #fff); } }

.cn-methods { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: .8rem; }
.cn-method, .cn-net { position: relative; display: flex; flex-direction: column; gap: .5rem; min-width: 0; padding: 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.cn-method h4, .cn-net h4 { margin: 0; font: 500 var(--fs-md)/1.25 var(--font-display); }
.cn-method p, .cn-net p { margin: 0; font-size: var(--fs-base); line-height: 1.45; color: var(--ink-2); }
.cn-method.main { background: linear-gradient(160deg, color-mix(in srgb, #2f6bff 9%, var(--surface)) 0%, var(--surface) 70%);
  border-color: color-mix(in srgb, #2f6bff 32%, var(--line)); }
.cn-tag { align-self: flex-start; padding: .15rem .55rem; border-radius: var(--radius); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #fff; background: #2f6bff; }
.cn-state { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--muted) !important; }
.cn-state svg { width: var(--ic-sm); height: var(--ic-sm); fill: none; stroke: currentColor; stroke-width: 2.4; }
.cn-state.on { color: color-mix(in srgb, var(--ok) 62%, var(--ink)) !important; }   /* leggibile anche in chiaro */
.cn-state.warn, .cn-note.warn { color: var(--warn) !important; font-weight: 500; }
.cn-note { font-size: var(--fs-sm) !important; color: var(--muted) !important; }
.cn-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .35rem; }
.cn-actions button { display: inline-flex; align-items: center; gap: .45rem; }
.cn-actions svg { width: var(--ic-sm); height: var(--ic-sm); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cn-actions button:disabled { opacity: .55; cursor: not-allowed; }

.cn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: .8rem; }
.cn-net-head { display: flex; align-items: center; gap: .65rem; }
.cn-net.on { background: color-mix(in srgb, var(--ok) 5%, var(--surface-2)); border-color: color-mix(in srgb, var(--ok) 28%, var(--line)); }
.cn-alts { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .7rem; padding-top: .55rem; margin-top: .1rem;
  border-top: 1px dashed var(--line); font-size: var(--fs-sm); }
button.linklike { all: unset; cursor: pointer; color: var(--accent); font-weight: 600; font-size: var(--fs-sm); }
button.linklike:hover { text-decoration: underline; }
button.linklike:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }

.cn-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.cn-reqs li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; padding: .55rem .75rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface-2); font-size: var(--fs-base); min-width: 0; }
.cn-reqs .meta { overflow-wrap: anywhere; }
.cn-pill { margin-left: auto; padding: .1rem .55rem; border-radius: var(--radius); font-size: var(--fs-2xs); font-weight: 600; color: var(--muted);
  background: var(--surface-3); }
.cn-pill.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
legend .cn-pill { margin-left: .4rem; }

.cn-creator > summary { cursor: pointer; display: flex; flex-direction: column; gap: .15rem; list-style: none; }
.cn-creator > summary::-webkit-details-marker { display: none; }
.cn-creator > summary span { font: 500 var(--fs-lg)/1.25 var(--font-display); }
.cn-creator > summary span::after { content: " ▾"; color: var(--muted); font-size: .8em; }
.cn-creator[open] > summary { margin-bottom: .9rem; }
.cn-app { border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .85rem .5rem; margin: 0 0 .7rem; min-width: 0; }
.cn-app legend { font-weight: 600; padding: 0 .35rem; }
.cn-app .row, #cn-apps > .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; }
#cn-apps .field { display: grid; gap: .25rem; font-size: var(--fs-sm); min-width: 0; }
#cn-apps .field input { width: 100%; min-width: 0; }
.cn-copy { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; min-width: 0; }
.cn-copy code { flex: 1; min-width: 0; padding: .45rem .6rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line);
  font-size: var(--fs-sm); overflow-wrap: anywhere; }
.cn-sub { margin: 1.2rem 0 .3rem; font: 500 var(--fs-md)/1.2 var(--font-display); }
.cn-once { margin-top: .7rem; padding: .75rem .85rem; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--amber) 50%, var(--line));
  background: color-mix(in srgb, var(--amber) 9%, var(--surface)); }
.cn-once p { margin: 0 0 .5rem; }

.cn-sheet-card { width: min(32rem, 100%); }
.cn-sheet .field { display: grid; gap: .3rem; margin-top: .8rem; font-weight: 600; font-size: var(--fs-base); }
.cn-sheet textarea, .cn-sheet input { width: 100%; font-weight: 400; }
.cn-sheet .icon-btn svg { width: var(--ic-sm); height: var(--ic-sm); }

@media (max-width: 960px) {
  .cn-methods { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cn-head h2 { font-size: var(--fs-2xl); }
  .cn-section { padding: .95rem .85rem 1rem; }
  .cn-grid { grid-template-columns: 1fr; }
  .cn-actions button { flex: 1 1 auto; justify-content: center; }
  .cn-copy { flex-wrap: wrap; }
}

/* dentro Impostazioni i titoletti h4 sono maiuscoletti con una riga: qui no, sono i nomi delle schede */
#tab-settings .set-pane .cn-wrap h4 { text-transform: none; letter-spacing: -.01em; border: 0; padding: 0; margin: 0;
  font: 500 var(--fs-md)/1.25 var(--font-display); color: var(--ink); }
#tab-settings .set-pane .cn-wrap h4::before, #tab-settings .set-pane .cn-wrap h4::after { display: none; }
#tab-settings .set-pane .cn-wrap h4.cn-sub { margin: 1.2rem 0 .3rem; }