/*
 * The movement's own stylesheet, over OS: OS is not changed for a site, the
 * site themes it (the owner, 29 October 2026: "non devi cambiare OS ... fai
 * un css custom", "OS non si modifica, si rende temabile"). OS's components
 * are dressed through the hooks they document and, where they name none,
 * by a rule of the site's own on their class; colours, sizes and motion are
 * OS's tokens. Loaded after os.css, so a rule here of the same weight wins.
 */

/* The site's own weights, the two heavy rungs OS's scale stops short of. */
:root {
  --mg-weight-bold: 700;
  --mg-weight-black: 800;
}

/* ── The type ─────────────────────────────────────────────────────────────
   Firm, heavy and in steps (the owner, 29 October 2026, of Montserrat: "IL
   FONT E' TROPPO MOLLE", "gerarchia, peso, gusto grafico, mancano"): the
   titles in Archivo, a grotesque with straight ends, the reading in
   Switzer (the theme's faces), and every heading a weight above OS's, so a
   section's name, a step's name and the line under it read as three
   different things. On the web surface, where OS declares the same names. */
[data-surface="web"] {
  --ds-font-heading-2-weight: var(--mg-weight-black);
  --ds-font-heading-2-tracking: -0.03em;
  --ds-font-heading-3-weight: var(--mg-weight-black);
  --ds-font-heading-3-tracking: -0.025em;
  --ds-font-heading-4-weight: var(--mg-weight-bold);
  --ds-font-heading-5-weight: var(--mg-weight-bold);
  --ds-font-heading-6-weight: var(--mg-weight-bold);
  --ds-font-overline-weight: var(--ds-weight-intense);
  --ds-font-label-weight: var(--ds-weight-robust);
}

/* A band's name a rung larger than OS's, the second heading's size, so the
   bands stand under the opening as the opening stands over them. */
.ds-section-head__title {
  --ds-section-head-title-size: var(--ds-font-heading-2-size);
  --ds-section-head-title-leading: var(--ds-font-heading-2-leading);
  --ds-section-head-title-tracking: var(--ds-font-heading-2-tracking);
}

/* The steps' numbers in the movement's red, the way the posters number
   theirs, white on it. */
.ds-how-it-works__number {
  --ds-how-it-works-number-ink: var(--ds-on-brand);
  border-color: var(--ds-brand);
  background-color: var(--ds-brand);
}

/* ── The bar ──────────────────────────────────────────────────────────────
   Its places in small spaced capitals, the overline's size, weight and
   tracking, through the header's own hooks; a red line drawn under the word
   as the pointer comes, and standing under the page you are on (the owner:
   "il font del menu è un po banalotto, non ha interazione in hover (tipo una
   linea per dire) ed è troppo grande e l'avrei fatto in maiuscolo"). The
   line is the answer to the pointer, so the row's wash goes. */
.ds-header__item {
  --ds-header-item-case: uppercase;
  --ds-header-item-tracking: var(--ds-font-overline-tracking);
  --ds-header-item-size: var(--ds-font-overline-size);
  position: relative;
  font-weight: var(--ds-font-overline-weight);
}

.ds-header__item:hover {
  background-color: transparent;
}

.ds-header__item::after {
  content: "";
  position: absolute;
  inset-inline: var(--ds-space-3);
  inset-block-end: var(--ds-space-1);
  block-size: var(--ds-space-0-5);
  background-color: var(--ds-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ds-duration-slow) var(--ds-ease-out);
}

.ds-header__item:hover::after,
.ds-header__item[aria-current="page"]::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .ds-header__item::after {
    transition: none;
  }
}

/* In those capitals the row of mark, places, «Accedi» and the call is
   1,061px long since «Accedi» joined it (measured 6 November 2026: the two
   calls on a second line at 1060, in the row at 1062; 980px before it, with
   the statute's place, and 893px with four places), and OS sends the places
   behind the menu's mark only at 40rem: in between, the calls fell to a
   second line (the owner, of the first one: "va a capo il bottone... come
   mai"). So here they leave at 68rem, the row's length and a little for a
   browser that sets the capitals wider. OS names no hook for that width, so
   these are its two rules at 40rem, on its classes. */
@container ds-header (width <= 68rem) {
  .ds-header__nav {
    display: none;
  }

  .ds-header__mark--menu {
    display: inline-flex;
  }
}

/* ── The opening's video ──────────────────────────────────────────────────
   Upright as it was shot, a phone's shape beside the title: OS's hero cuts
   its picture to 4:3, so here the frame takes the video's own shape, at a
   phone's width, in the middle of its column. */
.ds-hero--split .ds-hero__media {
  --ds-hero-ratio: 720 / 1276;
  max-inline-size: 22rem;
  justify-self: center;
}

/* ── The questions ────────────────────────────────────────────────────────
   They open on OS's own since 0.323.1, which writes the panel its
   stylesheet reads (the owner, 29 October 2026: "Le FAQ non funzionano?").
   The questions at the fifth heading, bold, over answers at the reading's
   size: a question and its answer read as two things, as the other bands'
   names and lines do. */
.ds-accordion .ds-collapsible__head {
  --ds-collapsible-head-face: var(--ds-font-heading-5-face);
  --ds-collapsible-head-size: var(--ds-font-heading-5-size);
  --ds-collapsible-head-leading: var(--ds-font-heading-5-leading);
  --ds-collapsible-head-tracking: var(--ds-font-heading-5-tracking);
  font-weight: var(--ds-font-heading-5-weight);
}

/* ── The referents ────────────────────────────────────────────────────────
   Every name whole: OS cuts a row's second line to one with an ellipsis, and
   on a phone a region's two or three referents read "Domenica Follino
   (Nord), Giovanna …". Here the line wraps. */
.ds-list__sub {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* ── The titles ───────────────────────────────────────────────────────────
   The two largest in capitals, as the movement's posters stand theirs (the
   owner: "in maiuscolo magari l'hero"): the heroes' and the pages' at the
   display, a press release's at the first heading. OS names no case for
   them, so the site says it on their class; the words underneath stay as
   written, for a screen reader and the tab's title. */
.ds-hero__title,
.ds-page-head--display .ds-page-head__title,
.ds-page-head--large .ds-page-head__title {
  text-transform: uppercase;
  /* A word longer than the line breaks inside it, with a hyphen in Italian
     for words of twelve letters or more: in these capitals «DELL’ASSOCIAZIONE»
     was 426px wide on a 375px phone and the statute's page scrolled sideways,
     and «L’ASSOCIAZIONE» is wider than a press release's column on a
     computer too (the owner, 6 November 2026). Broken anywhere as the last
     resort. Measured that day at 375 to 1440px: the only titles that move
     are those with a word wider than its line, which broke nowhere before. */
  hyphens: auto;
  hyphenate-limit-chars: 12 6 6;
  overflow-wrap: anywhere;
}

/* A title at the page head's own size breaks a word too long for its line
   the same way: a member's name carried there (`misuraNome()`) can be one
   word of 80 letters, and one of 52 set the card's page 735px wide on a
   375px phone (7 November 2026). */
.ds-page-head--site .ds-page-head__title {
  hyphens: auto;
  hyphenate-limit-chars: 12 6 6;
  overflow-wrap: anywhere;
}

/* Beside the video, the home's title keeps every word whole (the owner, 8
   November 2026: "MOVIMENTO va a capo la O"). In these capitals «MOVIMENTO»
   is 6.2 times the display's size, 597px at 96, and OS's split gives the
   words 1.1 parts of 2.1, 578px of the 1152px band, so the rule above broke
   it inside at every width the two stand side by side. Here the words'
   column is never narrower than the title's longest word, and takes it from
   the video's column, whose video stands at 22rem in the middle of it.
   `break-word` still breaks a word wider than the whole band, but unlike
   `anywhere` it leaves the word whole in the column's measure. Under 40rem
   the hero is one column and the rule above holds. */
.ds-hero--split {
  grid-template-columns: minmax(min-content, 1.1fr) minmax(0, 1fr);
}

@container (width > 40rem) {
  .ds-hero--split .ds-hero__title {
    overflow-wrap: break-word;
  }
}

/* ── The cover until the opening ──────────────────────────────────────────
   Until 14:00 on 5 November 2026 the movement's domain wears it for every
   page's body (src/attesa.php; the owner: "un countdown ... che oscura
   completamente il sito, centrato verticalmente e orizzontalmente"). One
   screen at least: the poster on the dark takes what the running line at the
   foot leaves, its words in the middle both ways; the root's ground is the
   dark too, so a phone pulled past either edge shows no white. */
.mg-attesa {
  display: grid;
  grid-template-rows: 1fr auto;
  min-block-size: 100svh;
}

.mg-attesa > .ds-site__section--inverse {
  align-content: center;
}

/* The running line a strip at the foot, not a band: at the section's rhythm
   it stood 355px tall at 1440 (measured 5 November 2026), two fifths of the
   screen, and pushed the poster off its middle. */
.mg-attesa > .ds-site__section--brand {
  padding-block: var(--ds-space-6);
}

:root:has(.mg-attesa) {
  background-color: var(--ds-inverse);
}

/* The movement's mark over the title, where the bar would show it, a rung
   taller than the bar's. */
.mg-attesa__logo {
  --ds-logo-size: var(--ds-size-6);
}

/* The time left as the programme's figures, at the display's size so they
   are the loudest thing on the screen, each unit's name centred over its two
   digits, the colons between them in the red. */
.mg-conto .ds-stat {
  align-items: center;
}

/* Each unit's name in the bar's small spaced capitals, the overline's. */
.mg-conto .ds-stat__label {
  --ds-stat-label-face: var(--ds-font-overline-face);
  --ds-stat-label-size: var(--ds-font-overline-size);
  --ds-stat-label-weight: var(--ds-font-overline-weight);
  --ds-stat-label-tracking: var(--ds-font-overline-tracking);
  text-transform: uppercase;
}

.mg-conto .ds-stat__value {
  --ds-stat-value-face: var(--ds-font-display-face);
  --ds-stat-value-size: var(--ds-font-display-size);
  --ds-stat-value-leading: var(--ds-font-display-leading);
  --ds-stat-value-tracking: var(--ds-font-display-tracking);
}

.mg-conto__punti {
  font-family: var(--ds-font-display-face);
  font-size: var(--ds-font-display-size);
  font-weight: var(--ds-font-display-weight);
  line-height: var(--ds-font-display-leading);
  color: var(--ds-brand);
}

/* A unit's new digits rise into place through a window of their own, the way
   the titles' words rise; still for a reader who asked motion to stop. A
   fade in their place left the seconds grey for most of every second. */
.mg-conto .ds-stat__value {
  overflow: hidden;
}

.mg-conto__cifre {
  display: inline-block;
}

.mg-conto__cifre--nuove {
  animation: mg-cifre-salgono var(--ds-duration-slow) var(--ds-ease-out);
}

@keyframes mg-cifre-salgono {
  from {
    transform: translateY(100%);
  }
}

/* At zero the cover fades as the page loads again into the site. */
.mg-attesa--aperta {
  opacity: 0;
  transition: opacity var(--ds-duration-slow) var(--ds-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .mg-conto__cifre--nuove {
    animation: none;
  }

  .mg-attesa--aperta {
    transition: none;
  }
}

/* ── The digital card ─────────────────────────────────────────────────────
   The member's card (src/tessera.php; the movement, 7 November 2026: "una
   futura tessera digitale"), drawn as the movement's peers draw theirs: the
   mark and «Tessera digitale» across the top, the holder's name in the
   titles' capitals over the region, the number and the day, the year's
   stamp and the QR code along the foot, and the motto on the dark under it
   with the logo's four stars. The card is the
   logo's red, so the logo reads as the emblem printed on it, the way the
   parties' cards wear their colour and the MAGA cards theirs; the dark,
   which first filled it (the owner: "bruttina e basica"), is the motto's. OS's Card wearing the brand ground, so every word in it
   takes the red's inks; the Card paints the raised ground and names no hook
   for another, so the site says it on the class, woven with a fine diagonal
   of the red's own darker step, as a printed card is against copies.

   The shape of the card in a wallet, 85.6 by 54, at every width, a phone's
   a step smaller (below; the owner, of a phone's card grown to 343 by 357:
   "ma è una tessera? sembra più un quadrato"). The shape is a floor on the
   front, read off the card's width, so a name that needs a second line
   still has its room: an aspect ratio on the card itself cut the words
   instead, since the card is the container its phone sizes ask and Chrome
   sized it by the wide ones. */
.mg-tessera {
  container-type: inline-size;
  max-inline-size: 30rem;
  border: 0;
  /* The light across a card held in the hand, over a weave of hairlines a
     quarter of the red, so the red stays the logo's and the logo sits in it
     as printed: at half, the stripes darkened the card round a logo that
     then read as a patch stuck on it. */
  background-color: var(--ds-brand);
  background-image:
    linear-gradient(120deg, color-mix(in srgb, var(--ds-on-brand) 12%, transparent), transparent 55%),
    repeating-linear-gradient(135deg, transparent 0 var(--ds-space-2), var(--ds-brand-hover) var(--ds-space-2) calc(var(--ds-space-2) + var(--ds-space-0-5)));
}

.mg-tessera__fronte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "testa testa testa"
    "chi chi chi"
    "fatti bollo qr";
  column-gap: var(--ds-space-6);
  row-gap: var(--ds-space-4);
  /* The card's height at its width, less the motto's strip under it, the
     padding inside it: the height, never a floor (the owner, 7 November
     2026, of a long name that made the card taller: "la dimensione deve
     essere dimensione tessera!!! non alzarsi!"). Every line in it holds to
     one line, so nothing it carries can ask for more. */
  box-sizing: border-box;
  block-size: calc(100cqi * 54 / 85.6 - var(--ds-font-overline-leading) - 2 * var(--ds-space-2));
  overflow: hidden;
  padding: var(--ds-space-6);
}

.mg-tessera__testa {
  grid-area: testa;
}

.mg-tessera__logo {
  --ds-logo-size: var(--ds-size-4);
}

/* The year's stamp as paper holds it, the owner's "nella cartacea": upright
   in the card beside the code and as tall as it, never tilted over an edge;
   its paper the red's own light, its frame and year in the red, its words
   in the dark. */
.mg-bollo {
  grid-area: bollo;
  align-self: end;
  block-size: var(--ds-space-20);
  aspect-ratio: 3 / 4;
}

.mg-bollo__carta {
  fill: var(--ds-on-brand);
}

.mg-bollo__cornice {
  fill: none;
  stroke: var(--ds-brand);
}

.mg-bollo text {
  fill: var(--ds-inverse);
  font-family: var(--ds-font-heading-3-face);
  font-weight: var(--mg-weight-black);
  text-anchor: middle;
  text-transform: uppercase;
}

.mg-bollo .mg-bollo__anno {
  fill: var(--ds-brand);
}

.mg-tessera__chi {
  grid-area: chi;
  align-self: center;
  min-inline-size: 0;
}

/* The name as the titles stand, in capitals, on one line, as a printed
   card's field holds it: past 18 letters a rung smaller, past 25 another,
   and an ellipsis past what the line holds, since the card keeps its size
   (the owner, of names "assurdamente lunghi", then "la dimensione deve
   essere dimensione tessera!!! non alzarsi!"; the sign-up takes 80 letters
   of name and 80 of surname). The whole name stays in the markup, for a
   screen reader and the card's page, whose title holds it all. */
.mg-tessera__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.mg-tessera__nome--lungo {
  font-family: var(--ds-font-heading-4-face);
  font-size: var(--ds-font-heading-4-size);
  font-weight: var(--ds-font-heading-4-weight);
  line-height: var(--ds-font-heading-4-leading);
  letter-spacing: var(--ds-font-heading-4-tracking);
}

.mg-tessera__nome--lunghissimo {
  font-family: var(--ds-font-heading-5-face);
  font-size: var(--ds-font-heading-5-size);
  font-weight: var(--ds-font-heading-5-weight);
  line-height: var(--ds-font-heading-5-leading);
  letter-spacing: var(--ds-font-heading-5-tracking);
}

/* The region and the facts on their one line too. */
.mg-tessera__regione,
.mg-tessera__fatti .ds-description-list__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The facts side by side, each name in the bar's small capitals over its
   value. */
.mg-tessera__fatti {
  grid-area: fatti;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--ds-space-8);
  row-gap: var(--ds-space-3);
}

.mg-tessera__fatti .ds-description-list__name {
  --ds-description-list-name-face: var(--ds-font-overline-face);
  --ds-description-list-name-size: var(--ds-font-overline-size);
  --ds-description-list-name-weight: var(--ds-font-overline-weight);
  --ds-description-list-name-leading: var(--ds-font-overline-leading);
  --ds-description-list-name-tracking: var(--ds-font-overline-tracking);
  --ds-description-list-name-case: uppercase;
}

/* The code dark on light, the way round every camera reads, on the red's
   own light; its margin of four modules is its border. */
.mg-tessera__qr {
  grid-area: qr;
  align-self: end;
  inline-size: var(--ds-space-20);
  background-color: var(--ds-on-brand);
  color: var(--ds-inverse);
}

/* os-cms draws the code 12rem wide in its own style attribute; the most it
   may take here is its box. */
.mg-tessera__qr svg {
  display: block;
  max-inline-size: 100%;
}

.mg-tessera__motto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
  padding: var(--ds-space-2) var(--ds-space-6);
  background-color: var(--ds-inverse);
  color: var(--ds-on-inverse);
}

.mg-tessera__motto p {
  margin: 0;
  text-transform: uppercase;
}

.mg-tessera__stelle {
  flex: none;
  block-size: var(--ds-space-3);
  fill: currentColor;
}

/* On a phone the same card a step smaller, so it keeps its shape: the mark
   at 32px, the stamp and the code at 64 tall (the code read back at 1x by
   the Mac's reader there, 48 it is not), the name at the fourth heading, so
   the owner's own (246px at that size) stands on one line, and the facts
   in the small type, their gaps a step closer so the stamp fits beside
   them. After the rules above, which it would lose to. */
@container (width < 28rem) {
  .mg-tessera__fronte {
    column-gap: var(--ds-space-3);
    row-gap: var(--ds-space-2);
    padding: var(--ds-space-2) var(--ds-space-4);
  }

  .mg-tessera__logo {
    --ds-logo-size: var(--ds-size-2);
  }

  .mg-bollo {
    block-size: var(--ds-space-16);
  }

  .mg-tessera__qr {
    inline-size: var(--ds-space-16);
  }

  .mg-tessera__nome {
    font-family: var(--ds-font-heading-4-face);
    font-size: var(--ds-font-heading-4-size);
    font-weight: var(--ds-font-heading-4-weight);
    line-height: var(--ds-font-heading-4-leading);
    letter-spacing: var(--ds-font-heading-4-tracking);
  }

  .mg-tessera__nome--lungo,
  .mg-tessera__nome--lunghissimo {
    font-family: var(--ds-font-heading-5-face);
    font-size: var(--ds-font-heading-5-size);
    font-weight: var(--ds-font-heading-5-weight);
    line-height: var(--ds-font-heading-5-leading);
    letter-spacing: var(--ds-font-heading-5-tracking);
  }

  .mg-tessera__fatti {
    --ds-description-list-face: var(--ds-font-small-face);
    --ds-description-list-size: var(--ds-font-small-size);
    --ds-description-list-weight: var(--ds-font-small-weight);
    --ds-description-list-leading: var(--ds-font-small-leading);
    --ds-description-list-tracking: var(--ds-font-small-tracking);
    column-gap: var(--ds-space-3);
  }

  .mg-tessera__fatti .ds-description-list__name {
    --ds-description-list-name-face: var(--ds-font-small-face);
    --ds-description-list-name-size: var(--ds-font-small-size);
    --ds-description-list-name-weight: var(--ds-font-small-weight);
    --ds-description-list-name-leading: var(--ds-font-small-leading);
    --ds-description-list-name-tracking: var(--ds-font-small-tracking);
  }

  .mg-tessera__motto {
    padding-inline: var(--ds-space-4);
  }
}

/* On a phone 360px wide a step smaller again, so the card keeps its size
   there too: at the phone's sizes the words stood 5px taller than its 175px
   of front. The mark at 24px, the stamp and the code at 56 (the code read
   back at 1x by the Mac's reader at 56), the name at the fifth heading and
   the region in the small type. */
@container (width < 21rem) {
  .mg-tessera__logo {
    --ds-logo-size: var(--ds-size-1);
  }

  .mg-bollo {
    block-size: var(--ds-size-5);
  }

  .mg-tessera__qr {
    inline-size: var(--ds-size-5);
  }

  .mg-tessera__nome,
  .mg-tessera__nome--lungo,
  .mg-tessera__nome--lunghissimo {
    font-family: var(--ds-font-heading-5-face);
    font-size: var(--ds-font-heading-5-size);
    font-weight: var(--ds-font-heading-5-weight);
    line-height: var(--ds-font-heading-5-leading);
    letter-spacing: var(--ds-font-heading-5-tracking);
  }

  .mg-tessera__regione {
    font-family: var(--ds-font-small-face);
    font-size: var(--ds-font-small-size);
    font-weight: var(--ds-font-small-weight);
    line-height: var(--ds-font-small-leading);
    letter-spacing: var(--ds-font-small-tracking);
  }
}

/* Under that, a phone 320px wide, the oldest still about: what the card
   carries cannot stand legibly in its 150px of front, so there the height
   is a floor rather than cut the code, and the motto's stars leave so the
   motto keeps its one line. */
@container (width < 19rem) {
  .mg-tessera__fronte {
    block-size: auto;
    min-block-size: calc(100cqi * 54 / 85.6 - var(--ds-font-overline-leading) - 2 * var(--ds-space-2));
  }

  .mg-tessera__stelle {
    display: none;
  }
}

/* The bar's two sets (src/site.php, barra()): «Accedi» and «Iscriviti» for
   a visitor, «La tua area» for a member, chosen by the mark the head puts
   on the root (`socioNellaTesta()`). Every page carries both, since Aruba's
   cache hands one copy to everybody. */
:root:not([data-mg-socio]) [data-mg-per="socio"],
:root[data-mg-socio] [data-mg-per="ospite"] {
  display: none;
}