/* tokens.css */
/* ============================================================
   TOKENS: one palette for the whole site, word for word.
   No page invents a palette of its own: it is the same house.
   ============================================================ */
/* ============================================================
   THE DISPLAY TYPEFACE
   ============================================================
   Gunship, by Daniel Zadorozny (Iconian Fonts). Squared, all caps in
   the way we use it: titles and headings, NEVER running text. Five
   thousand words of the safeguarding document set this way would not
   be readable.

   IT IS OURS AND IT LIVES IN HERE: no typeface comes from outside,
   just as no script and no map does. 37 KB that travel as 14, and they
   download only if something really uses them.

   THE LICENCE IS FOR NON COMMERCIAL USE and the club is a non profit
   ASD (confirmed by the club, 18 August 2026). The licence text
   travels next to the file, in assets/font/, because that is what the
   licence itself asks.

   swap: text shows AT ONCE in the system typeface and changes when the
   file arrives. The alternative is half a second of invisible titles
   on a slow connection in a gym. */
@font-face{
  font-family:"Gunship";
  /* The CONDENSED cut and not the round one: round, in caps and
     letterspaced, pulls words wide until they look stretched. This
     says the same thing in less room. */
  src:url("/font/gunship-cond.147f7ded.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  /* The display typeface is named HERE and used by name: the day it
     changes, it changes in one place. The fallback is not "some sans
     or other" but the system stack the site already uses, so until the
     file arrives the page stays the same. */
  --titoli:"Gunship",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* THE HEADER HEIGHT AND THE CREST HEIGHT, in one place only.
     The drawer MUST be as tall as the strip it covers, or opening the
     menu makes the mark jump. One number instead of several kept in
     agreement by hand, each one an occasion to get it wrong.
     The crest sits seven pixels below the top edge and seven above the
     bottom one, and that air is what makes it read as a mark rather
     than a plug forced between two edges. Seven and not fourteen: at
     fourteen the strip becomes a tall header, and a tall header takes
     a band of page away from every screen of every page.
     ONE MEASURE FOR BOTH SCREENS, with no phone exception: an
     exception that distinguishes nothing is just one more place to
     remember to look.
     The width comes from the height: 1.356 is the proportion of the
     file as the pipeline produces it, white rule included. */
  --testa:70px;
  --stemma:56px;
  /* --pad IS THE PAGE MARGIN, --gap THE STEP BETWEEN PANELS, and they
     are the same number. Equal, the page reads as filled instead of
     framed, and the width goes back to the content, which is what the
     dense pages need: home, calendar, results.
     TWO TOKENS AND NOT ONE because they say two different things: the
     day the page margin has to be wider than the step, this one
     changes and the other does not. */
  --pad:13px;
  --gap:13px;
  --ground:#D3E4EF;
  --head:#FFFFFF;
  --head-fg:#0B1A22;
  --head-dim:#54697A;
  --head-line:#C2D8E5;
  --menu-line:#E2ECF2;
  --chrome-btn:rgba(4,26,40,.06);
  --chrome-btn-h:rgba(4,26,40,.13);
  --brand-dim:#02629B;
  /* THE CHROME AMBER: the menu item that stands apart (safeguarding).
     Not a highlight. A bright colour at the end of the row would read
     as the main button, the opposite of what this is. It is picked as
     LIGHT as the other items (--head-dim) and differs only in tint: it
     shows as belonging to another group, not as shouting. */
  --head-nota:#7A5F1E;
  /* The veil of that same item when its page is open. It is the amber
     itself, barely laid on the ground: "you are here" said with the
     colour that item already has, instead of borrowing the blue of all
     the others, which would fold it back into the group it stays out
     of the rest of the time.
     In rgba and not in hex because there are two grounds, the white
     header and the black one, and one veil follows both. */
  --head-nota-fill:rgba(122,95,30,.15);
  --chrome-sel:#DCEDF7;
  --chrome-sel-fg:#0377BD;
  --panel:#FFFFFF;
  --bar:#E8F2F8;
  --bar-fg:#0B1A22;
  --bar-dim:#54697A;
  --bar-line:#CFE0EB;
  --zebra:#EBF2F7;
  --sunken:#DCE7EF;
  --line:#B7CBD9;
  /* THE COUNTDOWN BOXES, one tone for both screens. The phone sheet
     redefines --line and --zebra to something much softer: right for
     its own furniture, wrong here, since these four boxes are the same
     object on both and would come out outlined in fog on the phone and
     drawn on the desk. Declared here and NOT overridden in
     tel/tokens.css, which is what makes them match. */
  --cd-fill:#EBF2F7;
  --cd-line:#B7CBD9;
  --tratteggio:#B7CBD9;
  --line-2:#95B0C3;
  --edge:#8FADC0;
  --ink:#020909;
  --ink-2:#2B3C45;
  --muted:#475965;
  --faint:#647987;
  --brand:#0377BD;
  --brand-2:#02547F;
  --accent:#52B2D0;
  --on-brand:#FFFFFF;
  /* Won / lost: the only two "semantic" colours of the house. They do
     not flip between the two themes. Green and red hold on both
     grounds, and changing them would look like two different clubs. */
  --up:#12885A;
  --down:#C6412F;
  /* THE LIGHT GREEN AND RED. They are --up and --down thinned into the
     ground, and they serve where the outcome is a PATCH and not a thin
     word: the block of a calendar cell and the win/loss label in the
     match card. The saturated full shouts there. In a grid of forty
     cells it turns into a green and red chessboard, and next to two
     lines of text it pulls the eye off the names. Full --up or --down
     goes on top and stays the semantic colour of the house: the tone
     changes, the meaning does not.
     WRITTEN IN HEX AND NOT IN rgba(): a transparent veil leans on
     whatever is under it, and here there are three different grounds
     (panel, weekday cell, weekend cell). With a solid colour the
     contrast is a single number and can be measured, and tests/theme.js
     does measure it, in both themes: 3,4:1 green and 3,7:1 red in the
     light, 3,4:1 and 3,3:1 in the dark.
     A DRAW has no token of its own: it is neutral, and the neutral is
     already there (--line-2). A third colour for "neither one nor the
     other" would say something happened, and nothing did. */
  --up-fill:#C9E7D8;
  --down-fill:#F6D6D0;
  /* THE AMBER: neither won nor lost, but "look here". It serves in one
     place only: the list of warning signs in the safeguarding
     document, which neither forbids nor obliges but asks to notice.
     Like green and red it does not flip between the two themes. It is
     a semantic colour, and changing it in the dark would mean two
     meanings for the same sign. */
  --warn:#A8730A;
  /* The veil that marks Silea: in the table, in the match list row, in
     the chosen item of the selector. Always this one, never a solid
     brand fill: in the dark, white text over light cyan sits at 2,3:1
     and does not read. */
  --me-fill:rgba(164,210,230,.46);
  /* The neutral twin of --me-fill: where --me-fill says "this is
     ours", this one says "this is not". It grounds the left half of a
     calendar cell, which for an away match cannot be brand. Not a new
     colour but --muted veiled, so it follows the theme without chasing
     it, and it stays transparent: a solid ground would disappear over
     the weekend cell, which already has a ground of its own. */
  --via-fill:rgba(71,89,101,.14);
  --scrim:rgba(2,9,9,.55);
  /* Height of the result panel body: FIXED, the same for a played
     match, a countdown and a bye. One number, and one only: without
     it the panel changes size at every change of matchday and the
     whole column flickers. */
  --hero-h:270px;
  --shadow:0 16px 40px -18px rgba(6,30,46,.28);
  --bird-op:.40;
  /* THE SPARROW HAS TWO VERSIONS, one for light grounds and one for
     dark, and the choice happens HERE because it appears in three
     different sheets (the three shapes of the result card) and
     choosing in three places means forgetting in one.
     On light goes the DARK version and the other way round: the file
     name says what colour the drawing is, not what ground it goes on.
     Two files and not a filter computed on screen: the sparrow is made
     of thin strokes, the open wing is all feathers, and any tint
     inversion smears them. These two were drawn by whoever made the
     mark. */
  --passero:url("/icona-dark.1a2459a0.png");
  /* THE 5x1000 SHAPES, watermarked inside the panel.
     The file is white on nothing (three solid shapes, not a line
     drawing) and white as a watermark works only on the dark: on the
     light board the panel lets the pale blue of the page through, and
     on the phone it has the paper ground, where white on white is
     nothing. So the file is used not as an image but as a MASK: it
     gives the shape, this line gives the colour, and one single file
     tints the watermark as needed on any ground.
     The alpha sits inside the colour instead of in a separate opacity:
     one thing to tune, not two.
     Lower than the sparrow (--bird-op, .40) because these are solid
     surfaces and not feathers: at the same opacity they would not be a
     watermark, they would be an illustration behind the text. */
  --sagome:rgba(3,119,189,.11);
  /* THE VEIL. A ground that lightens what sits under it instead of
     covering it: for where a panel rests over a watermark and must not
     erase it. White and not a solid tone, because it has to work over
     whatever ends up behind it. */
  --velo:rgba(255,255,255,.34);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#010506; --panel:#04090C; --bar:#0E1D26; --bar-fg:#E6F1F7;
    --bar-dim:#8CA3B0; --zebra:#0A141A; --sunken:#0F1E27; --line:#182831;
    --line-2:#2A404E; --tratteggio:#425768; --cd-fill:#0A141A; --cd-line:#22343E; --edge:#395666; --ink:#F4FAFC; --ink-2:#BFCFD8;
    --muted:#90A5B1; --faint:#6E8490; --brand:#52B2D0; --brand-2:#8AD0E4;
    --on-brand:#03151C;
    /* --up and --down never flip, but the ground they are thinned into
       does: in the dark "light" means a very dark green and red, or a
       light theme patch inside a black page turns into a lightbulb.
       Declared in all three states, or at night they would sit at the
       light value by accident and not by choice. */
    --up-fill:#0E2A20;
    --down-fill:#33170F;
    --me-fill:rgba(82,178,208,.16);
    --via-fill:rgba(144,165,177,.14);
    /* in the dark the scrim and the shadow go strong: on a dark ground
       the soft ones of the light theme would not show */
    --scrim:rgba(0,0,0,.66);
    --shadow:0 24px 60px -18px rgba(0,0,0,.6);
    --head:#020909; --head-fg:#FFFFFF; --head-dim:#9FB1BC; --head-line:#122029;
    --menu-line:#16232A;
    --chrome-btn:rgba(255,255,255,.10); --chrome-btn-h:rgba(255,255,255,.22);
    --chrome-sel:rgba(255,255,255,.14); --chrome-sel-fg:#FFFFFF;
    --brand-dim:#75C1D9;
    /* In the dark the amber lightens like everything else: dim gold,
       at the same lightness as --head-dim. */
    --head-nota:#BFA671;
    --head-nota-fill:rgba(191,166,113,.17);
    --bar-line:#16262F;
    --bird-op:.10;
    --passero:url("/icona.e2a83984.png");
    --sagome:rgba(255,255,255,.06);
    --velo:rgba(255,255,255,.04);
  }
}
:root[data-theme="dark"]{
  --ground:#010506; --panel:#04090C; --bar:#0E1D26; --bar-fg:#E6F1F7;
  --bar-dim:#8CA3B0; --zebra:#0A141A; --sunken:#0F1E27; --line:#182831;
  --line-2:#2A404E; --tratteggio:#425768; --cd-fill:#0A141A; --cd-line:#22343E; --edge:#395666; --ink:#F4FAFC; --ink-2:#BFCFD8;
  --muted:#90A5B1; --faint:#6E8490; --brand:#52B2D0; --brand-2:#8AD0E4;
  --on-brand:#03151C;
  --up-fill:#0E2A20;
  --down-fill:#33170F;
  --me-fill:rgba(82,178,208,.16);
  --via-fill:rgba(144,165,177,.14);
  --scrim:rgba(0,0,0,.66);
  --shadow:0 24px 60px -18px rgba(0,0,0,.6);
  --head:#020909; --head-fg:#FFFFFF; --head-dim:#9FB1BC; --head-line:#122029;
  --menu-line:#16232A;
  --chrome-btn:rgba(255,255,255,.10); --chrome-btn-h:rgba(255,255,255,.22);
  --chrome-sel:rgba(255,255,255,.14); --chrome-sel-fg:#FFFFFF;
  --brand-dim:#75C1D9;
    /* In the dark the amber lightens like everything else: dim gold,
       at the same lightness as --head-dim. */
    --head-nota:#BFA671;
    --head-nota-fill:rgba(191,166,113,.17);
  --bar-line:#16262F;
  --bird-op:.10;
  --passero:url("/icona.e2a83984.png");
  --sagome:rgba(255,255,255,.06);
  --velo:rgba(255,255,255,.04);
}

/* scorrimento.css */
/* ============================================================
   SCROLLBARS, ONCE AND FOR EVERYTHING
   ============================================================
   No selector list here: the bare pseudo-element covers everything
   that scrolls, the page included. A new panel has nothing to
   remember, which is the only way this stays consistent.

   The trap that rules a list out: with a LIST of selectors the
   pseudo-element attaches only to the last one.

   The phone wants it thinner (tel/base.css): 8 pixels instead of 10,
   because there the screen is 390 wide and a 10 pixel bar takes a
   hundredth of the usable width.
   ============================================================ */
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--line-2);border-radius:6px;
  border:3px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* app/base.css */
@media (min-width:900px){
/* ============================================================
   THE GROUND OF THE BOARD
   This is not base.css: that one is the ground of the pages that
   SCROLL, where the body has automatic height and the focus ring is
   the brand one. Here the page does not scroll, it is a screen fixed
   inside the window, and the body is a flexible column. Two pages of
   two different natures: putting both things in the same stylesheet
   means switching scrolling off on the sponsor page too.
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%;overflow:hidden}

/* The container of the layout: the place where either the board or
   the phone screen is mounted. It has to be INVISIBLE to the
   geometry: it takes what is left over under the header and hands it
   to its children identical, so .shell behaves as if it were still a
   child of the body. */
#schermo{flex:1;min-height:0;display:flex;flex-direction:column}
body{
  display:flex;flex-direction:column;
  background:var(--ground);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
}
/* With the match list behind a button, the fixed-screen board holds
   down to much smaller windows. */


button,a{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}
.u-num{font-variant-numeric:tabular-nums}

/* The scrollbars live in styles/scorrimento.css, with no lists of
   classes: they hold for everything that scrolls. */

}

/* header.css */
/* ============================================================
   HEADER: stitched to the top, full width, as on the other pages.
   The --gap/--pad rhythm starts here and runs downward.
   ============================================================ */
/* THE HEADER HEIGHT IS --testa, RULE INCLUDED, and it is written here
   because this is where the header is defined. A correction living in
   the sheet of an accessory component only covers the pages that have
   that component.
   box-sizing is already border-box from the reset: the height contains
   the rule instead of adding to it. */
.top{background:var(--head);border-bottom:1px solid var(--head-line);
  height:var(--testa);
  position:sticky;top:0;z-index:20}
.top-in{max-width:1840px;margin:0 auto;height:100%;padding:0 var(--pad);
  display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;flex:none;color:inherit;text-decoration:none}
/* THE WHOLE CREST, AND THE SAME ONE ON EVERY SCREEN.
   The crest settles the balance between bird and lettering inside
   itself, which is what makes a crest a crest. So there is ONE of it,
   identical everywhere, and only its size changes between board and
   phone. 48px tall inside a 64px header: the lettering inside the
   crest stays readable and there is air above and below, so it reads
   as a mark and not as a plug.
   Background and not <img>: see chrome.js. */
.brand .mark{display:block;flex:none;
  height:var(--stemma);width:calc(var(--stemma) * 1.356);
  background:url("/logo-volley-silea.ff7b3ca6.png") center/contain no-repeat}
/* The written name stays in the markup and off the screen: the crest
   already carries it, and the link aria-label says it to anyone who
   cannot see. */
.brand .wm{display:none}
/* Between 900 and ~1050px the eight items do not fit next to the mark:
   instead of breaking the page they scroll inside their own strip.
   min-width:0 because a flex container, left alone, will not be
   squeezed below its own content. */
.nav{display:flex;gap:3px;margin-left:auto;min-width:0;
  overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:9px 15px;border-radius:8px;font-size:15px;font-weight:400;
  color:var(--head-dim);white-space:nowrap;transition:color .15s,background .15s}
.nav a:hover{color:var(--head-fg);background:var(--chrome-btn)}
.nav a.on{color:var(--chrome-sel-fg);font-weight:600;background:var(--chrome-sel)}
/* AN ITEM APART, NOT AN ITEM SINGLED OUT: safeguarding.
   A document the law requires to be published. It sits at the end and
   reads as "another thing", not as the most important one: whoever
   comes for the results does not need the eye pulled over there.

   NO FRAME. In a row of links a frame is an invitation to press, and
   it would make this look like the header main button.
   A RULE IN THE GAP instead: the mark a navigation bar has always used
   to say "from here on it is another group", and it asks nothing of
   anyone. It sits in the margin and not on the link, so the hover veil
   stays one whole shape.
   DIM AMBER, as light as the other items. The tint alone says another
   family; raising the brightness too would be shouting. In the dark it
   lightens along with everything else (--head-nota).

   THE RULE IS THE SAME AMBER and stays one pixel. The frame grey
   (--head-line) is made to detach from a white header and vanishes on
   a black one, while amber shows on both and says the same thing as
   the word it divides. One pixel because it is a mark of separation:
   thicker, it becomes a bar that calls. */
.nav a.bordata{position:relative;margin-left:20px;color:var(--head-nota)}
.nav a.bordata::before{content:"";position:absolute;left:-11px;top:50%;
  transform:translateY(-50%);width:1px;height:18px;
  background:var(--head-nota)}
.nav a.bordata:hover{color:var(--head-nota);background:var(--chrome-btn)}

/* ON ITS OWN PAGE IT STAYS AMBER. "You are here" is the same pill as
   every other item, tinted with the colour this item already has:
   borrowing the blue would fold it back into the group it stays out of
   the rest of the time, exactly while it is open.
   AND THE RULE STAYS. It divides two groups, and the two groups are
   there even from inside the second one. */
.nav a.bordata.on{background:var(--head-nota-fill);color:var(--head-nota);font-weight:600}
.tema{flex:none;width:38px;height:38px;border-radius:9px;border:0;cursor:pointer;
  display:grid;place-items:center;color:var(--head-dim);background:transparent;
  transition:color .15s,background .15s}
.tema:hover{color:var(--head-fg);background:var(--chrome-btn)}
.tema svg{grid-area:1/1;width:19px;height:19px;transition:opacity .2s,transform .2s}
.tema .ico-sole{opacity:0;transform:rotate(-60deg) scale(.7)}
.tema.scuro .ico-sole{opacity:1;transform:none}
.tema.scuro .ico-luna{opacity:0;transform:rotate(60deg) scale(.7)}

/* The hamburger exists only on the narrow layout */
.ham{display:none;width:44px;height:44px;place-items:center;border:0;cursor:pointer;
  background:transparent;color:var(--head-dim);transition:color .15s}
.ham:active{color:var(--head-fg)}
.ham svg{width:20px;height:20px;display:block}

/* Below 900px the header becomes the app one: hamburger on the left,
   mark in the middle, theme on the right. It is the same point where
   the phone shell drops its frame, so moving from page to page the top
   does NOT change under the fingers. */
@media (max-width:899px){
  .top-in{padding:0 4px;gap:0;
    display:grid;grid-template-columns:44px 1fr 44px;align-items:center}
  .ham{display:grid}
  .nav{display:none}
  /* On the phone the WHOLE crest and no lettering: the name is inside
     it, and in a 56px header between hamburger and theme button the
     bird alone with the lettering beside it does not fit without
     shrinking both below the size where they read.
     The crest is THE SAME as the board one, same size: here it just
     sits between two 44px buttons instead of left of a menu. --stemma
     states that size once for both.
     The last pixels at the top and bottom of the crest are the white
     rule the file carries with it (pipeline/tools/trasparenza.js). It
     is part of how the mark is made, and on the near black header it
     is also the only thing detaching its shape from the ground. */
  .brand{justify-content:center}
  .tema{width:44px;height:44px;border-radius:0}
}

/* drawer.css */
/* --- drawer menu, the same one on every page -----------------
   Same measures, weights and wording throughout. Two different menus
   would make moving from one page to another feel like changing
   site. */
.menu{position:fixed;inset:0;z-index:80;
  background:var(--head);color:var(--head-fg);
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transition:opacity .2s;
  padding-bottom:env(safe-area-inset-bottom,0px)}
.menu.on{opacity:1;pointer-events:auto}
.menu-top{height:var(--testa);flex:none;display:flex;align-items:center;
  justify-content:space-between;padding:0 4px 0 16px}
/* The whole crest, as in the header this drawer covers: the menu
   opens and the mark stays where it was, at the same size. */
.menu-top .marchio{display:block;flex:none;
  height:var(--stemma);width:calc(var(--stemma) * 1.356);
  background:url("/logo-volley-silea.ff7b3ca6.png") center/contain no-repeat}
.menu .icon{width:44px;height:44px;display:grid;place-items:center;border:0;
  cursor:pointer;background:transparent;color:var(--head-dim)}
.menu .icon svg{width:20px;height:20px;display:block}
/* THE ITEMS ARE THE SCROLLING PART, and flex:1 with min-height:0 is
   what makes that true. Without them a child with overflow does not
   shrink inside a flex column: it grows and spills past its container,
   and on a short screen the footer rule cuts the last item in half. */
/* THE ITEMS SIT IN TWO COLUMNS. Eleven items fit in six rows and all
   land on screen together: the drawer opens and the whole site is
   there, with nothing to drag to reach Contatti.

   EVERY ITEM IS A CELL, all the same size. The grid makes them equally
   wide by construction, and align-items:stretch (the default, so it is
   not written) makes them as tall as the tallest of their row. The
   minimum is sixty-four pixels, above the forty-four a finger needs.

   THE TYPE IS 17. At half the screen width "Calendario" does not fit
   at 24 bold, and a word wrapping inside a cell undoes the grid the
   cell is there to build. */
.menu nav{flex:1;min-height:0;
  padding:18px;overflow-y:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.menu nav a{color:var(--head-fg);
  font-size:17px;font-weight:700;letter-spacing:-.02em;
  min-height:64px;padding:12px 14px;
  border:1px solid var(--menu-line);border-radius:12px;
  display:flex;align-items:center;gap:10px}
/* THE ITEM OF THE OPEN PAGE is tinted in three places: text, border
   and a veil of background. Among eleven identical cells one blue word
   between ten white ones is a detail that gets lost, while a tinted
   cell is found without looking for it. */
.menu nav a.on{color:var(--brand);border-color:var(--brand);
  background:color-mix(in srgb, var(--brand) 13%, transparent)}
.menu nav a small{font-size:9px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--head-dim);
  border:1px solid var(--menu-line);border-radius:4px;padding:2px 5px}
/* THE DRAWER FOOTER: who this club is.
   On the board it sits in a strip at the bottom of the screen. Here it
   cannot: below 900px the bottom belongs to the sponsor bar and the
   page does not scroll. So it sits where people look for what the
   screen does not show.

   TRULY AT THE BOTTOM: margin-top:auto pushes it to the last row of
   the column even when few items would leave it hanging halfway. The
   rule separates it from the items, which are large and made to be
   touched; this text is small and made to be read, and with no line
   between them it would read as the last menu item.
   The bottom safe margin already belongs to .menu. */
.menu-piede{
  margin-top:auto;flex:none;
  padding:10px 22px 12px;
  border-top:1px solid var(--menu-line);
  font-size:10.5px;line-height:1.45;color:var(--head-dim);
}
.menu-piede p{margin:0}
.menu-piede p + p{margin-top:3px}
.menu-piede .sep{margin:0 .5em;opacity:.5}

/* SHORT SCREENS. On a 360x640, still around, six rows plus header plus
   footer overflow by twenty pixels and the drawer starts scrolling.
   Everything tightens: shorter cells, less air between them, one pixel
   less type. Fifty-six pixels of cell remain, above the forty-four a
   finger needs. */
@media (max-height:700px){
  .menu nav{padding:14px;gap:8px}
  .menu nav a{min-height:56px;padding:10px 12px;font-size:16px}
}
/* One step further down for the shortest of all: a 360x560, or an
   ordinary phone turned sideways. Fifty pixels are still above the
   forty-four of a finger. It goes no lower: if more room is ever
   needed it scrolls, which by then is the right answer. */
@media (max-height:600px){
  .menu nav{padding:12px;gap:7px}
  .menu nav a{min-height:50px;padding:8px 12px;font-size:15.5px}
}

@media (min-width:900px){ .menu{display:none} }

.toast{position:fixed;left:50%;bottom:30px;z-index:90;
  transform:translate(-50%,10px);
  background:var(--ink);color:var(--panel);
  font-size:13px;font-weight:500;padding:10px 16px;border-radius:10px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* Safeguarding stands apart down here too, in the dim amber of the
   header. It takes the whole grid width, and its weight stays that of
   the other items: a different item, not a more important one.

   AMBER, not the grey of the chrome: that grey is made to detach from
   a light ground and disappears on the black drawer.
   ON ITS OWN PAGE IT STAYS AMBER: the other selected items turn brand,
   this one already has its colour. */
.menu nav a.bordata{grid-column:1 / -1;
  color:var(--head-nota);border-color:var(--head-nota)}
.menu nav a.bordata.on{color:var(--head-nota);border-color:var(--head-nota);
  background:color-mix(in srgb, var(--head-nota) 13%, transparent)}

/* piede.css */
/* ============================================================
   THE FOOTER: ONE LINE, AT THE BOTTOM OF THE SCREEN
   ============================================================
   Who this club is, by law and by manners: full name, registered
   office, tax code, VAT number and federation code. On one line, in
   small type, in a grey that does not call. This is not text to read,
   it is text to find when looked for: catching the eye would steal
   attention from what the page exists for.

   IT IS FIXED, and that is not an aesthetic choice. On the board most
   pages are window-tall screens that do not scroll (app/base.css:
   html,body{overflow:hidden}), so "the bottom of the page" is not a
   place there. The only page that really scrolls is sponsor, and a
   fixed bar is what that one needs anyway: the footer is not a reward
   for reaching the end of fifteen brands.

   THE BODY GIVES UP THE SPACE, not the footer. A fixed element leaves
   the flow and would pass OVER the content, so the body shortens by
   the same amount and both cases hold: the fixed screen tightens, the
   scrolling page ends higher up. The height lives in a token because
   the footer declares it and the body uses it. Written twice, a change
   to the type size would show up as a covered line or a finger of
   emptiness.

   ON THE PHONE IT IS NOT THERE. Down here the bottom of the screen
   already belongs to the sponsor bar, and a second strip under the
   first would eat screen from a view that has little. The phone footer
   is still to be decided: see the note at the end.
   ============================================================ */

:root{ --piede-h:30px; }

.piede{
  position:fixed;left:0;right:0;bottom:0;z-index:6;
  height:var(--piede-h);
  display:flex;align-items:center;justify-content:center;
  padding:0 16px;
  background:var(--bar);
  border-top:1px solid var(--bar-line);
  /* Not text to read: text to find. Small, in a grey that stays back,
     and never wrapping. One line that on a narrow window shortens with
     an ellipsis instead of becoming two and breaking the strip. */
  /* LINE HEIGHT CANNOT BE 1. At line height one the line is as tall as
     the type, and the descenders (the p of "Sportiva", the g, the q)
     fall OUTSIDE the line: with overflow:hidden above, they get cut in
     half. A comfortable line height keeps them in, and centring the
     line in the strip is the job of align-items, not of the text
     height. */
  font-size:11.5px;line-height:1.45;letter-spacing:.01em;
  color:var(--bar-dim);
  white-space:nowrap;overflow:hidden;
}
.piede p{
  max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* The separator dots: lighter than the text, because all they do is
   separate. The space around them comes from margins, not from two
   spaces written in the markup, which at the end of a line would add
   themselves to the ellipsis. */
.piede .sep{margin:0 .55em;opacity:.5}

/* The body shortens by the height of the footer.
   On fixed screens this tightens the column and nothing ends up under
   the strip; on the scrolling page it is the last piece of document
   that stops higher up. */
body{padding-bottom:var(--piede-h)}

/* ------------------------------------------------------------------
   ON THE PHONE, FOR NOW, NOTHING.
   The bottom of the screen belongs to the sponsor bar, and below 900px
   the page does not scroll (tel/base.css says so in words: "niente
   scorre a livello di pagina"), so there is no "bottom" to put a
   footer in flow. It would go at the end of the scrolling strip,
   inside .scroll, and that strip is mounted by the phone layouts one
   by one: a job to do calmly and in one pass.
   Meanwhile the footer does not show and steals no room: absent beats
   wrong. The natural exception is the sponsor page, a document that
   below 900 really scrolls, where a trailing footer would work on its
   own. Keeping it on one page and not the others would be the worst of
   the three.
   ------------------------------------------------------------------ */
@media (max-width:899px){
  .piede{display:none}
  body{padding-bottom:0}
}

/* THE ONLY ITEM THAT LEADS ANYWHERE. It sits among text nobody
   touches, so it must not shout but must still be recognisable: same
   colour as the rest, underlined on hover. */
.piede a{color:inherit;text-decoration:none}
.piede a:hover,.piede a:focus-visible{text-decoration:underline}

/* app/rail.css */
@media (min-width:900px){
/* ============================================================
   THE HEADER (the two corrections) + THE SPONSOR BAR
   ============================================================ */
/* The header is drawn by header.css, which belongs to every page. On
   this one, though, it has to behave in two ways different from
   there, and neither difference is a matter of taste:

   1. IT IS NOT STUCK. The board is a fixed screen: nothing scrolls
      and a sticky has nothing to follow. Below 960px, however, the
      page really does scroll again (flow mode, at the bottom of
      pages/risultati.css) and there a sticky shows: the header stays
      glued to the top while the rest scrolls away.

   2. IT IS --testa TALL IN FULL, border included. header.css puts the
      min-height on the CONTENT and the border adds to it: one pixel
      more across the whole width, which pushes down everything that
      comes after. With box-sizing:border-box the height on the band
      includes the hairline, and the content stays one pixel lower.
      The min-height has to go off along with it, otherwise it wins:
      half a pixel, but it is half a pixel on the mark, the entries
      and the theme button, that is on the whole top of the page.
      THE HEIGHT IS SPOKEN BY THE TOKEN and not by a number typed
      here. This sheet arrives after header.css, so a number typed
      here wins over the token: the crest is left with four pixels
      above and four below, wedged between the two borders. A second
      place where the same measure is written is a second place to
      remember.

   It sits here and no higher up because it has to arrive AFTER
   header.css. */
.top{position:static;flex:none;height:var(--testa)}
.top-in{height:100%;min-height:0}

/* THE BAR HANGS FROM THE HEADER, it does not float below it.
   The two do the same job (staying at the top and not scrolling)
   and set apart they read as two bands of navigation, one inside the
   other.
   So they touch: no gap above, the top border of the bar is the
   bottom border of the header, and the corners go square where the
   two meet. It is the same way a round's cards attach to the day bar
   on the phone (tel/gara.css): the piece above acts as the border of
   the piece below.
   Below, instead, the gap stays: that is where the content of the
   page begins, and that is another matter. */
.railwrap{flex:none;max-width:1840px;width:100%;margin:0 auto;
  padding:0 var(--pad)}
/* A padding of 5, and the ten pixels it spares all go to the plate:
   the bar stands 68px tall and the logo takes the largest share of
   it. Horizontal room is not scarce, so the gap stays 10. */
.rail{background:var(--panel);border:1px solid var(--edge);
  border-top:0;border-radius:0 0 14px 14px;
  padding:5px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
  --h:48px}   /* usable height of the logo inside the plate */
/* The plate stays white at night too. The sponsors' files carry a
   white background baked in (none of them has an alpha channel): on a
   dark panel that shows as fifteen white rectangles. A plate fixed to
   white = the file's background disappears into the plate. */
.slot{height:56px;border-radius:9px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden;padding:0 12px;
  transition:border-color .16s,box-shadow .16s}
.slot:hover{border-color:var(--brand);box-shadow:0 1px 7px rgba(3,119,189,.18)}
/* --k evens out the AREA between logos of very different proportions:
   left alone, a 4:1 wordmark as tall as a square logo weighs three
   times as much. object-fit scales back when the logo is wider than
   the plate, so the proportion is never distorted. */
.slot img{display:block;width:100%;height:calc(var(--h) * var(--k,1));
  object-fit:contain;object-position:center;transition:opacity .42s ease}
.slot img.out{opacity:0}
.slot img.scuro{border-radius:3px}   /* logos with a dark plate keep clear of the corners */

}

/* app/griglia.css */
@media (min-width:900px){
/* ============================================================
   THE GRID
   ============================================================ */
.shell{
  flex:1;min-height:0;overflow:hidden;
  max-width:1840px;width:100%;margin:0 auto;
  /* above it is a gap between panels, below it is the frame of the
     page: this way the bottom margin matches the side ones */
  padding:var(--gap) var(--pad) var(--pad);
  display:grid;grid-template-columns:284px minmax(0,1fr) 400px;gap:var(--gap);
}
.side{min-height:0;min-width:0;display:flex;flex-direction:column}
.side .panel{flex:1}
/* the hero is as tall as its content (constant), the rest goes to the list */
.centre{display:grid;grid-template-rows:auto minmax(0,1fr);gap:20px;min-height:0;min-width:0}
.aside{display:grid;grid-template-rows:minmax(0,1fr);min-height:0;min-width:0}
/* Below 1400px the centre would drop under the ~594px the box score
   needs, and the names would break one letter at a time. Better to
   take the table away and call it back from a button in the bar. */
@media (max-width:1399px){
  .shell{grid-template-columns:284px minmax(0,1fr)}
  .aside{display:none}
  .side-links .side-tbl{display:flex}
}
@media (max-width:960px){
  .shell{grid-template-columns:minmax(0,1fr);padding-bottom:26px}
  .aside{display:grid}      /* in a single column there is room for it again */
  .side-links .side-tbl{display:none}
}

.panel{background:var(--panel);border:1px solid var(--edge);border-radius:14px;
  display:flex;flex-direction:column;min-height:0;overflow:hidden}
/* dark bar */
/* THE BAR IS 38 HIGH, everywhere. Every extra pixel of dark band is
   paid four times over on a board with four panels: sixteen more each
   are sixty pixels of screen spent on frame instead of on content.
   It is a MINIMUM, not a height: a bar with something taller inside
   (the matchday buttons, which are 38 round) grows by itself. */
.p-head{flex:none;background:var(--bar);color:var(--bar-fg);
  border-bottom:1px solid var(--bar-line);
  padding:0 20px;min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:14px}
/* THE PANEL TITLE IS IN THE SAME FACE AS EVERYTHING ELSE. The brand
   face looks good on a sign, but at 13px in spaced uppercase its
   squared letters read one character at a time instead of one word at
   a time, and a panel title is read in passing: it is the thing that
   says WHERE YOU ARE, and if it costs attention it has already
   failed.
   The brand face, on this site, lives inside the crest. */
.p-head .t{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.p-head .t.dim{color:var(--bar-dim);font-weight:400}

}

/* sparrow.css */
/* sparrow: same figure and same animation as the other pages */
.birdwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  container-type:inline-size}
.bird{position:absolute;top:50%;left:0;height:210%;width:auto;aspect-ratio:3/2;
  background:url("/light_sparrow.04c82cab.svg") center/contain no-repeat;
  animation:fly 15s linear infinite}
@keyframes fly{
  0%      {transform:translate3d(calc(20cqw - 50%),-48%,0) rotate(-3deg);opacity:0}
  13.33%  {opacity:var(--bird-op)}
  86.67%  {opacity:var(--bird-op)}
  100%    {transform:translate3d(calc(80cqw - 50%),-52%,0) rotate(3deg);opacity:0}
}

/* app/eroe.css */
@media (min-width:900px){
/* ============================================================
   THE RESULT PANEL
   The panel belongs entirely to the result: the chart lives in the
   dialog. So names with the sponsor inside get the full width.
   ============================================================ */
/* FIXED HEIGHT, not "as much as it takes".
   Result or countdown, rest or match, long name or short: the body is
   always --hero-h tall and the three states centre inside it. What
   changes is the content, never the container.
   And it is a single number to touch to make it lower or taller. */
.hero-body{flex:none;height:var(--hero-h);position:relative;overflow:hidden}
.hero-content{position:relative;height:100%;display:flex;flex-direction:column;
  justify-content:center;gap:14px;padding:22px 30px;overflow:auto}

/* THE SPARROW, at this page's size. The figure, the animation and the
   flight in container-query units live in sparrow.css, which belongs
   to everybody; here only the HEIGHT changes, and this sheet has to be
   pasted AFTER sparrow.css or the correction never arrives.
   168% and not the sponsor page's 210%: the measure is tied to the
   HEIGHT of the card, not to its width, so the sparrow takes up the
   same share of the panel on every screen. At 210% it spills below the
   band of the box score. */
.bird{height:168%}

.hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
/* The band at the bottom is always the same height and holds either
   the details button OR the countdown: it is the same place, so going
   from a played match to one still to play moves nothing. */
.hero-foot{flex:none;height:40px;display:flex;justify-content:flex-end;align-items:center}
.hero-more{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border-radius:9px;
  font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--brand-2);border:1px solid var(--line-2);
  transition:background .14s,border-color .14s}
.hero-more:hover{background:var(--zebra);border-color:var(--brand)}
.hero-meta{font-size:14px;font-weight:400;color:var(--muted);line-height:1.45}
.hero-meta b{color:var(--ink-2);font-weight:600}

/* THE DIRECTIONS, beside the venue and not under it: they are a note
   on that address, not an entry of their own, and on a line of their
   own they read as another piece of information.
   They appear only where the panel is NOT a link (on /risultati/ and
   not on the homepage) and only for matches still to play: see
   ui/eroe.js.
   The mark and the word never wrap apart: an orphan pin at the end of
   a line means nothing. */
.hero-mappa{display:inline-flex;align-items:center;gap:5px;
  margin-left:10px;padding:2px 8px 2px 6px;border-radius:7px;
  border:1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  color:var(--brand);text-decoration:none;
  font-size:12.5px;font-weight:600;white-space:nowrap;
  /* The button is 24 tall and the venue line 19: sitting on the same
     baseline, the centre of the first falls two and a half pixels
     above the centre of the second. The number is measured, not
     guessed by eye. */
  vertical-align:-1.5px;
  transition:background .12s}
.hero-mappa svg{width:14px;height:14px;flex:none}
.hero-mappa:hover{background:color-mix(in srgb, var(--brand) 12%, transparent)}
.hero-mappa:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ============================================================
   THE COUNTDOWN
   ============================================================
   It is the CONTENT OF THE FOOT of this card (the place where, with
   the match over, the details button sits) and that is why it lives
   in this sheet.
   It matters where it lives: the homepage loads this sheet and not
   app/tabellino.css, because its cards are compact, and these six
   lines are all it needs. /risultati/ loads both sheets.
   ============================================================ */

.cd{display:flex;gap:10px}
.cd div{background:var(--cd-fill);border:1px solid var(--cd-line);border-radius:9px;
  padding:2px 10px;min-width:60px;text-align:center}
.cd b{display:block;font-size:17px;font-weight:600;letter-spacing:-.03em;
  line-height:1.15;font-variant-numeric:tabular-nums;color:var(--ink)}
.cd span{display:block;font-size:8.5px;font-weight:500;letter-spacing:.09em;
  line-height:1.2;text-transform:uppercase;color:var(--faint)}

}

/* app/tabellino.css */
@media (min-width:900px){
/* ============================================================
   BOX SCORE, MARGIN CHART, COUNTDOWN
   The three contents that take turns inside the result panel and
   inside the match dialog, always at the same height.
   ============================================================ */
/* box score: the sets lined up in columns on the team rows. Five
   columns always kept for them. */
.tab{display:flex;flex-direction:column;gap:8px}
/* the result right after the name, the set detail on the right, as
   in the list of the other matches */
.tabhead,.trow{display:grid;grid-template-columns:38px minmax(0,1fr) 56px repeat(5,36px);
  gap:10px}
.tabhead{align-items:center}
/* Everything centred vertically, with no corrections.
   The gap between the optical centre of the figures and the centre of
   the box is (ascender − descender)/2 − cap-height/2: with Segoe UI
   that makes −0.014em, which is half a pixel at 36px. */
.trow{align-items:center}
.tabhead span{font-size:11px;font-weight:500;color:var(--faint);text-align:center}
.tabhead .sp{grid-column:1/4}
.trow .cr{width:38px;height:38px;border-radius:50%;background:var(--sunken);
  border:1px solid var(--line);color:var(--muted);display:grid;place-items:center;
  font-size:12px;font-weight:500}
.trow.me .cr{background:linear-gradient(145deg,var(--accent),var(--brand));
  border-color:var(--brand);color:var(--on-brand)}
/* NEVER truncate: FIPAV names carry the sponsor inside them. If it
   does not fit on one line it wraps, it does not end in an ellipsis. */
.trow .nm{min-width:0;font-size:19px;font-weight:400;color:var(--ink-2);
  line-height:1.25;overflow-wrap:anywhere}
.trow.me .nm{color:var(--brand-2);font-weight:600;text-transform:uppercase;letter-spacing:.02em}
/* ============================================================
   THE SPARROW AND THE NAME, IN THE RESULT CARD
   ============================================================
   THE SILEA'S CREST IS THE SPARROW. It is the same figure that flies
   behind the card and that sits on the browser tab, so it is not a
   new sign, and whoever meets it here has already seen it elsewhere.
   IT HOLDS EVERYWHERE, and not only inside the result card. The
   sparrow is in the table, in the other matches, in the dialog: on a
   page where the Silea appears three times, one team gets one sign,
   and three different signs are worse than a small sparrow. The small
   sparrow is recognised all the same (it is the silhouette that
   tells it apart, not the detail of the feathers) and above all it
   is ALWAYS THE SAME SIGN.
   The sizes are left alone: every list keeps its own, so nothing
   moves. What changes is what stands inside the circle.
   The initials stay written and turn TRANSPARENT instead of going
   away: whoever reads the page by voice keeps hearing them, and for
   them the sparrow does not exist.
   The border turns transparent and not zero: with box-sizing the
   border takes part in the measurement, and dropping it widens the
   sparrow against the opponents' crests standing beside it.
   EVERY LIST CALLS A ROW "OURS" IN ITS OWN WAY (.trow.me, .cr.vs,
   tr.me, .cr.me) so the rule is repeated once per sheet instead of
   written once with four selectors: the sheets load in different
   groups from page to page, and a selector written in a sheet that
   page does not load does not exist.

   THE SILEA'S NAME STAYS IN EVERYBODY'S FACE. In the card the two
   names sit one under the other two lines apart, and in two different
   faces they read as two things of a different nature, a sign and a
   piece of data, instead of as two teams.
   That the row is ours is already said by the colour, the weight and
   the sparrow alongside, which are three signals and enough.
   ============================================================ */
.trow.me .cr{background:var(--passero) center/contain no-repeat;
  border-color:transparent;color:transparent}

.trow .sp{font-size:17px;font-weight:400;color:var(--muted);text-align:center;
  font-variant-numeric:tabular-nums}
.trow .sp.won{color:var(--ink);font-weight:600}
/* the sets the Silea wins take the team colour, not the white */
.trow.me .sp.won{color:var(--brand-2)}
.trow .sp.na{color:var(--line-2)}
.trow .sc{font-size:36px;font-weight:600;letter-spacing:-.03em;text-align:center;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.trow.me .sc{color:var(--brand-2)}

/* margin chart. The rows share the room: 3 or 5 sets, same height */
.ch-head{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding-bottom:11px;border-bottom:1px solid var(--line)}
.ch-side{font-size:12.5px;font-weight:500;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-side.r{text-align:right}
.ch-lbl{font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.ch-rows{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:4px 0}
/* no column with the set score: it is already in the box score on the
   left, and without it the track gains ~74px of run. */
.ch-row{flex:1 1 0;min-height:24px;max-height:42px;
  display:grid;grid-template-columns:26px 1fr 58px 40px;align-items:center;gap:14px}
.ch-sc{font-size:14px;font-weight:400;color:var(--faint);text-align:right;font-variant-numeric:tabular-nums}
.ch-n{font-size:12.5px;font-weight:400;color:var(--faint)}
.ch-track{position:relative;height:14px;border-radius:7px;background:var(--sunken);
  border:1px solid var(--line-2)}
/* the centre line has to BE SEEN: it is the mark the bar starts from */
.ch-track::before{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;
  width:2px;margin-left:-1px;background:var(--faint);border-radius:1px}
.ch-bar{position:absolute;top:-1px;bottom:-1px;display:block;background:var(--line-2);
  animation:chgrow .42s cubic-bezier(.2,.8,.2,1) both}
.ch-bar.me{background:var(--brand)}
.ch-bar.l{border-radius:6px 0 0 6px;transform-origin:right center}
.ch-bar.r{border-radius:0 6px 6px 0;transform-origin:left center}
@keyframes chgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ch-d{font-size:15px;font-weight:600;text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ch-tot{flex:none;display:flex;align-items:center;justify-content:space-between;
  padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.ch-tot b{font-size:18px;font-weight:600;color:var(--ink)}


}

/* app/eroe-compatto.css */
@media (min-width:900px){
/* ============================================================
   THE COMPACT CARD, ON THE BOARD
   ============================================================
   The twin of tel/eroe.css: same classes, same markup
   (ui/eroe-compatto.js), desktop measurements.

   WHY IT IS HERE TOO. The five-column box score (app/tabellino.css)
   is the wide form, and it wants width: thirty-eight pixels of crest,
   fifty-six of score, five columns of thirty-six plus the gaps make
   three hundred and fifteen pixels before a single name is written.
   Inside the first team's panel the cards are TWO and side by side,
   that is four hundred pixels each: the name is left with a hundred
   and thirty, and TREVISOASSICURASILEA wants two hundred and ten. It
   is not a particularly long name, and it is a single word with no
   place to break, so it splits in the middle: TREVISOASSIC/URASILEA.

   Here the set scores drop into a band underneath and the name takes
   the whole line. It is the same choice the phone makes, for the same
   reason; the only thing that changes is the measurements.          */

/* The two team rows. They take what is left over when the card is
   taller than its content, so the band of set scores stays at the
   bottom. */
.hero-rows{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:11px}
.hrow{display:flex;align-items:center;gap:13px}
/* NEVER truncate: FIPAV names carry the sponsor inside them. If it
   does not fit on one line it wraps, it does not end in an ellipsis,
   and it is the same line as app/tabellino.css, because it is the
   same rule. */
.hrow .nm{flex:1;min-width:0;font-size:19px;font-weight:400;color:var(--ink-2);
  line-height:1.25;overflow-wrap:anywhere}
.hrow .sc{flex:none;font-size:30px;font-weight:600;letter-spacing:-.03em;
  min-width:28px;text-align:right;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink-2)}
/* Our row stands out, with the same three marks as the wide card:
   team colour, uppercase, weight. */
.hrow.silea .nm{color:var(--brand-2);font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.hrow.silea .sc{color:var(--brand-2)}

/* NO BAND AT THE BOTTOM here: the homepage calls the card with
   banda:false, so the set scores stay out of the markup. The rules
   for .hero-sets, .st and .hero-kick live in tel/eroe.css, which is
   the only place that markup is drawn. */

/* The crests. On the board the only other ones are the box score's
   (.trow .cr), which are written there and stay there: two different
   sizes for two different cards, rather than one rule pulled from
   both ends. */
.cr{flex:none;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--sunken);border:1px solid var(--line);color:var(--muted);
  font-size:11px;font-weight:500;letter-spacing:-.01em}
.cr.vs{background:linear-gradient(145deg,var(--accent),var(--brand));
  border-color:var(--brand);color:var(--on-brand)}
.cr.sm{width:26px;height:26px;font-size:9px}
/* The sparrow in place of the circle and the name in the brand face,
   only inside the card: the reason in full is in app/tabellino.css,
   which is where the same pair of rules appears for the wide form. */
.cr.vs{background:var(--passero) center/contain no-repeat;
  border-color:transparent;color:transparent}


}

/* app/altre.css */
@media (min-width:900px){
/* ============================================================
   THE OTHER TEAMS: THE WIDE LAYOUT
   ============================================================
   Three columns: who they are, how the last match ended, when they
   play again. In a FIXED proportion and not "as much as it takes",
   and that is the point of the whole panel: club names have different
   lengths (from SOSUS to MECA2 LIBERTAS SCORZE') and with elastic
   columns the ✔/✘ marks and the scores move on every row. A column
   that dances is not a column, and this panel exists to be SCANNED:
   what is read is the vertical line of the marks, not the single row.
   ============================================================ */
.al-elenco{list-style:none;margin:0;padding:0}
.al-elenco > li + li{border-top:1px solid var(--line)}

.al-riq{display:grid;grid-template-columns:4fr 4fr 4fr;align-items:center;
  gap:14px;padding:11px 0}
/* One of the two match columns can be empty for every team at once:
   before the season starts, or after it ends. Then it is not drawn at
   all and the remaining one takes the room. */
.al-elenco.senza-ultima .al-riq,
.al-elenco.senza-prossima .al-riq{grid-template-columns:4fr 8fr}

/* --- who they are --------------------------------------------------- */
.al-chi{display:flex;flex-direction:column;gap:2px;min-width:0}
/* Names truncate, they never wrap. A wrapped club name makes its row
   taller than the others, and the ticks and scores stop lining up
   down the panel, which is the whole point of the fixed columns. */
.al-nome{font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-comp{font-size:12px;color:var(--muted)}

/* --- one match ------------------------------------------------------
   It is a link and it leads to THAT match. The hover veil is the one
   of the first team's cards (the brand veil, transparent) so the
   two clickable things on this page light up the same way. */
.al-gara{display:flex;flex-direction:column;gap:3px;min-width:0;
  padding:6px 9px;border-radius:9px;color:inherit;text-decoration:none;
  transition:background .14s}
a.al-gara:hover{background:var(--me-fill)}
a.al-gara:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.al-gara.vuota{color:var(--faint);font-size:12.5px;padding-top:10px}

.al-eti{font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap}
.al-riga{display:flex;align-items:baseline;gap:7px;min-width:0}
/* The house and the plane: the same two emoji as the calendar and the
   match card, at the size of this row. */
.al-riga .emo{font-size:12px;line-height:1;flex:none}
/* The result mark carries the colour, and it is the only coloured
   thing in the row: if the score took it too, the column of numbers
   would turn into a flag. */
.al-sg{flex:none;font-size:12.5px;line-height:1.2}
.vinta .al-sg{color:var(--up)}
.persa .al-sg{color:var(--down)}
.attesa .al-sg{opacity:.75}
.al-pt{flex:none;font-size:14.5px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink-2)}
.al-avv{flex:1;min-width:0;font-size:12.5px;color:var(--muted);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ------------------------------------------------------------------
   NARROW: the opponents' names go, the result and the score stay.
   They are the first thing that can disappear: whoever wants to know
   against whom clicks, and that is one finger away. The last
   thing worth losing is the mark of how it ended.
   The threshold is written by the shell in data-altre, by measuring
   the panel: a @media here would look at the window, and between the
   window and this panel stands the reel (see pages/home.css).
   ------------------------------------------------------------------ */
.ca-altre[data-altre="strette"] .al-avv{display:none}
.ca-altre[data-altre="strette"] .al-riq{gap:10px}

}

/* app/home.css */
@media (min-width:900px){
/* ============================================================
   THE HOMEPAGE: the four-panel reel
   It leans on everything the board already has: .shell, .panel,
   .p-head, and the match card of app/gara.css. In here there is only
   the arrangement and the few things that belong to this page alone.
   ============================================================ */

/* THREE EQUAL COLUMNS, and the panels take two of them or one. Not
   two 2fr/1fr columns: with those the widths are the same on both
   rows, and the reel turns into two columns: big on the left and
   small on the right, above and below.

   With three columns the bottom row really does mirror, because what
   changes is the SPANS:

     row 1     PRIMA SQUADRA 4/6   |   5x1000 2/6
     row 2     NEWS 3/6            |   LE ALTRE SQUADRE 3/6

   Six columns and not three: the bottom row divides in HALF, and half
   of three is not a whole number of spans. With six, above they share
   4 and 2 and below 3 and 3.                                       */
/* THE TWO ROWS DO NOT SHARE THE SPACE IN EQUAL PARTS.
   The first is "auto": it takes its measure from the CONTENT, and the
   taller of the two (the first team or the 5x1000) dictates the
   height for both. They are the two panels that have to fit whole: a
   match card cut in half and a tax code under the border are no use
   to anybody.
   The second takes what is left and its two panels scroll inside,
   which is how the calendar works: the month grid takes its measure
   from the window and the day column scrolls. */
.shell.casa{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:auto minmax(0,1fr);
  gap:var(--gap);
}
/* Top row: the body takes its measure from the content and does not
   scroll. With flex:1 it would be worth "flex:1 1 0%", base ZERO, and
   in an automatic row it would count for nothing: only the dark bar
   would be left. */
.ca-prima .ca-corpo,.ca-5 .ca-corpo{flex:none;overflow:visible}
/* THE FRAME OF THE SPONSOR PAGE'S INVITATION: dashed and with no
   background. It is not an aesthetic quotation, it is the same thing:
   the only panel on the page that asks for something instead of
   showing it. The site has already decided how that dresses:
   solid for what is there, dashed for what could be. It is also the
   way this panel weighs LESS than the other three while standing in
   the front row. */
/* THE SHAPES IN WATERMARK. The same job as the sparrow behind the
   result card (tel/eroe.css .hero-birds): a layer spread over the
   whole panel, clipped by the panel itself, that cannot be touched
   and does not take the clicks. Still: no animation and no parallax.
   the sparrow of the chrome flies (sparrow.css), this one does not,
   and neither does the one behind the result card.
   The file works as a MASK and the colour is put there by --sagome:
   the reason is in tokens.css.
   IN THE MIDDLE, and taller than the panel: the group goes out past
   the top and bottom edges instead of sitting inside like a sticker
   laid on top, and that is what makes the watermark look like part of
   the ground. In a corner it is a decoration set aside; in the middle
   it is the ground the text is written on.
   The content has to be lifted: a positioned layer paints over
   content in flow, and without this line the shapes would stand in
   front of the words. */
.ca-5{position:relative;overflow:hidden;
  border:1px dashed var(--line-2);border-radius:14px;background:transparent;
  display:flex;flex-direction:column;justify-content:center}
.ca-5::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--sagome);
  -webkit-mask:url("/volleysilea-5x1000.1765a159.png") center/auto 108% no-repeat;
          mask:url("/volleysilea-5x1000.1765a159.png") center/auto 108% no-repeat;
}
.ca-5 > *{position:relative}
.ca-5 .ca-corpo{padding:24px 22px 26px}
.ca-prima{grid-column:1/5;grid-row:1}
.ca-5    {grid-column:5/7;grid-row:1}
.ca-news {grid-column:1/4;grid-row:2}
.ca-altre{grid-column:4/7;grid-row:2}

/* The body of every panel. It is the one that scrolls and not the
   page, as in all the other boards of the site. */
.ca-corpo{flex:1;min-height:0;overflow-y:auto;padding:16px 20px 18px}

/* The season, beside the title in the dark bar. EVERY PANEL WRITES
   ITS OWN, always: the two that look at the data can be looking at
   two different seasons (the first team already in the new one while
   the other teams are still on the one before) and without the label
   that would be an invisible defect instead of a fact. */
.ca-anno{margin-left:8px;font-weight:400;letter-spacing:.04em;color:var(--bar-dim)}

/* The shortcut: every panel is a window onto something and from every
   window one has to be able to walk in. It sits in the dark bar, on
   the right, where the other panels of the site keep their second
   piece of information. */
.ca-vai{flex:none;display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--bar-dim);transition:color .14s}
.ca-vai:hover{color:var(--bar-fg)}

/* ============================================================
   THE FIRST TEAM
   ============================================================ */

/* THE TWO CARDS DO NOT SHARE THE SPACE IN HALF: four tenths to the
   last match played, six to the next one. It has its logic: of a
   finished match one looks at the score and moves on, of the next one
   one looks at when, where and against whom, which are three things
   and want the wider line. On top of that the long names nearly
   always fall on that side, because on this one the score is already
   there taking room.

   A DOTTED HAIRLINE IN BETWEEN. The two cards are the same thing at
   two moments, not two different panels: a solid rule divides them as
   if they were two sections, and empty space on its own does not say
   where one of them ends. The dotted line divides without separating,
   and it is the same figure the site uses for things still pending,
   like the frame of the 5x1000.

   When there is only one of them (at the start or at the end of the
   season) it does not spread to the whole row: a card twice as wide
   as the others on the site reads as another thing. It keeps its own
   measure, on the left. */
.ca-gare{display:grid;grid-template-columns:4fr 6fr;column-gap:0}
.ca-gare.sola{grid-template-columns:1fr}
/* TWENTY-FOUR WRITTEN OUT, and not var(--pad). This is the gap
   between the two cards INSIDE the panel, not the margin of the page:
   borrowing that token ties this distance to a measure that answers
   to something else, and the day the page margin drops this one
   halves along with it without anybody asking. */
.ca-gare .ca-gara:first-child{padding-right:24px}
.ca-gare .ca-gara + .ca-gara{
  border-left:1px dotted var(--tratteggio);
  padding-left:24px;
}

/* THE SPARROW DOES NOT GROW WITH THE PANEL. Its height is 168% of the
   body of the card (app/eroe.css) and on /risultati/ that is right,
   because there the body is --hero-h tall and does not move. Here the
   panel takes its measure from the content: at the widths where the
   two cards stack it reaches 508px, and the sparrow 1023, taller
   than the window, with head and tail cut off by the edges, which is
   no longer a sparrow but a texture. The ceiling is --hero-h, that is
   the measure it has over there. */
.ca-prima .bird{max-height:calc(var(--hero-h) * 1.68)}
/* THE AIR INSIDE THE CARD. Seven pixels between the pill, the service
   line and the names are the measure of a card standing in a list,
   where the neighbours do the separating. Here the card is alone
   inside a big panel and the three things read as stuck together.
   Fourteen is the same measure the wide card of /risultati/ puts
   between its bands. */
.ca-gara{display:flex;flex-direction:column;gap:14px;min-width:0;padding:10px}

/* THE CARD IS A LINK. The hover mark is the one the site already uses
   for the clickable rows of the other teams, two panels further on: a
   sunken background and the name taking the team colour. Not a shadow
   and not a lift: in here there is the sparrow already, and a card
   that rises off the ground would pass in front of it.
   The dashed outline stays where it is, because it is the frame of
   the column, not of the card. */
a.ca-gara{color:inherit;text-decoration:none;border-radius:12px;
  transition:background .14s}
/* THE VEIL IS TRANSPARENT, not a solid tint. Under the card there is
   the sparrow, and it is the figure that holds the panel together:
   covering it with an opaque rectangle under the mouse means rubbing
   it out for as long as the gesture lasts: the background lights up
   and the illustration disappears halfway, like a patch. With
   --me-fill, which is the brand veil the site uses everywhere to say
   «questa e roba di casa» and is transparent by construction, the
   sparrow still shows underneath and the card lights up all the
   same. */
a.ca-gara:hover{background:var(--me-fill)}
a.ca-gara:hover .nm{color:var(--brand-2)}
/* Reachable with the tab key, and where it lands has to be seen. */
a.ca-gara:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* THE COLUMN OF NUMBERS IS ON THE RIGHT, ALL OF IT. Score, score and
   (underneath) the boxes of the countdown are the same column, and
   a column is recognised by the fact that its pieces all end on the
   same vertical. Capping the rows to keep the score from running too
   far from the name stops the dashes halfway and not the countdown,
   that is two different right edges in the same card. The space
   between the name and the number is not empty: it is the column,
   and it is the same thing the wide box score does, where the set
   scores are on the right and the names on the left. */
.ca-gara .hero-rows{gap:13px}
/* ONE SINGLE PILL, with the two things inside it: which match it is
   and which tournament it belongs to. They are one piece of
   information, and split in two (faint text plus a plate) they read
   as two unconnected ones. */
/* AND INSIDE, THE COMPETITION COMMANDS. Which match it is in the
   sequence is a detail, WHICH TOURNAMENT IS BEING PLAYED is the
   information: it is the thing that tells a cup match from the start
   of the league.

   TWO CLOSE WEIGHTS AND ONE SINGLE COLOUR. Inside a pill everything
   is read at once: half a step of weight is enough to say which of
   the two halves is the news, and the colour stays one. Two different
   type sizes inside the same pill do not sit on the same line and the
   pill looks crooked; a veil on one half is another way of saying the
   same wrong thing. */
/* OUTLINED AND NOT FILLED, like the plate of the match card
   (app/gara.css .dcomp): they are the same thing said in the same way
   (which tournament is being looked at) and they have to weigh the
   same. A brand fill at the top of the biggest panel of the homepage
   pulls the eye before the team names, which are what the page is
   opened for.
   The colour does not change: from background it becomes border and
   word.
   The padding goes down by one pixel per side, because the border
   takes its own and this keeps the pill from growing. */
.ca-eti{display:inline-flex;align-self:flex-start;align-items:center;gap:9px;
  padding:4px 11px;border-radius:999px;
  border:1px solid var(--brand);color:var(--brand);
  font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase}
/* Both halves carry the same weight: at 400 against the 600 of the
   competition, the label reads as a ghost inside its own pill. What
   separates them is the hairline, not a difference in colour. */
.ca-eti b{font-weight:600}
/* The hairline between the two halves takes the colour of the border:
   on an outlined pill a veiled white one disappears. */
.ca-eti i{font-style:normal;font-weight:600;
  padding-left:9px;border-left:1px solid var(--brand)}
/* The card arrives from app/gara.css with the borders of the day
   column: here it stands alone inside a panel, so it takes a frame of
   its own and drops the hairline that divides it from the next
   one. */
.ca-gara .dcard{border:1px solid var(--line);border-radius:12px;border-bottom:1px solid var(--line)}

/* ============================================================
   THE OTHER TEAMS
   ============================================================ */
/* The brand bar in front of the group: it is the sign this site uses
   to say "this is one of ours": the same as the team chosen in the
   list and as the Silea's row in the table. */
.ca-gruppo{display:flex;align-items:center;gap:8px;padding:2px 0 8px;
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand-2)}
.ca-gruppo::before{content:"";width:3px;height:12px;border-radius:2px;background:var(--brand)}
.ca-gruppo:not(:first-child){padding-top:16px}
/* THE COLUMNS OF THE ROW say who, how they are doing (the balance),
   and where they stand. The team and the tournament sit on TWO LINES
   in the same column (the two-line item the site uses in all its
   lists) so the columns of numbers stay lined up and compare at a
   glance. */


/* The balance: the letters smaller and fainter than the numbers, so
   what reads is "14 6" and not "14V6P". */


/* The verdict takes the place of the position: of a finished season
   what is remembered is that they went up, not that they came
   second. */


/* ============================================================
   NEWS
   ============================================================ */
.ca-news .ca-corpo{padding-right:16px}
.ca-news ul,.ca-news li{list-style:none}
.ca-news li{display:flex;flex-direction:column;gap:3px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.ca-news li:first-child{padding-top:0}
.ca-news li:last-child{border-bottom:0}
.ca-news time{font-size:10.5px;font-weight:600;letter-spacing:.11em;color:var(--faint)}
.ca-ntit{font-size:14.5px;font-weight:600;line-height:1.4;color:var(--ink);text-wrap:pretty}
/* The summary, cut at two lines: real news items are not all the same
   length, and a panel where every item has a different height reads
   worse than one where they are all the same. */
.ca-som{font-size:12.5px;line-height:1.5;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* The date takes the brand colour: it is the only thing that tells
   one news item from another at a glance, and in grey it
   disappears. */
.ca-news time{color:var(--brand-2)}

/* ============================================================
   5×1000
   ============================================================ */
/* THE TITLE IS THE ONE OF THE SPONSOR PAGE'S INVITATION (.invito h2
   in pages/sponsor.css): same size, same weight, same kerning. The
   frame comes from there too, and taking the frame and then writing
   inside it in another face is redoing the same card by halves.

   THE TWO SENTENCES BELOW ARE THE SAME THING WRITTEN AT TWO MOMENTS
   (why to give, and where it is signed) so they are written alike:
   same size, same leading. The tone alone is enough to separate them,
   and it runs the right way: the text that persuades is the DARKER of
   the two, the practical note the lighter. A hierarchy said three
   times over (one size for the text, a smaller one for the note, and
   the text already faded) ends up fading even what counts. */
.ca-5-tit{font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.2;
  text-wrap:balance;color:var(--ink)}
.ca-5-txt{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
/* THE TAX CODE IS THE ONLY THING ANYBODY HAS TO CARRY AWAY from this
   panel: it stands in large, spaced figures, to be read one at a
   time, with the button that copies it alongside. All the rest is
   trimming. */
/* THE BOX OF THE TAX CODE IS VEILED, not solid: it sits in the middle
   of the shapes, and a solid background opens a rectangular window
   inside them, that is, it shows that the watermark is underneath
   and not inside. Veiled, the shapes pass through it and the box
   stands apart all the same, which is what it has to do: inside there
   is the number somebody has to copy out by hand onto a form. */
.ca-5-cf{margin-top:16px;padding:12px 14px;border-radius:11px;
  background:var(--velo);border:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.ca-5-lab{flex-basis:100%;font-size:10px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.ca-5-cf b{font-size:19px;font-weight:600;letter-spacing:.06em;color:var(--ink)}
.ca-5-copia{margin-left:auto;padding:5px 11px;border-radius:7px;
  border:1px solid var(--line-2);background:var(--panel);color:var(--brand-2);
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  transition:background .14s,border-color .14s,color .14s}
.ca-5-copia:hover{background:var(--zebra);border-color:var(--brand)}
.ca-5-copia.fatto{background:var(--me-fill);border-color:var(--brand);color:var(--brand-2)}
.ca-5-dove{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* What is not there yet: it says so, as on the teams page. */
/* --- THE WORKSITE, where the news will go --------------------------
   A BAND ON THE SLANT, like the tape in front of work in progress.
   On the slant and not straight: on a page made all of square panels
   a crooked line is seen at once and understood before it is read,
   while a straight line reading "in arrivo" would be one more empty
   state.

   THE STRIPES ARE THE BLUE OF THE MARK and not the yellow and black
   of real signs: this site does not have that yellow, and a yellow
   band in the middle of a blue page would be a piece of another site.
   The job is done by the slant, not by the colour.

   overflow:hidden on the container: the band is wider than the panel
   on purpose: ending inside the edges it would look like a card,
   while this way it passes BEHIND the panel and carries on outside,
   which is what tape does.
   The lettering sits on a solid background because over the stripes
   it would not read: the stripes pass behind it, not through it. */
/* THE TAPE REACHES THE EDGES, and to do so it eats the padding of the
   body with negative margins. A tape that stops twenty pixels from
   the edge is not a tape: it is a picture inside a frame. The real
   thing passes behind the panel and carries on outside, and the panel
   cuts it.
   The numbers are those of .ca-corpo alongside, plus the padding-right
   of the news: the day they change, they change here too. */
.ca-cantiere{position:relative;overflow:hidden;
  margin:-16px -16px -18px -20px;
  min-height:170px;height:calc(100% + 34px);
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.ca-nastro{
  width:150%;transform:rotate(-6deg);
  padding:6px 0;text-align:center;
  border-top:1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  /* Stripes as narrow as the band is low: inside a low band, wide
     stripes fit three of them and look like blotches instead of
     hatching. */
  background:repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--brand) 20%, transparent) 0 8px,
    transparent 8px 18px)}
.ca-nastro span{
  display:inline-block;padding:0 12px;border-radius:3px;
  background:var(--panel);
  font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand)}

.ca-vuoto{display:flex;flex-direction:column;align-items:center;gap:5px;
  text-align:center;padding:26px 20px;color:var(--muted)}
.ca-vuoto b{font-size:14px;font-weight:600;color:var(--ink-2)}

/* ============================================================
   COLOUR GOES WHERE THE MOST IMPORTANT THING IS
   ============================================================
   The first team is the panel that has to be seen first, and what
   says so is where it stands and how big it is. The language the site
   uses to say "this is the Silea" (the row in the table, the team
   chosen in the list, the cell of the open day) belongs to the
   places where that sentence is really being said.

   THE 5x1000 STAYS QUIET, and it is the only panel that ASKS for
   something: lit up in the brand colour, the most conspicuous thing
   on the page becomes the request for money. It has to be the other
   way round: the same choice already made for the «vuoi esserci
   anche tu» invitation on the sponsor page, which sits at the bottom
   and does not raise its voice. A panel like the others, and whoever
   is looking for it finds it.

   THE NEWS ARE THE QUIETEST: they are text, and text reads better
   with no colour around it.
   ============================================================ */
/* THE FIRST TEAM'S PANEL IS THE ONE OF /risultati/, colour included:
   house panel and dark bar, with no veils. Inside it there is the
   result panel already, which has a design and a colour of its own,
   and a coloured background on top of it means two overlapping
   languages for the same thing. */

/* The match card stays on solid paper: it is the thing to be read,
   and it stands out instead of blending in. */


/* THE FOUR HEADS ARE THE SAME. The hierarchy between the four panels
   is already spoken by position and by size; the bars are the frame,
   and a frame is noticed only when it differs from the others. */


/* THE RESULT PANEL HERE TAKES ITS MEASURE FROM THE CONTENT.
   On /risultati/ .hero-body has a FIXED HEIGHT (--hero-h) and
   .hero-content scrolls inside it: there that is right, because that
   panel has to stay the same height while the rounds are leafed
   through: changing height at every arrow, the page would dance.
   Here nothing is leafed through: the card is one and it is still. A
   fixed height becomes a white band above and below, and the
   overflow:auto a scrollbar inside a panel that already has
   everything in view. */
.ca-prima .ca-corpo{padding:0}
.ca-prima .hero-body{height:auto}
/* PART OF THE MARGIN LIVES IN THE CARDS AND NOT IN THE BODY. The
   cards are links and they light up under the mouse: a veil that
   begins exactly on the edge of the text looks like a drawing
   mistake, not an answer. Ten pixels of margin per card give it room,
   and the count adds up: ten plus twelve make the twenty-two the
   body would have on its own. */
.ca-prima .hero-content{height:auto;overflow:visible;padding:8px 12px 12px;gap:12px}

/* THE RESULT PANEL HERE TAKES ITS MEASURE FROM THE CONTENT.
   On /risultati/ .hero-body has a FIXED HEIGHT (--hero-h) and
   .hero-content scrolls inside it: there that is right, because that
   panel has to stay the same height while the rounds are leafed
   through: changing height at every arrow, the page would dance
   under the fingers.
   Here nothing is leafed through: the card is one and it is still. A
   fixed height becomes a white band above and below, and the
   overflow:auto a scrollbar inside a panel that already has
   everything in view. */
.ca-prima .ca-corpo{padding:0}
.ca-prima .hero-body{height:auto}
.ca-prima .hero-content{height:auto;overflow:visible;padding:18px 22px 20px;gap:12px}

}

/* pages/home.css */
@media (min-width:900px){
/* THE TAIL OF THE HOMEPAGE SHEET.
   ===================================
   Like the tails of the other pages: only corrections in here, all of
   them winning by POSITION. A @media adds no specificity, so written
   before the rule it means to correct it does nothing.
   This sheet is the LAST of the board before motion.css.            */

/* ============================================================
   1399: the pinwheel holds, it tightens
   ============================================================ */
@media (max-width:1399px){
  .ca-5-cf b{font-size:17px}
}

/* ============================================================
   THE TWO CARDS, THREE STATES, and the PANEL decides them
   ------------------------------------------------------------
   No @media here: the thresholds are in panel width, and
   shells/casa-desk.js writes them into data-gare after measuring with
   a ResizeObserver. The reason is written out in full there. In short:
   the CSS pixel is not the screen pixel (at 150% a 1900 point window
   measures 1270 for the CSS), and between the window and the cards
   there is the pinwheel anyway, which gives the panel four sixths of
   the page above 960px and the whole page below. Same window, two
   different widths.

   It is also the only way to have ONE number instead of two identical
   ones: the choice between wide card and compact card is markup, not
   sheet, and only the module can make it.

     larghe     panel >= 905px   side by side, full size
     strette    panel >= 790px   side by side, one step narrower
     impilate   panel <  790px   in a column, and the wide card returns
   ============================================================ */

/* --- one step narrower ---------------------------------------------
   EVERYTHING COMES DOWN TOGETHER, not just the name: the score, the
   crest, the gaps between rows and the service line. Shrinking the
   name and leaving the rest would give a card that is not narrower,
   only out of step. */
.ca-prima[data-gare="strette"] .ca-gara{padding:8px}
.ca-prima[data-gare="strette"] .ca-gare .ca-gara:first-child{padding-right:16px}
.ca-prima[data-gare="strette"] .ca-gare .ca-gara + .ca-gara{padding-left:16px}
.ca-prima[data-gare="strette"] .hero-rows{gap:11px}
.ca-prima[data-gare="strette"] .hrow{gap:11px}
.ca-prima[data-gare="strette"] .hrow .nm{font-size:17px}
.ca-prima[data-gare="strette"] .hrow .sc{font-size:26px;min-width:24px}
.ca-prima[data-gare="strette"] .cr{width:30px;height:30px;font-size:10px}
.ca-prima[data-gare="strette"] .hero-meta{font-size:13px}

/* --- in a column -----------------------------------------------------
   The rule turns: it divides the same two things as always, but now
   one sits under the other, and leaving it vertical would be a dotted
   line hanging in the air beside the second card. */
.ca-prima[data-gare="impilate"] .ca-gare{grid-template-columns:1fr;row-gap:var(--gap)}
.ca-prima[data-gare="impilate"] .ca-gare .ca-gara:first-child{
  padding-right:0;padding-bottom:var(--gap)}
.ca-prima[data-gare="impilate"] .ca-gare .ca-gara + .ca-gara{
  border-left:none;padding-left:0;
  border-top:1px dotted var(--tratteggio);padding-top:var(--gap);
}

/* ============================================================
   FLOW MODE: it has to sit at the END of the sheet
   ------------------------------------------------------------
   NO @media HERE: shells/casa-desk.js decides, writing data-flusso on
   the root element. The reason is written out in full there, and in
   two words it is this: unrolling depends not only on window width but
   on whether at least ONE WHOLE NEWS ITEM fits in the strip below, and
   how tall a news item is depends on how many lines its title takes. A
   @media cannot measure a title.
   ------------------------------------------------------------
   Below the threshold the pinwheel stacks and the page scrolls again,
   as on the other boards.

   THE THRESHOLD IS 1244, the number of the FIRST TEAM PANEL dressed as
   a page number. Inside the pinwheel that panel is four sixths of the
   grid, that is 0,64 of the page (measured: 1030 on 1600, 924 on 1440,
   794 on 1245) and its two cards stay side by side as long as the
   panel keeps the 790px of the narrow step. 790 divided by 0,64 gives
   1235, but the figure is rounded UP and verified: at 1240 the panel
   measures 789,6 and the narrow step gives up by less than a pixel.
   Thresholds derived from a proportion are checked to the pixel, or a
   hole one pixel wide is left open.

   IT IS NOT 1410, which is the measure for keeping them side by side
   at FULL size. The pinwheel is the design of this page, and giving it
   up to avoid shrinking a name by two points is a bad bargain. Between
   1244 and 1410 the cards tighten one step and the pinwheel stays.
   Below that not even the narrow step is enough and the page unrolls:
   there the panel goes from 790px to twelve hundred and the cards
   return to full size.

   TWO HUNDRED PIXELS OF WINDOW ARE NOT TWO HUNDRED PIXELS OF SCREEN.
   With the screen at 125% and the browser at 110% a 1918 point window
   measures 1395 for the CSS: that is the difference between a pinwheel
   and a column. Every pixel of margin here is worth one step of zoom.

   "flex:1" means "flex:1 1 0%", that is base ZERO: with automatic
   height the panels collapse flat, so they go back to flex:none to be
   measured on their content.
   THE ORDER HERE IS THE PHONE ORDER: first team, other teams, news,
   5x1000 last. Stacking the pinwheel in the order it is written would
   put 5x1000 in second place, which is exactly what the club did not
   want.
   ============================================================ */
html[data-flusso="si"],html[data-flusso="si"] body{height:auto;overflow:auto}
html[data-flusso="si"] #schermo{flex:none}
html[data-flusso="si"] .shell.casa{grid-template-columns:minmax(0,1fr);grid-template-rows:none;
  height:auto;overflow:visible;flex:none}
html[data-flusso="si"] .shell.casa .panel{flex:none;min-height:0}
html[data-flusso="si"] .ca-corpo{flex:none;min-height:0;overflow:visible}
html[data-flusso="si"] .ca-prima,html[data-flusso="si"] .ca-altre,
html[data-flusso="si"] .ca-news,html[data-flusso="si"] .ca-5{grid-column:1/2;grid-row:auto}
html[data-flusso="si"] .ca-prima{order:1} html[data-flusso="si"] .ca-altre{order:2}
html[data-flusso="si"] .ca-news{order:3} html[data-flusso="si"] .ca-5{order:4}
  /* The cards are not named here: here the panel becomes as wide as
     the page, and at that point the ResizeObserver measures them and
     decides on its own. It is exactly the case a window threshold gets
     wrong: the same window, two panel widths. */

/* The theme button stays in the corner even on a narrow window: the
   same two rules that close the tails of the other pages. */
@media (max-width:1180px){
  .top-in{gap:16px}
  .nav a{padding:9px 10px;font-size:14px}
}
@media (max-width:1000px){
  .nav a{padding:8px 7px;font-size:13.5px}
  .brand .wm{display:none}
}

}

/* tel/tokens.css */
@media (max-width:899px){
/* ============================================================
   THE PHONE PALETTE: the one for showing, not another house.
   ============================================================
   These values are NOT the ones in tokens.css. The two screens tune
   their greys differently: the board keeps rules and secondary text
   stronger (--line #B7CBD9) because it has to carry large panels and
   dense tables, while the phone keeps them much fainter
   (--line #E2ECF2) because at 390px a dark rule becomes a cage.
   Tipping one onto the other is not a tidy up, it is a redesign.

   The WAY the ground is named changes too. The board says --panel and
   --ground, the phone says --paper and --surface. Different names for
   the same idea, listed in docs/DIVERGENZE.md: until the club picks
   one, both stay.

   THREE STATES, as everywhere: bare :root is the light one, the block
   inside prefers-color-scheme is for whoever has a dark system and has
   not chosen, :root[data-theme="dark"] is for whoever has chosen. A
   token declared in the light and forgotten in one of the two darks
   stays light at night, which is the classic unreadable page defect:
   tests/css.js checks this sheet too.

   The (max-width:899px) band is not written here: build/build.js adds
   it, together with the order.                                       */

:root{
  --ink:      #020909;
  --ink-2:    #40525C;
  --brand:    #0377BD;
  --on-brand: #FFFFFF;
  --accent:   #52B2D0;

  --paper:    #FFFFFF;
  --surface:  #F4F8FB;
  --sunken:   #EAF1F6;
  --line:     #E2ECF2;
  --line-2:   #D3E1EA;
  /* THE TONE OF THE DOTTED RULE. A dotted rule does not show like a
     solid one: fewer than half its pixels are lit, so at equal colour
     it comes out lighter than it is. This tone is one step stronger
     than --line-2 in both themes, which is the amount that makes a
     dotted line weigh as much as a solid --line-2 one. */
  --tratteggio: #BACDDA;
  /* DARK ENOUGH TO READ: --faint stays above 4.5:1 and --muted above
     7:1, the two AA thresholds for text. A grey under 3:1 on light
     paper is not "readable with effort", it is not there at all, and
     the phone is the screen that needs more contrast and not less:
     outdoors, with the display dimming itself. */
  --muted:    #4C5E6A;
  --faint:    #5F7280;

  /* Header and drawer follow the theme like everything else. The rule
     under the header is lighter than on the board: there it separates
     two panels, here it only separates the top from the content. */
  --head:      #FFFFFF;
  --head-fg:   #0B1A22;
  --head-dim:  #54697A;
  --head-line: #DCE8F0;
  --menu-line: #E2ECF2;

  --up:       #12885A;
  --down:     #C6412F;
  /* The LIGHT green and red, for the win/loss label in the agenda
     card. Same idea as the board (styles/tokens.css), and in the light
     theme the same values too, because the starting green and red are
     the same here. In the dark they are not: there the phone lightens
     --up and --down and the patch under them has to follow. Solid and
     not veiled, since a veil leans on what is under it and here there
     are two different grounds (the paper and the day strip).
     Measured contrast of the text on top: 3,4:1 green and 3,7:1 red in
     the light, 5,4:1 and 4,7:1 in the dark, better in the dark because
     there the phone lightens --up and --down.
     CAREFUL: tests/theme.js resolves the tokens from the BOARD
     palette, so nothing measures these four lines on its own. They are
     computed by hand, and have to be redone by hand if anyone touches
     --up or --down above. */
  --up-fill:   #C9E7D8;
  --down-fill: #F6D6D0;

  --silea-fill: rgba(164,210,230,.16);
  --set-win:    rgba(164,210,230,.55);
  --bird-op:  .40;
  /* MINIMUM height of the Silea card: the same with a result, with a
     countdown and with a bye. Left to itself the card comes out ~206px
     with a result, ~187px waiting and ~150px on a bye, so changing
     matchday makes it dance and the whole list below with it. On the
     board the same number is 270px, because the five column box score
     fits in there as well. */
  --hero-h:   212px;
  --scrim:    rgba(2,9,9,.45);
  /* The ground the app rests on. It never shows, since the screen
     covers all of it, but if one day something did not reach the
     bottom, what lies under is this and not the white of the
     browser. */
  --stage:    #DCE7EE;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:      #EFF6F9;
    --ink-2:    #BCCAD2;
    --brand:    #52B2D0;
    --on-brand: #03151C;
    --accent:   #52B2D0;

    --paper:    #0B1317;
    --surface:  #050C0F;
    --sunken:   #101B21;
    --line:     #182831;
    --line-2:   #22343E;
    --tratteggio: #3E525F;
    --muted:    #7F949F;
    --faint:    #5D717C;

    --head:      #020909;
    --head-fg:   #FFFFFF;
    --head-dim:  #7E939F;
    --head-line: #122029;
    --menu-line: #16232A;

    /* In the dark the green and red of the board would disappear into
       the ground: here they gain brightness. It is the only point
       where the two layouts disagree even on semantic colours. */
    --up:       #2AAE74;
    --down:     #E0604D;
    /* In the dark "light" means dark: the patch has to stay under the
       green and red lightened above, not over them. */
    --up-fill:   #0F2A21;
    --down-fill: #2E1A15;

    --silea-fill: rgba(82,178,208,.10);
    --set-win:    rgba(82,178,208,.20);
    --bird-op:  .10;
    --scrim:    rgba(0,0,0,.62);
    --stage:    #04090C;
  }
}

:root[data-theme="dark"]{
  --ink:      #EFF6F9;
  --ink-2:    #BCCAD2;
  --brand:    #52B2D0;
  --on-brand: #03151C;
  --accent:   #52B2D0;

  --paper:    #0B1317;
  --surface:  #050C0F;
  --sunken:   #101B21;
  --line:     #182831;
  --line-2:   #22343E;
  --tratteggio: #3E525F;
  --muted:    #7F949F;
  --faint:    #5D717C;

  --head:      #020909;
  --head-fg:   #FFFFFF;
  --head-dim:  #7E939F;
  --head-line: #122029;
  --menu-line: #16232A;

  --up:       #2AAE74;
  --down:     #E0604D;
  --up-fill:   #0F2A21;
  --down-fill: #2E1A15;

  --silea-fill: rgba(82,178,208,.10);
  --set-win:    rgba(82,178,208,.20);
  --bird-op:  .10;
  --scrim:    rgba(0,0,0,.62);
  --stage:    #04090C;
}

}

/* tel/base.css */
@media (max-width:899px){
/* ============================================================
   THE GROUND OF THE PHONE SCREEN
   ============================================================
   There is no frame around the screen: the ground and the clipping are
   shared between the body of the page and #schermo.

   NOTHING SCROLLS AT PAGE LEVEL. Only the middle strip scrolls, inside
   the app, and that is what makes the screen feel like an application
   and not a document. With a scrolling body the sheets rising from the
   bottom would drag the page along under them, and the sponsor bar at
   the foot would slide away.

   This sheet also redoes the reset (*, button, :focus-visible):
   app/base.css does it for the board and is bounded above 900px, so it
   does not reach down here. The four lines are not identical to the
   board ones: the type is 16px at line height 1,4, not 17 and 1,5. */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{height:100%;overflow:hidden}

body{
  display:flex;flex-direction:column;
  background:var(--stage);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.u-num{font-variant-numeric:tabular-nums}
.lbl{
  font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);
}

/* #schermo takes whatever is left under the header and passes it on
   unchanged to the app. overflow:hidden: a panel that overflows
   overflows inside its own strip and does not lengthen the page. The
   sheets rising from the bottom are untouched, being fixed, so the
   clipping of an ancestor does not reach them. */
#schermo{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}

.app{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--surface)}

.scroll{
  flex:1;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
/* One pixel tall and at the top of the scrolling strip: when it leaves
   the view, the header recomposes. One pixel and not zero, because an
   element with no height never intersects anything. */
#sentinel{height:1px}

/* The scrollbar, thinner than on the board: here the screen is 390 and
   ten pixels are a fortieth of the usable width. The rest (colours,
   radius, transparent frame) comes from styles/scorrimento.css and is
   not repeated. */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{border-radius:5px;border-width:2px}

}

/* tel/testata.css */
@media (max-width:899px){
/* ============================================================
   THE HEADER, ON THE PHONE: corrections and the name that recomposes
   ============================================================
   The header is drawn by header.css, which belongs to every page, and
   below 900px it already draws it nearly as the phone wants: hammer on
   the left, brand in the middle, theme on the right, three columns
   44 · 1fr · 44. Four differences are left, and none of them is taste.

   1. --testa TALL IN ALL, hairline included, and with no padding.
      header.css puts min-height on the CONTENT and 4px of side
      padding: the hairline adds to it (one pixel across the width that
      pushes everything down) and the two icons slide 4px towards the
      middle. With box-sizing:border-box the height on the band takes
      in the hairline and the content stays a pixel lower. The
      min-height goes off with it, or it wins.
   2. NOT sticky. The page does not scroll here, only the middle strip
      does: a sticky would have nothing to follow.
   3. THE WEIGHTS. The shared chrome works on the board scale, where
      the highest declared is 600; the phone writes brand and watermark
      at 800. It is one of the catalogued divergences
      (docs/DIVERGENZE.md): it is not unified, it is reproduced.
   4. The theme button carries the 20px icon like the other two, not
      the 19 of the board. Half a pixel a side, but it is half a pixel
      in the top right corner of every screen.

   The colour is declared on .top so the children inherit it: the
   competition name below sets none of its own, and without this line
   it would inherit --ink, which on the light theme is darker than
   --head-fg.                                                         */
.top{position:static;flex:none;height:var(--testa);color:var(--head-fg);overflow:hidden}
.top-in{height:100%;min-height:0;padding:0;position:relative}
.tema svg{width:20px;height:20px}

/* HALF A PIXEL, AND IT SHOWS.
   THE LINK IS AS BIG AS THE CREST, not as the column. .brand leads to
   the home page and is the middle cell of a 44 · 1fr · 44 grid: as a
   grid item it stretches across the whole middle column and takes the
   full height of the band, so a finger landing anywhere at the top (to
   scroll, or by mistake) leaves the page. A brand is tapped where the
   brand is seen: justify-self tightens it onto the content and the
   height drops to that of the crest. That leaves 76 by 56 pixels of
   target, well over the 44 a tappable thing has to measure.
   The two measurements are EVEN and so is the band: the brand centres
   on a whole pixel and its edges keep their colour. With odd
   measurements it would redraw half a pixel higher, and that is the
   difference the test finds first. */
.brand{height:var(--stemma);justify-self:center}

/* ------------------------------------------------------------------
   THE HEADER THAT RECOMPOSES
   Scrolling, the competition bar leaves the stage and its name
   recomposes in the middle of the header: whoever looks never loses
   sight of what is being read, and the matchday stays stuck below.

   The middle column here is .brand, which comes from the shared
   chrome: wrapping it would change it for the sponsor page too, for a
   piece one page needs. So the second layer overlaps instead, and
   left/right at 44px are exactly the two edges of the middle column.

   The class "collapsed" sits on the BODY: the header is outside
   #schermo, and lighting both layers with a single class takes a
   common ancestor.
   ------------------------------------------------------------------ */
.hdr-comp{
  /* The full height and not "top to bottom": it is the same box, and
     it overruns the content of the band by a pixel. With bottom:0 the
     box would be a pixel shorter and the name would centre half a
     pixel above the brand it replaces. */
  position:absolute;left:44px;right:44px;top:0;height:var(--testa);
  display:flex;align-items:center;justify-content:center;gap:6px;
  opacity:0;transform:translateY(8px);pointer-events:none;
  font-size:13.5px;font-weight:600;letter-spacing:-.005em;
  max-width:100%;padding:0 4px;
  transition:opacity .22s ease, transform .22s ease;
}
/* NEVER wrapping and never wider than the column: the FIPAV names
   carry the sponsor inside, and "3ª Divisione U16 · 25/26" at 13,5px
   barely fits. */
.hdr-comp .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-comp .chev{color:var(--head-dim);font-size:11px}
.brand{transition:opacity .22s ease, transform .22s ease}
body.collapsed .brand{opacity:0;transform:translateY(-8px)}
body.collapsed .hdr-comp{opacity:1;transform:none;pointer-events:auto}

}

/* tel/piede.css */
@media (max-width:899px){
/* ============================================================
   AT THE BOTTOM: SWITCH AND SPONSOR BAR
   ============================================================
   The Results/Table switch sits at the bottom and not at the top
   because the thumb reaches the bottom. For the same reason it is not
   in the drawer: it is the most frequent gesture of the screen.     */
.tabs{
  flex:none;
  background:var(--paper);
  border-top:1px solid var(--line);
  padding:7px 12px;
}
.seg{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--sunken);border-radius:10px;padding:3px;
  position:relative;
}
/* The pill slides, the two words stay still: it reads as a switch and
   not as two buttons. It sits below (implicit z-index) with the
   buttons above, or it would cover the words. */
.seg .thumb{
  position:absolute;top:3px;left:3px;
  width:calc(50% - 3px);height:calc(100% - 6px);
  background:var(--paper);border-radius:8px;
  border:1px solid var(--line);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.seg button{
  position:relative;z-index:1;
  padding:9px 0;border-radius:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:var(--muted);transition:color .18s;
}
.seg button.on{color:var(--ink)}
.seg[data-tab="table"] .thumb{transform:translateX(100%)}

/* The sponsor bar: three plates, two below 340px. The layout decides
   the number (shells/phone.js) and writes the columns only when that
   number really changes: rewriting them at every jolt of the window
   would restart the rotation from the beginning. */
.sponsors{
  flex:none;
  background:var(--paper);
  border-top:1px solid var(--line);
  padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px));
  display:grid;gap:8px;
  --h:34px;                /* usable height of the mark inside the plate */
}
/* Plate white at night too: the mark files have a white ground baked
   in (none of them has an alpha channel), and on a dark ground they
   would be fifteen white rectangles. Fixed white means the ground of
   the file disappears into the plate. */
.slot{
  height:40px;border-radius:7px;
  background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;
  overflow:hidden;padding:0 7px;
}
/* --k evens out the AREA between marks of different proportions (here
   from 0.91 to 4.10): without it a long wordmark as tall as a square
   mark would weigh three times as much. object-fit rescales the marks
   wider than the plate, so the proportion never distorts. */
.slot img{
  display:block;width:100%;height:calc(var(--h) * var(--k,1));
  object-fit:contain;object-position:center;
  transition:opacity .42s ease;
}
.slot img.out{opacity:0}
.slot img.scuro{border-radius:3px}

}

/* tel/tendina.css */
@media (max-width:899px){
/* ============================================================
   DRAWER AND TOAST: the two corrections to the shared chrome
   ============================================================
   The drawer is drawn by drawer.css, which belongs to every page:
   measures, weights and wording come from there. Two differences
   remain, both of them measurable.

   1. THE CLOSE BUTTON SITS WHERE THE THEME BUTTON SITS. It is the same
      gesture in the same corner (the menu opens with the hamburger on
      the left and closes with the cross on the right) and the header
      already owns that place: 44px of target against the edge, with
      the icon falling twelve pixels inside. The header wins here,
      being the frame common to every page.
   2. THE UNDERLINE. On the board app/base.css takes it off with a
      reset on a, which does not reach down here (it is bounded above
      900px). Down here it comes off the item instead.              */
.menu-top{padding-right:0}
.menu .icon{width:44px;height:48px}
.menu nav a{text-decoration:none}

/* THE TOAST.
   120px from the bottom, which is above the sponsor bar and above the
   switch, where it covers nothing of what is being looked at. On the
   pages that scroll it sits at 30px, because down there is nothing.
   The colour: --paper is the white of the phone, --panel that of the
   board; at night the two are not the same black. */
.toast{
  position:fixed;bottom:120px;
  background:var(--ink);color:var(--paper);
  padding:10px 16px;border-radius:9px;
  font-size:12.5px;font-weight:600;
  max-width:78%;text-align:center;
}

/* The privacy line inside the drawer: it gets tapped, so it needs a
   target tall enough for a thumb. */
.menu-piede a{display:inline-block;padding:6px 0;color:inherit;text-decoration:underline}

}

/* sparrow.css */
/* sparrow: same figure and same animation as the other pages */
.birdwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  container-type:inline-size}
.bird{position:absolute;top:50%;left:0;height:210%;width:auto;aspect-ratio:3/2;
  background:url("/light_sparrow.04c82cab.svg") center/contain no-repeat;
  animation:fly 15s linear infinite}
@keyframes fly{
  0%      {transform:translate3d(calc(20cqw - 50%),-48%,0) rotate(-3deg);opacity:0}
  13.33%  {opacity:var(--bird-op)}
  86.67%  {opacity:var(--bird-op)}
  100%    {transform:translate3d(calc(80cqw - 50%),-52%,0) rotate(3deg);opacity:0}
}

/* tel/eroe.css */
@media (max-width:899px){
/* ============================================================
   THE SILEA CARD
   ============================================================
   It is the first thing seen and the only one that opens: the other
   matches of the round show the result and nothing more. Three states
   (played, waiting, rest) and a single height.                       */
.hero{
  background:var(--paper);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:14px;
  overflow:hidden;position:relative;
  background-image:linear-gradient(180deg,var(--silea-fill),transparent 70%);
  width:100%;text-align:left;
  /* ONE HEIGHT for the three states. Left alone the card runs about
     206px with the result, 187 waiting and 150 at rest: changing round
     it wobbles, and the whole list under it with it. The minimum evens
     them out and the name band takes up the slack. */
  min-height:var(--hero-h);
  display:flex;flex-direction:column;
}

/* ------------------------------------------------------------------
   THE SPARROW. On the phone it stays still, mirrored, hooked to the
   right edge of the card: part of it stays outside and the card cuts
   it, as if it were peeking in from the margin. No animation: on a
   small screen a continuous movement only distracts, which is why this
   is a figure of its own and not .bird from sparrow.css.
   ------------------------------------------------------------------ */
.hero-birds{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
.hero-bird{
  position:absolute;top:50%;right:0;
  height:170%;width:auto;aspect-ratio:3/2;
  background:url("/light_sparrow.04c82cab.svg") center/contain no-repeat;
  /* scaleX(-1) mirrors it, the 34% pushes it past the right edge */
  transform:translate(34%,-50%) scaleX(-1);
  opacity:var(--bird-op);
}
.hero-content{position:relative;flex:1;display:flex;flex-direction:column}
.hero-top{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 14px 0;
}
/* THE WHEN AND WHERE LINE, READABLE. Eleven pixels and the text grey,
   a step darker than the muted one: it stays an outline around the
   score, but an outline that can be read. */
.hero-meta{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chip{
  flex:none;padding:4px 9px;border-radius:6px;
  font-size:10.5px;font-weight:900;letter-spacing:.09em;
  background:var(--brand);color:var(--on-brand);
}
.chip.ghost{background:var(--sunken);color:var(--muted)}
/* Takes the slack when the card is taller than its content, so the
   band at the foot stays glued to the edge and the block stays
   centred. */
.hero-rows{flex:1;justify-content:center;
  padding:12px 14px 4px;display:flex;flex-direction:column;gap:9px}
.hrow{display:flex;align-items:center;gap:10px}
/* NAMES TRUNCATE, THEY NEVER WRAP. A wrapped club name makes its card
   or row taller than its neighbours, and on a phone that is the
   difference between a list you can run your eye down and one you have
   to read. The full name is always a tap away. */
.hrow .nm{
  flex:1;min-width:0;font-size:16px;letter-spacing:-.015em;
  line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hrow .sc{
  flex:none;font-size:26px;font-weight:800;letter-spacing:-.03em;
  min-width:22px;text-align:right;
}
.hrow.silea .nm{
  font-weight:700;text-transform:uppercase;letter-spacing:.005em;
}
.hero-sets{
  padding:2px 14px 12px;
  display:flex;flex-wrap:wrap;gap:5px;
  justify-content:flex-end;   /* right aligned, like the scores above */
}
/* set won by Silea: pale blue ground and the team colour for text */
.st.won{background:var(--set-win);color:var(--brand);font-weight:700}
.st{
  font-size:11px;font-weight:600;letter-spacing:.01em;
  padding:3px 6px;border-radius:5px;
  background:var(--sunken);color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.hero-foot{
  border-top:1px solid var(--line);
  padding:10px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  color:var(--brand);
}
.hero-foot .arr{color:var(--faint)}
.hero-kick{
  padding:14px;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:2px;
}
.hero-kick .sub{font-size:11.5px;color:var(--muted)}
/* THE COUNTDOWN, the same four boxes as the wide card. Four boxes
   with a number in each are read before the text around them, which is
   the point of putting them there.
   The proportions are the phone ones, not the desk ones: 52px wide
   instead of 60, so four of them plus their gaps fit inside 358px with
   room to spare and the card does not grow. */
.hero-kick .cd{display:flex;gap:6px;margin-top:8px}
/* FOUR BOXES OF ONE WIDTH. The minimum has to clear the widest label,
   GIORNI, or that box alone grows and the row reads as three boxes and
   a mistake. The desk sheet gets away with 60px because its label is
   smaller relative to it. The phone needs its own number, measured
   against its own type size. */
.hero-kick .cd div{background:var(--cd-fill);border:1px solid var(--cd-line);
  border-radius:8px;padding:3px 6px;min-width:52px;text-align:center}
.hero-kick .cd b{display:block;font-size:15px;font-weight:800;letter-spacing:-.03em;
  line-height:1.15;font-variant-numeric:tabular-nums;color:var(--ink)}
.hero-kick .cd span{display:block;font-size:8px;font-weight:600;letter-spacing:.09em;
  line-height:1.2;text-transform:uppercase;color:var(--faint)}

/* ---- crests ----
   Three sizes only: normal in the card, small in the lists and the
   table, large on a rest round. */
.cr{
  flex:none;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  font-size:8.5px;font-weight:800;letter-spacing:-.02em;
  background:var(--sunken);color:var(--muted);
}
.cr.vs{background:linear-gradient(145deg,var(--accent),var(--brand));color:var(--on-brand)}
.cr.sm{width:18px;height:18px;font-size:7px}
/* The sparrow in place of the circle and the name in the brand face,
   inside the card only: the reason at length is in app/tabellino.css.
   Here the circle has no border, so there is nothing to switch off. */
.cr.vs{background:var(--passero) center/contain no-repeat;color:transparent}


/* ---- rest round ----
   With an odd number of teams Silea sits some rounds out, and the card
   has to stay the same height: it is the same panel, with three
   centred lines inside. */
.hero.riposo{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;padding:26px 16px;text-align:center;border-left-color:var(--line)}
/* The sparrow is absolutely positioned, and in paint order POSITIONED
   elements sit above those in normal flow whatever the markup order:
   without this line the crest and the text end up under the sparrow.
   The other two cards do not have the problem because their content
   sits inside .hero-content, which is relative; here it is a direct
   child of the card. */
.hero.riposo > :not(.hero-birds){position:relative}
.hero.riposo .cr{width:40px;height:40px;font-size:12px}
.hero.riposo b{font-size:16px;font-weight:700;letter-spacing:-.01em}
.hero.riposo .sub{font-size:12.5px;color:var(--muted)}

/* ---- the dividing rule ---- */
.rule{
  display:flex;align-items:center;gap:10px;
  margin:22px 2px 10px;
}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--line)}
.rule span{
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);
}

}

/* tel/partite.css */
@media (max-width:899px){
/* ============================================================
   THE OTHER MATCHES OF THE ROUND
   ============================================================
   Compact rows: date and time on the left in a narrow column, the two
   teams on the right, the set scores below. They do not open, they
   show the result and nothing more, and Silea never appears in here,
   because it is in the card above.                                   */
.rows{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.row{
  /* 70 and not 58: "25/04/2026" has to fit on one line */
  display:grid;grid-template-columns:70px 1fr;
  width:100%;text-align:left;
  border-top:1px solid var(--line);
}
.row:first-child{border-top:0}
.rail{
  border-right:1px solid var(--line);
  padding:11px 0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-variant-numeric:tabular-nums;
}
.rail .d{font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.rail .t{font-size:12.5px;font-weight:600;color:var(--ink)}
.rail .f{font-size:9.5px;font-weight:800;letter-spacing:.07em;color:var(--faint)}
.body{padding:10px 12px 10px 11px;min-width:0}
.trow{display:flex;align-items:center;gap:8px}
.trow + .trow{margin-top:5px}
.trow .nm{
  flex:1;min-width:0;font-size:14px;
  line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.trow .sc{
  flex:none;font-size:16px;font-weight:800;letter-spacing:-.02em;
  min-width:14px;text-align:right;font-variant-numeric:tabular-nums;
}
.sets{
  margin-top:7px;font-size:10.5px;color:var(--faint);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* --- outcome: winner / loser ----------------------------------------
   Declared AFTER .hrow and .trow on purpose: both bases carry the same
   specificity (0,2,0), so only the order decides. If .trow .sc came
   later it would put weight 800 back on both scores and leave the
   difference to colour alone. Here the gap is a step of weight plus a
   step of colour, and it holds the same in both formats.             */
.win .nm{font-weight:700;color:var(--ink)}
.win .sc{font-weight:700;color:var(--ink)}
.lose .nm{font-weight:500;color:var(--ink-2)}
.lose .sc{font-weight:500;color:var(--ink-2)}

/* --- Silea panel: the accent follows IDENTITY, not the result -------
   Winner and loser do not apply here. The Silea row is always the one
   picked out, in team colour, even in a lost match: the colour says
   "this is us", the result is said by the numbers.
   Specificity 0,2,1 beats .win/.lose (0,2,0) without touching them, so
   in the compact rows (where Silea never appears) the logic by outcome
   stays valid.                                                      */
.hrow.silea .nm{color:var(--brand)}
.hrow.silea .sc{color:var(--brand);font-weight:800}
/* THE SCORE TAKES THE TEAM COLOUR, like the name beside it. It is the
   same rule the hero row above follows and the same one the board
   follows in .mres .me: our number is ours, whether we won it or lost
   it. Written after .win/.lose on purpose, because those paint by
   outcome and identity comes first. */
.trow.silea .nm{color:var(--brand);font-weight:700}
.trow.silea .sc{color:var(--brand);font-weight:800}
.hrow.opp .nm{color:var(--ink-2);font-weight:500}
.hrow.opp .sc{color:var(--ink-2);font-weight:500}

}

/* tel/altre.css */
@media (max-width:899px){
/* ============================================================
   THE OTHER TEAMS, NARROW LAYOUT
   ============================================================
   One CARD per team, not a row in a list. Four things keep the cards
   apart, and all four are grammar the phone already uses elsewhere:

     · the paper card on the sunken ground, like the blocks;
     · eight pixels of PAGE GROUND between them, not a hairline: a gap
       that reads from a distance;
     · the three pixel rule on the left, which on the calendar cards
       says home or away and here says HOW IT ENDED: green won, red
       lost, quiet while waiting. Scrolling the list shows how the club
       is doing before the names are read;
     · the group band.

   ONE MATCH ONLY, the last one. At 390px two matches per team make
   twenty rows of scrolling and the home page runs a mile. The next one
   is a tap away: the whole card leads to /risultati/ opened there.
   ============================================================ */
.al-elenco{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:8px}

.al-carta{
  display:block;
  padding:11px 13px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  color:inherit;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
a.al-carta:active{background:var(--sunken)}

/* THE RULE CARRIES THE OUTCOME. box-shadow and not border-left: a
   border shifts the content three pixels and the cards stop lining up
   with each other. It is the same rule the calendar uses for home and
   away (tel/gara.css). */
.al-carta.vinta {box-shadow:inset 3px 0 0 var(--up)}
.al-carta.persa {box-shadow:inset 3px 0 0 var(--down)}
.al-carta.pari  {box-shadow:inset 3px 0 0 var(--faint)}
.al-carta.attesa,.al-carta.vuota{box-shadow:inset 3px 0 0 var(--line-2)}

.al-nome{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.015em;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-comp{display:block;font-size:11.5px;color:var(--muted)}

/* One line: date, venue, outcome, score, opponent, arrow. The opponent
   is the only elastic part, so everything else keeps its place down the
   list and the arrow always closes the line. */
.al-riga{display:flex;align-items:baseline;gap:7px;min-width:0;margin-top:7px}
.al-riga.vuota{color:var(--faint);font-size:12.5px}
.al-riga .emo{font-size:12px;line-height:1;flex:none}
.al-sg{flex:none;font-size:13px;line-height:1.2}
.vinta .al-sg{color:var(--up)}
.persa .al-sg{color:var(--down)}
.attesa .al-sg{opacity:.75}
.al-pt{flex:none;font-size:15px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.al-avv{flex:1;min-width:0;font-size:12.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The date leads the line and gets a fixed width, so the venue icons
   line up in a column down the whole list. */
.al-quando{flex:none;min-width:38px;font-size:11.5px;font-weight:600;
  color:var(--ink-2);font-variant-numeric:tabular-nums}

/* Closes the line. Not a button (the whole card is the target), so it
   has neither border nor fill.
   THE NUDGE IS OPTICAL, NOT GEOMETRIC. Every box on this line shares
   the same centre to within a pixel, but U+2192 is drawn on the maths
   axis, about half an x-height above the baseline, while the digits
   beside it rise to cap height. Aligning the boxes aligns nothing the
   eye can see, so the glyph is lifted onto the optical line of the
   numbers. */
.al-arr{flex:none;font-size:13.5px;line-height:1;color:var(--brand-2);
  align-self:center;transform:translateY(-1px)}

/* THE GROUP HEADING IS A HEADING and looks like one: the brand tick
   the wide layout gives it, and air on both sides. More above than
   below, so it binds to the set it names rather than to the one it
   follows. */
.ca-gruppo{display:flex;align-items:center;gap:8px;padding:4px 0 12px}
.ca-gruppo::before{content:"";width:3px;height:12px;border-radius:2px;
  background:var(--brand);flex:none}
.al-elenco + .ca-gruppo{padding-top:26px}

}

/* tel/home.css */
@media (max-width:899px){
/* ============================================================
   THE HOME PAGE: the tail of the phone band
   The reel unrolls in four blocks, and the 5×1000 goes at the foot,
   as the club wants it: a request is met after seeing what the club
   does, not before. It is the same rule as the invitation on the
   sponsor page.
   This is the LAST sheet of the phone band before motion.css.
   ============================================================ */

/* Blocks as in the teams page: cards with a small title, not the
   panels with the dark bar of the board. At 390px a black band every
   screenful turns into a ladder. */
/* THE BLOCKS ARE SEPARATED BY A BAND, not by a hairline. A hair
   between two identical grounds separates nothing and the stack reads
   as one piece. Nine pixels of page ground between one block and the
   next is a separation that shows on a phone, and it is what the four
   panels spaced by --gap do on the board. */
.ca-pila{display:flex;flex-direction:column;background:var(--sunken)}
.ca-blocco{background:var(--paper);padding:0 16px 18px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:10px}
.ca-blocco:last-child{margin-bottom:0}
/* NO HAIRLINE UNDER THE HEADER. The first block touches the header,
   so a brand rule on top would underline the menu instead of setting
   the block apart from the rest. The menu asks for no underline: that
   the first block comes first shows from its being first. */
.ca-pila > section:first-child .ca-tit{color:var(--brand-2)}

.ca-tit{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 0 10px;
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted)}

.ca-anno{margin-left:6px;font-weight:500;letter-spacing:.06em;color:var(--faint)}
.ca-vai{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brand-2);text-decoration:none}


/* THE CARD IS A LINK, and it leads to the match on /risultati/.
   No hover state: there is no mouse here. What is needed is the mark
   of the TOUCH (the card sinks for a moment while the finger is down)
   and that the text does not turn blue and underlined, which is what
   it does on its own: tel/base.css carries no link reset. */
a.ca-gara{color:inherit;text-decoration:none;display:block;
  border-radius:12px;-webkit-tap-highlight-color:transparent}
/* THE PRESS BELONGS TO THE CARD. The card paints its own paper over
   the <a>, so a veil on the <a> lights only the margin around it: a
   glow behind an object that does not move. On a touch screen the
   answer to a finger is the thing under the finger: the card sinks a
   little and darkens, and lets go when the finger does.
   background-COLOR and not background: the card carries a gradient in
   the shorthand, and setting the shorthand would wipe it. */
a.ca-gara{-webkit-tap-highlight-color:transparent}
a.ca-gara .hero{transition:background-color .12s,transform .12s}
a.ca-gara:active .hero{background-color:var(--sunken);transform:scale(.985)}

/* In a column, and divided by the same dotted rule as the board:
   there it is vertical because the cards sit side by side, here
   horizontal because they sit one under the other. Same figure, same
   job. */
.ca-gare{display:flex;flex-direction:column;gap:16px}
/* SIXTEEN ABOVE AND SIXTEEN BELOW. Above, the gap of the column makes
   the space; below, the padding plus the two pixels of leading the
   pill carries as a line of text. Two pixels show, on a line that
   exists to sit in the middle. */
.ca-gare .ca-gara + .ca-gara{border-top:1px dotted var(--tratteggio);padding-top:14px}
/* TWO NEAR WEIGHTS AND ONE COLOUR. Inside a pill everything is read
   at once: half a step of weight says which of the two halves is the
   news, and the colour stays single. Two different sizes in the same
   pill do not sit on one line and the pill looks crooked. */
/* Outline and not fill, like the plate on the match card: the reason
   at length is in app/home.css. */
.ca-eti{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;
  margin-bottom:10px;padding:4px 10px;border-radius:999px;
  border:1px solid var(--brand);color:var(--brand);
  font-size:10.5px;font-weight:400;letter-spacing:.07em;text-transform:uppercase}
/* Both halves carry the same weight: at 400 against the 600 of the
   competition the label is a ghost inside its own pill. What separates
   them is the hairline, not a difference in colour. */
.ca-eti b{font-weight:600}
.ca-eti i{font-style:normal;font-weight:600;
  padding-left:8px;border-left:1px solid var(--brand)}

/* --- the other teams ----------------------------------------------
   Two columns and not three: at 390px the full league name does not
   fit beside the name, so it drops below as a subtitle. It is the two
   line item the site uses in all its lists. */
.ca-gruppo{padding:10px 0 6px;font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--brand-2)}


/* --- news ---------------------------------------------------------- */
.ca-news ul,.ca-news li{list-style:none}
.ca-news li{display:flex;flex-direction:column;gap:3px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.ca-news li:first-child{padding-top:0}
.ca-news li:last-child{border-bottom:0}
.ca-news time{font-size:10px;font-weight:700;letter-spacing:.11em;color:var(--faint)}
/* The headline of a news item. It is NOT called .ca-tit: that is the
   section heading, and under the same name the headline comes out
   grey, uppercase and tracked, wearing the style of another thing. */
.ca-ntit{font-size:14.5px;font-weight:700;line-height:1.4;color:var(--ink)}
.ca-som{font-size:12.5px;line-height:1.5;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ca-news time{color:var(--brand-2)}

/* --- 5×1000 -------------------------------------------------------- */
/* THE TITLE IS THE ONE OF THE SPONSOR PAGE INVITATION (.invito h2 of
   pages/sponsor.css): same size, same weight, same tracking. The frame
   comes from there too, and taking the frame then writing inside it in
   another face is making half of the same card.

   THE TWO SENTENCES BELOW ARE ONE THING SAID IN TWO MOMENTS (why to
   give, and where to sign), so they are written alike: same size, same
   leading. Tone alone separates them, and it goes the right way: the
   text that persuades is the DARKER of the two, the practical note the
   lighter. */
.ca-5-tit{font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.2;
  text-wrap:balance;color:var(--ink)}
.ca-5-txt{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
/* Veiled and not solid: the reason is in app/home.css. */
.ca-5-cf{margin-top:14px;padding:12px 14px;border-radius:11px;
  background:var(--velo);border:1px solid var(--brand);
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.ca-5-lab{flex-basis:100%;font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.ca-5-cf b{font-size:19px;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.ca-5-copia{margin-left:auto;padding:6px 12px;border-radius:8px;
  border:1px solid var(--line-2);background:var(--paper);color:var(--brand-2);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ca-5-copia.fatto{background:var(--me-fill);border-color:var(--brand)}
.ca-5-dove{margin-top:13px;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* --- THE WORKS, where the news will go -----------------------------
   A BAND ON THE SLANT, like the tape in front of a job in progress.
   On the slant and not straight: in a page made of square panels a
   crooked line shows at once and is understood before it is read,
   while a straight line saying "in arrivo" would be one more empty
   state.

   THE LINES ARE THE BRAND BLUE and not the yellow and black of the
   real signs: this site has no such yellow, and a yellow band in the
   middle of a blue page would be a piece of another site. The slant
   does the work, not the colour.

   overflow:hidden on the container: the band is wider than the panel
   on purpose. Inside the borders it would look like a tag, while this
   way it passes BEHIND the panel and carries on outside, which is what
   a tape does.
   The wording sits on a solid ground because over the lines it would
   not be legible: the lines pass behind it, not through it. */
/* THE TAPE REACHES THE EDGES. Down here the side padding belongs to
   the block and not to the body (.ca-blocco, 16 each side): those are
   the two numbers to eat. At the foot the block has 18 and those stay:
   a tape laid on the last pixel of the block would touch the first of
   the next. */
.ca-cantiere{position:relative;overflow:hidden;
  margin:0 -16px;
  min-height:130px;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.ca-nastro{
  width:170%;transform:rotate(-6deg);
  padding:5px 0;text-align:center;
  border-top:1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  background:repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--brand) 20%, transparent) 0 7px,
    transparent 7px 16px)}
.ca-nastro span{
  display:inline-block;padding:0 11px;border-radius:3px;
  background:var(--panel);
  font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand)}

.ca-vuoto{display:flex;flex-direction:column;align-items:center;gap:5px;
  text-align:center;padding:18px 16px 22px;color:var(--muted)}
.ca-vuoto b{font-size:13.5px;font-weight:600;color:var(--ink-2)}


/* ============================================================
   THE 5×1000 IS A BOX, on the phone too
   ============================================================
   On the other three blocks the content can lean on the ground of the
   page: they are lists, and a list touching the edges reads well. This
   one is a request, and a request with no outline looks like the tail
   of the block above. On the board the panel gives it the separation;
   here it needs a frame of its own.
   ============================================================ */
/* SAME SCHEME AS THE BOARD: the dashed frame of the sponsor page
   invitation, with no fill. It is the box of a request, not of a shop
   window, and it is the same on the wide layout and on the narrow
   one. */
/* THE 5×1000 SITS ON THE GROUND OF THE PAGE, not on a white card: the
   same thing the invitation "vuoi esserci anche tu" does on /sponsor/,
   where the dashed card floats on the ground and not inside a panel.
   The other three blocks are cards because they show things (matches,
   teams, news) and a card is how this site says "there is something in
   here". This one asks, and a request does not go in a window.
   NO PADDING ON TOP: the ground is the page ground and the card is
   only the dashes, so padding here would add to the gap the block
   above already leaves. */
/* AND THE FOOT MATCHES IT. Ten above, from the gap every block leaves
   to the next, and ten below: on a frame floating on the ground of the
   page the two empty spaces are seen side by side and have to be
   equal. */
.ca-blocco.ca-5{padding-top:0;padding-bottom:10px;background:transparent;
  border-top:none;border-bottom:none}
/* THE SHAPES IN WATERMARK, and they sit on THIS element and not on
   the band that holds it: .ca-5 is a transparent full width band and
   the real panel is the div. The div carries the dashes and the
   radius, so the div is what has to clip the watermark. On the band
   the shapes come out of the sides of the dashes and show as another
   layer. The reason at length is in app/home.css. */
.ca-5 > div{
  position:relative;overflow:hidden;
  border:1px dashed var(--line-2);border-radius:14px;
  padding:18px 16px 19px;
  background:transparent;
}
.ca-5 > div::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--sagome);
  -webkit-mask:url("/volleysilea-5x1000.1765a159.png") center/auto 92% no-repeat;
          mask:url("/volleysilea-5x1000.1765a159.png") center/auto 92% no-repeat;
}
.ca-5 > div > *{position:relative}
/* Veiled as on the board. This line comes AFTER .ca-5-cf and so it
   wins: with a solid ground the tax code panel would be a plug in the
   middle of the shapes on the phone and not on the board, the same
   card behaving in two ways. */
.ca-5 .ca-5-cf{background:var(--velo);border-color:var(--line)}


/* THE CARD HERE MEASURES ITSELF ON THE CONTENT. On /risultati/ it has
   a minimum height (--hero-h) that evens out the three states (played,
   waiting, rest), because there one round is leafed through after
   another and the card must not wobble under the fingers. Here nothing
   is leafed through: the card is one and it stands still, and the
   minimum would turn into an empty band. */
.ca-blocco .hero{min-height:0}

/* THE CARD BREATHES THE SAME ON BOTH SIDES OF THE NAMES. Below them
   the countdown sits 26px away: 4 of row padding, 14 of kick padding,
   8 of the boxes margin. Above them the service line gives only 12, so
   the pair of names hangs towards the top of the card instead of
   sitting in it. The names are what the card is about, and they get
   equal air on both sides. */
.ca-blocco .hero-rows{padding-top:26px}
/* And the same below the played card, where the band is the set
   scores rather than the countdown: one card breathing 26/26 next to
   one breathing 26/4 is the same mistake, just on the other card. */
.ca-blocco .hero-sets{padding-top:22px}

}

/* motion.css */
/* REDUCED MOTION.
   ================
   Always the last sheet of every page: it has to win over everything
   and media queries add no specificity, so position is its only
   weapon.

   Transitions go off, animations jump to their end. A .01ms duration
   lands the animation on its final state, which is where the content
   is meant to be read.                                               */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition:none !important;
    animation-duration:.01ms !important;
  }
  .card:hover{transform:none}
  /* The phone strip jumps to the point instead of gliding there.
     Changing matchday scrolls back to the top, and that glide is
     exactly the unexpected motion to remove. */
  .scroll{scroll-behavior:auto}
  /* On the sparrow the generic rule makes things worse: an infinite
     animation cut to .01ms repeats the flight thousands of times a
     second and the bird flickers. Here it simply stops, still at
     mid flight. */
  .bird{animation:none !important;opacity:var(--bird-op);
        transform:translate3d(calc(50cqw - 50%),-50%,0)}
}