/* La pagina del marchio (/marchio), nella stessa lingua del sito (sito.css): campo quieto in
   apertura, sezioni chiare e scure che si alternano, tessere dei colori. I colori delle tessere e dei
   loghi li aggiunge build.py dai token. Ogni valore viene dai token (tests/una_fonte.rs). */
.m-apertura {
  min-height: 86svh; display: grid; align-content: center; justify-items: center; gap: var(--space-l); text-align: center;
  padding-top: calc(var(--control-tasto) + var(--space-sezione)) !important;
  background:
    radial-gradient(60% 55% at 18% 22%, var(--challenge-field), transparent 70%),
    radial-gradient(55% 50% at 86% 18%, var(--choice-field-2), transparent 70%),
    radial-gradient(65% 60% at 80% 88%, var(--change-field), transparent 72%),
    var(--bg);
}
.m-nome { width: min(100%, var(--width-pagina)); }
.m-nome .logo { display: block; width: min(100%, 11em); height: auto; margin-inline: auto; font-size: var(--type-enorme); color: var(--text); }
.m-domanda { font-size: var(--type-sottotitolo); font-weight: 700; }
.m-apertura .voce { margin-inline: auto; }
.m-sezione { padding: var(--space-sezione) var(--space-margine); }
.m-dentro { display: grid; gap: var(--space-l); width: min(100%, var(--width-pagina)); margin-inline: auto; }
.m-scura { background: var(--night); color: var(--on-night); --text: var(--on-night); --muted: var(--night-muted); --tinta-sezione: var(--night);
  /* Sullo scuro le parole brillano con gli accenti, non con i campi. */
  --vivo-challenge: var(--challenge); --vivo-choice: var(--choice); --vivo-change: var(--change); --vivo-chance: var(--chance); }
.m-scura .occhiello, .m-scura .voce { color: var(--night-muted); }

.m-claim { display: grid; gap: var(--space-xs); font-size: var(--type-enorme); font-weight: 800; letter-spacing: var(--tracking-gigante); line-height: 1; }
.m-claim .logo { width: min(100%, 11em); height: auto; color: var(--text); }
.m-completamenti { display: grid; gap: var(--space-s); margin-top: var(--space-l); }
.m-completamenti li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: var(--space-xs) var(--space-m); padding-top: var(--space-s); border-top: 1px solid var(--separator); font-size: var(--type-sottotitolo); font-weight: 800; letter-spacing: var(--tracking-titolo); }
.m-c-nome .logo { height: .78em; width: auto; color: var(--text); }
.m-c-parola { background-clip: text; -webkit-background-clip: text; color: transparent; }
.m-c-it { grid-column: 1 / -1; font-size: var(--type-nota); font-weight: 400; letter-spacing: 0; color: var(--muted); }
.m-c-challenge .m-c-parola { background-image: linear-gradient(160deg, var(--vivo-challenge), var(--challenge-field-2)); }
.m-c-choice .m-c-parola { background-image: linear-gradient(160deg, var(--vivo-choice), var(--choice-field-2)); }
.m-c-change .m-c-parola { background-image: linear-gradient(160deg, var(--vivo-change), var(--change-field-2)); }
.m-c-chance .m-c-parola { background-image: linear-gradient(160deg, var(--vivo-chance), var(--chance-field-2)); }

.m-tessere { display: grid; gap: var(--space-m); margin-top: var(--space-l); }
.m-tessera { display: grid; gap: var(--space-xs); padding: var(--space-xs); border-radius: var(--radius-xl); background: color-mix(in oklab, var(--on-night) 6%, transparent); }
.m-campo { display: grid; gap: var(--space-xxs); min-height: calc(var(--control-tasto) * 2.4); align-content: end; padding: var(--space-l); border-radius: calc(var(--radius-xl) - var(--space-xs)); color: var(--on-field); }
.m-campo b { font-size: var(--type-sezione); letter-spacing: var(--tracking-titolo); hyphens: auto; overflow-wrap: anywhere; }
.m-en { font-size: var(--type-micro); font-weight: 800; letter-spacing: var(--tracking-occhiello); text-transform: uppercase; opacity: .85; }
.m-dom { font-size: var(--type-nota); opacity: .9; }
.m-accento, .m-codici { padding: 0 var(--space-s); font-size: var(--type-nota); color: var(--night-muted); }
.m-accento { display: flex; align-items: center; gap: var(--space-xs); }
.m-accento i { width: 1em; height: 1em; border-radius: 50%; }
.m-codici { display: grid; padding-bottom: var(--space-xs); font-variant-numeric: tabular-nums; }

.m-loghi { display: grid; gap: var(--space-m); margin-top: var(--space-l); }
.m-loghi figure { display: grid; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-leggera); }
.m-logo-area { display: grid; place-items: center; min-height: calc(var(--control-tasto) * 3.4); padding: var(--space-xl); }
.m-logo-area .logo { width: min(100%, 14em); height: auto; }
.m-segno .m-logo-area { background: var(--night); }
.m-segno img { width: calc(var(--control-tasto) * 1.7); height: auto; border-radius: var(--radius-l); }
.m-loghi figcaption { display: grid; gap: var(--space-xxs); padding: var(--space-m) var(--space-l); background: var(--surface); color: var(--muted); font-size: var(--type-nota); }
.m-loghi figcaption b { color: var(--text); font-size: var(--type-corpo); }
.m-regole { display: grid; gap: var(--space-l); margin-top: var(--space-l); }
.m-regole li { display: grid; gap: var(--space-xxs); padding-top: var(--space-s); border-top: 1px solid var(--separator); }
.m-scura .m-regole li { border-top-color: color-mix(in oklab, var(--on-night) 22%, transparent); }
.m-regole h3 { font-size: var(--type-enfasi); font-weight: 800; }
.m-regole p { color: var(--muted); }
.m-scarica { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.m-scarica .tasto { min-height: var(--target-min); font-size: var(--type-nota); padding: 0 var(--space-l); }

.m-pesi { display: grid; gap: var(--space-xs); margin-top: var(--space-l); }
.m-peso { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-m); padding-top: var(--space-s); border-top: 1px solid color-mix(in oklab, var(--on-night) 22%, transparent); font-size: var(--type-sottotitolo); }
.m-peso span { font-size: var(--type-nota); color: var(--night-muted); font-variant-numeric: tabular-nums; }
.m-peso-800 { font-weight: 800; } .m-peso-400 { font-weight: 400; } .m-peso-300 { font-weight: 300; }
.m-specimen { margin-top: var(--space-l); font-size: var(--type-manifesto); font-weight: 800; letter-spacing: var(--tracking-titolo); color: var(--vivo-challenge); }

.m-caratteri { display: grid; gap: var(--space-m); margin-top: var(--space-l); }
.m-caratteri li { display: grid; gap: var(--space-xxs); padding: var(--space-l); border-radius: var(--radius-xl); background: color-mix(in oklab, var(--on-night) 6%, transparent); }
.m-hanzi { font-size: var(--type-fatto); font-weight: 800; line-height: 1; color: var(--vivo-choice); }
.m-pinyin { font-weight: 800; color: var(--vivo-challenge); }
.m-caratteri p { color: var(--night-muted); }
.m-fonti { font-size: var(--type-nota); color: var(--night-muted); max-width: var(--width-stretta); }

@media (width >= 40rem) {
  .m-tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-caratteri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-regole { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width >= 60rem) {
  .m-tessere { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .m-loghi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-caratteri { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .m-regole { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-completamenti { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l) var(--space-xl); }
}

:root[data-stile="nitido"] .m-apertura { background: var(--surface); }
:root[data-stile="nitido"] .m-scura { background: var(--surface); color: var(--text); --text: initial; --muted: initial; }
:root[data-stile="nitido"] .m-scura .occhiello, :root[data-stile="nitido"] .m-scura .voce, :root[data-stile="nitido"] .m-caratteri p, :root[data-stile="nitido"] .m-fonti, :root[data-stile="nitido"] .m-accento, :root[data-stile="nitido"] .m-codici, :root[data-stile="nitido"] .m-peso span { color: var(--text); }
:root[data-stile="nitido"] .m-tessera, :root[data-stile="nitido"] .m-caratteri li { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-stile="nitido"] .m-c-parola { color: var(--text); background: none; }

/* Generato da web/sito/build.py dai token. */
.m-logo-chiaro { background: #FFFFFF; color: #111216; --logo-punto-alto: #ED3912; --logo-punto-basso: #1E64EF; }
.m-logo-scuro { background: #11172E; color: #F5F5F7; --logo-punto-alto: #FFE47D; --logo-punto-basso: #6CF7F7; }
.m-t-challenge .m-campo { background-image: linear-gradient(160deg, #ED3912, #B80049); }
.m-t-challenge .m-accento i { background: #FFE47D; }
.m-t-choice .m-campo { background-image: linear-gradient(160deg, #1E64EF, #5B2BB4); }
.m-t-choice .m-accento i { background: #6CF7F7; }
.m-t-change .m-campo { background-image: linear-gradient(160deg, #008C46, #006965); }
.m-t-change .m-accento i { background: #D1FF74; }
.m-t-chance .m-campo { background-image: linear-gradient(160deg, #C91B86, #DE4E4B); }
.m-t-chance .m-accento i { background: #FFD988; }
.m-t-pause .m-campo { background-image: linear-gradient(160deg, #328092, #4D6291); }
.m-t-pause .m-accento i { background: #C0EEFA; }