/* 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}

}

/* app/lato.css */
@media (min-width:900px){
/* ============================================================
   THE SIDE BAR
   ============================================================ */
.season{width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line);flex:none;text-align:left;
  background:var(--zebra)}
/* Same story as .rlabel (see app/giornate.css): the row "STAGIONE"
   holds a single 11px child, and this line keeps it 16.5 tall instead
   of 25.5. Without it the whole side bar goes down nine pixels. The
   container has no text of its own: declaring 11px on it shows
   nowhere. */
.season > span:first-child{font-size:11px}
.season b{font-size:19px;font-weight:600;letter-spacing:-.01em}
.season .c{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* The list of seasons: a little panel that opens OVER the content,
   like the table's settings menu on mobile. It is not a band in the
   column, otherwise opening it would push the tree of competitions
   down. It lives inside .seasonwrap so it hooks onto the bottom of
   the button without the height having to be guessed by hand. */
.seasonwrap{flex:none;position:relative}
.season .c:last-child{display:inline-block;transition:transform .16s}
.season.on .c:last-child{transform:rotate(180deg)}
.seasons{
  position:absolute;top:100%;left:10px;right:10px;z-index:30;margin-top:-4px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:11px;
  box-shadow:var(--shadow);
  padding:5px;display:flex;flex-direction:column;gap:2px;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .16s,transform .16s;
}
.seasons.on{opacity:1;transform:none;pointer-events:auto}
/* THE SEASON SITS AT THE TOP IN ALL THREE PAGES, and the little panel
   opens downwards.
   It is the simplest truth: choosing the year is the FIRST decision,
   and everything below it (competitions, teams to tick, team to open)
   belongs to that year. Three side bars that behave the same way.
   Anchored at the top, the little panel also stays inside the box:
   hooked to the bottom of a button at the foot of the panel it would
   fall outside it (overflow:hidden) and vanish without a word. */
.seasons button{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:8px;text-align:left;
  font-size:15px;font-weight:400;color:var(--ink-2);transition:background .14s}
.seasons button:hover{background:var(--zebra)}
.seasons button.on{background:var(--me-fill);font-weight:600;color:var(--brand-2)}
.seasons .tag{font-size:9.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line-2);border-radius:4px;padding:2px 6px}
/* Three tabs at the top of the tree of competitions. 1fr columns: the
   width is the same for all three, it does not depend on how long the
   word is. minmax(0,1fr) because otherwise the content dictates the
   minimum and "PLAYOFF" takes more room than "COPPE". */
.ttabs{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;padding:10px 12px 0}
.ttabs button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:9px 4px;border-radius:9px;min-width:0;
  border:1px solid transparent;background:var(--zebra);
  font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);transition:background .14s,color .14s,border-color .14s;
}
.ttabs button:hover{background:var(--sunken);color:var(--ink-2)}
.ttabs button.on{background:var(--me-fill);border-color:var(--brand);color:var(--brand-2)}
/* The other competitions of the same team sit INSIDE the selected
   entry, as a third row, side by side. */
.coll{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.chip-c{display:inline-block;padding:4px 9px;border-radius:6px;
  border:1px solid var(--line-2);background:var(--panel);color:var(--brand-2);
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:background .14s,border-color .14s}
.chip-c:hover{background:var(--zebra);border-color:var(--brand)}

/* a section with no data: switched off. After :hover, otherwise it
   loses on equal specificity and lights up again under the mouse. */
.ttabs button[disabled],
.ttabs button[disabled]:hover{
  background:transparent;border-color:transparent;color:var(--faint);
  opacity:.45;cursor:default;
}
.ttabs svg{width:17px;height:17px;flex:none}
.ttabs .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tree{flex:1;min-height:0;overflow-y:auto;padding:14px 12px}
.tree .grp{padding:16px 10px 8px;font-size:11px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.tree button{width:100%;display:flex;align-items:center;gap:13px;padding:11px 12px;
  border-radius:10px;text-align:left;font-size:15.5px;font-weight:400;color:var(--ink-2);
  transition:background .14s,color .14s}
/* name + group on two lines, as in the mobile selector */
.tree .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tree .txt b{font-size:15px;font-weight:500;letter-spacing:-.005em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree .txt small{font-size:12px;font-weight:400;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* WHO PLAYS IT, between the tournament and the group. The tournament
   and the group say WHERE it is played, never who: with eleven teams
   of the club across five different tournaments, "U16 Provinciale /
   Girone C" does not say whether it is the LagoVerde or the MGI
   Tools, and those are two different teams with two different tables.
   It sits in the middle because that is the running order: the
   tournament, the team, and at the bottom the detail of the group.
   The tone falls from line to line (ink, half tone, faint) and with
   the entry selected it goes up one step all together, so the running
   order stays the same. */
.tree .txt .chi{font-size:12.5px;font-weight:500;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree button.on .txt .chi{color:var(--ink-2)}
/* MORE THAN ONE ENTRY INSIDE ONE ITEM. A team can be entered several
   times under different names (ui/iscrizioni.js): the item names them
   all, and each name keeps its own tournaments attached below it. The
   gap between one pair and the next is wider than the leading,
   otherwise four rows in a row read as a single list and which
   subtitle belongs to whom is lost. */
.tree .isc{min-width:0;display:flex;flex-direction:column;gap:1px}
.tree .isc + .isc{margin-top:7px}
.tree button.on .txt b{font-weight:600;color:var(--brand-2)}
.tree button.on .txt small{color:var(--muted)}
.tree button[disabled] .txt small{color:var(--faint)}
.tree button:hover:not([disabled]){background:var(--zebra);color:var(--ink)}
/* Selection: the same language that marks the Silea out in the table:
   a faint veil, a bar on the left, brand-coloured text.
   No solid cyan: in the dark the white on top of it does not read. */
.tree button.on{
  background-image:linear-gradient(var(--me-fill),var(--me-fill));
  box-shadow:inset 3px 0 0 var(--brand);
  color:var(--brand-2);
}
.tree button[disabled]{color:var(--faint);cursor:default}
/* THE BADGE IS IN THE BRAND FACE. This is the right place for a
   signage face: it is not text to be read but a MARK, one, two or
   three letters inside a small square, recognised by their shape
   before their letters, the way a number plate is recognised.
   D, 2D, U16: they have to tell each other apart at first glance in a
   column of six entries, and that is exactly what a squared, narrow
   face does better than a text one.
   On panel titles the same face is wrong, and for the opposite
   reason: there they are words, and words are read.
   NARROW FOR SIZE TOO: "U16" in a 30 square set in a text face
   reaches the edge. This one fits with air around it.
   Weight 400 everywhere, selected too: the face exists in a single
   cut, and asking for a fatter one means the browser thickens the
   outlines of this one. That the entry is chosen is already said by
   the solid background and the colour, which are two signals. */
.tree .bdg{flex:none;width:30px;height:30px;border-radius:8px;background:var(--sunken);
  color:var(--muted);display:grid;place-items:center;
  font-family:var(--titoli);font-size:12px;font-weight:400;letter-spacing:.02em}
.tree button.on .bdg{background:var(--brand);color:var(--on-brand)}
.tree .soon{margin-left:auto;font-size:10px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);border:1px solid var(--line);
  border-radius:5px;padding:2px 6px}
/* NO BACKGROUND AND NO HAIRLINE. There is a single button down here,
   and a band with a tone of its own would be a frame around nothing:
   a strip of a different colour at the foot of the panel, which is
   the first thing the eye finds coming down the bar. The button
   stands apart on its own, having its own border and its own colour. */
/* THE FOOT IS EMPTY NEARLY ALWAYS, AND WHEN EMPTY IT TAKES UP
   NOTHING. The button below lives only between 961 and 1399px: above
   that there is the column with the table and the button is not
   needed (app/griglia.css). With the padding on the container there
   is a white strip twenty-five pixels tall under the tree all the
   same, and what one sees is not an empty container: it is the panel
   failing to reach the bottom.
   THE SPACE BELONGS TO THE BUTTON, not to the container that holds
   it: that way it appears and disappears with it, without a second
   @media repeating the breakpoint, and without depending on which
   sheet is loaded after which. */
.side-links{padding:0;flex:none;display:flex;flex-direction:column;gap:9px}
.side-cal{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 14px;border-radius:10px;font-size:14.5px;font-weight:600;
  color:var(--brand-2);border:1px solid var(--line-2);
  transition:background .14s,border-color .14s}
.side-cal:hover{background:var(--sunken);border-color:var(--brand)}
.side-tbl{display:none;width:auto;margin:12px}
.side-cal .arr{color:var(--brand)}

}

/* app/gara.css */
@media (min-width:900px){
/* ============================================================
   THE MATCH CARD: the day column, and not only
   ============================================================
   Two pages draw a match (the calendar in the day column, the
   homepage in the first team's panel) and the markup already lives
   in a single place (ui/gara.js): the sheet follows it, so the two
   pages do not show the same card out of two sheets bound to drift
   apart.

   The measurements speak of the calendar's day column, because that
   is where they are decided, and they stay those: six cards that fit
   without scrolling are a promise of that page, not of this one.
   ============================================================ */

/* ============================================================
   THE DAY COLUMN
   One card per match, and six of them fit without scrolling: six is
   the worst day of 2025/26, and it is the reason this is a column and
   not a bubble hanging off the cell.
   ============================================================ */
.daybox{flex:1;min-height:0;overflow-y:auto}
/* 10 of padding and not 12, and it is not a cosmetic touch: the two
   team rows and the time are worth some ten pixels a card, and the six
   of the worst day fit without scrolling only with those pixels taken
   back from here. Six that fit is the promise of this column (see
   above). */
.dcard{display:grid;grid-template-columns:74px minmax(0,1fr);align-items:center;gap:13px;
  padding:10px 16px;border-bottom:1px solid var(--line)}
.dcard:last-child{border-bottom:0}
.dcard.casa{box-shadow:inset 3px 0 0 var(--brand)}
.dcard.via{box-shadow:inset 3px 0 0 var(--line-2)}
/* The cards that open say so under the mouse. The card of a match
   still to be played does not open and does not say so: there is no
   box score behind it, and on /risultati/ the same rule holds: the
   «Dettagli partita» button appears only once the match is over. */
.dcard.apre{cursor:pointer;transition:background .14s}
.dcard.apre:hover{background:var(--zebra)}

/* THE STRIP DOWN THE LEFT OF THE CARD.
   The score sits at the end of the two team rows, where it sits in
   the result card, and here there is room for the three things that
   are looked at first: what time it is played, how it ended, and
   whether we stay or we travel. */
.dwhen{display:flex;flex-direction:column;align-items:center;gap:3px}
.dwhen b{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.15}
/* The result in words. LIGHT green and red, not the solid ones:
   beside two rows of names a saturated fill pulls the eye away from
   exactly what is being read. The draw is neutral: it happened, but
   it is neither one thing nor the other.
   nowrap because the column is 74px wide and «SCONFITTA» on two lines
   makes the card fifteen pixels taller, that is one of the six of the
   worst day. */
.desito{padding:1px 6px;border-radius:5px;white-space:nowrap;
  font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.dcard.vinta .desito{background:var(--up-fill);color:var(--up)}
.dcard.persa .desito{background:var(--down-fill);color:var(--down)}
.dcard.pari .desito{background:var(--line-2);color:var(--ink)}
.dsede{display:flex;align-items:center;gap:4px;
  font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.dcard.casa .dsede{color:var(--brand-2)}
.dsede .emo{font-size:12px;line-height:1}

.dinfo{min-width:0;display:flex;flex-direction:column;gap:2px}
/* THE TITLE OF THE CARD IS THE COMPETITION, and the round sits at the
   end of the same line: it is the top of a stage of the run
   (app/percorso.css .cima), name on the left and when on the right. */
.dcima{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* THE COMPETITION PLATE IS THE ONE FROM HOME (.ca-eti in
   app/home.css): brand colour and the text on it. The tournament is
   the first thing that tells one match from another (a cup match and
   a league match look alike in everything else) and on the homepage
   a solid pill already says so. Two ways of announcing the same thing
   on two pages of the same site are two grammars to keep in
   agreement, and the stronger one is already chosen.
   OUTLINED AND NOT FILLED. A fill says its piece where the plate is
   alone on a screen; in a column of six cards it makes six brand
   blots in a row, and the eye lands on them instead of on the team
   names, which are what one is looking for. The outline says the same
   thing in a lower voice: same shape, same place, same colour. Only
   the border and the word carry it rather than the background.
   The padding goes down by one pixel per side: the border takes its
   own, and this keeps the plate from growing.

   The min-width:0 and the ellipsis stay: "3ª Divisione U16" fits
   inside a 400px column, "U16 Elite Provinciale" with a long phase
   name does not. */
.dcomp{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border:1px solid var(--brand);border-radius:999px;padding:3px 10px;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand)}
.dgio{flex:none;white-space:nowrap;font-size:11px;font-weight:400;color:var(--faint)}
/* THE TWO TEAMS, THE HOME SIDE ON TOP, THE SCORE AT THE END OF EACH
   ROW: the result card of /risultati/, in miniature. Ours stands
   out: brand colour and uppercase, which is the language the site
   uses to say "this is us" in the table and in the box score. Never
   smaller nor lighter than the opponent: same size, one step more of
   weight. This way who is hosting reads without looking at the icon
   in the column alongside, and when our row is the one BELOW it means
   we are away. */
.drow{display:flex;align-items:baseline;gap:10px}
/* THE ELLIPSIS AND NOT THE WRAP. The federation's names reach thirty
   characters and the column holds about twenty: wrapping, the card
   changes height from one match to the next and the six of the worst
   day no longer fit in the column. */
.dteam{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:14.5px;font-weight:400;line-height:1.25;color:var(--ink-2)}
.dteam.noi{font-weight:600;color:var(--brand-2);text-transform:uppercase;letter-spacing:.02em}
/* The score column NEVER narrows, so the name does not run into it,
   and it is there before the first whistle too, with the dash: were
   it to appear only once the match is played, the two rows would
   shorten the moment a result arrives. */
.dsc{flex:none;min-width:13px;text-align:right;
  font-size:15px;font-weight:600;line-height:1.25;color:var(--ink-2);letter-spacing:-.01em}
.dcard.attesa .dsc{font-weight:400;color:var(--line-2)}
/* Two lines, not two paragraphs: display:block and the margin only on
   the first, otherwise a gap opens between the name of the venue and
   the town that makes them look like two different pieces of
   information. They are the same one. */
.ddove{display:block;font-size:12.5px;font-weight:400;color:var(--muted);
  overflow-wrap:anywhere;line-height:1.35}
.ddove:first-of-type{margin-top:2px}
.dvuoto{padding:28px 22px;text-align:center;font-size:14px;color:var(--muted)}

/* Thin scrollbars, as in the tree of competitions.
   CAREFUL: in a list of selectors the pseudo-element attaches ONLY to
   the last one, so every selector carries its own. */
.squadre,.daybox{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.squadre::-webkit-scrollbar,
.daybox::-webkit-scrollbar{width:10px;height:10px}
.squadre::-webkit-scrollbar-track,
.daybox::-webkit-scrollbar-track{background:transparent}
.squadre::-webkit-scrollbar-thumb,
.daybox::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px;
  border:3px solid transparent;background-clip:content-box}

/* The break between home matches and away ones: a hairline and a
   little air above the first away game. Not a heading: that the two
   groups are two is already said by the emoji on every row, and this
   only shows where one ends and the other begins. */
.dcard.stacco{margin-top:14px;border-top:1px solid var(--line-2);padding-top:16px}

}

/* app/squadre.css */
@media (min-width:900px){
/* ============================================================
   THE TEAMS: photo, roster, main sponsor, latest matches
   It leans on everything the board already has: .shell, .panel,
   .p-head, .tree, .season. In here there is only what belongs to
   this page alone.
   ============================================================ */

/* ============================================================
   THE LAYOUT: whoever has a shape keeps it, whoever has none fills
   ============================================================
   Four panels in two columns, and for each of them the same question:
   is its height dictated by the content or by the space?

     CENTRE COLUMN      the roster is "auto": its height is dictated by
                        the TEXT, and all of that text has to fit: a
                        caption that scrolls is not a caption.
                        The photo takes what is left, keeping its 16:9
                        as long as there is room.
     RIGHT COLUMN       the logo is flex:none, always the same height:
                        it is a sponsor, and "it shows if there is room
                        left" is no way to keep a promise.
                        The calendar takes what is left and SCROLLS:
                        inside it there is a list, and a list that does
                        not fit is scrolled. Showing four out of five
                        without saying so would be worse.

   The page NEVER SCROLLS as long as the columns are three, exactly
   like /risultati/ and /calendario/: everything that has to give,
   gives inside the screen. It scrolls only below 960px, when the
   columns stack (pages/squadre.css).                                */
.shell.sqd{grid-template-columns:284px minmax(420px,1fr) 400px}
.shell.sqd .centre{grid-template-rows:minmax(0,1fr) auto;gap:var(--gap)}
.shell.sqd .aside{display:flex;flex-direction:column;gap:var(--gap)}

#spPanel{flex:none}
#calPanel{flex:1;min-height:0}

/* WITH NO LOGO THERE IS NO PANEL.
   [hidden] on its own is not enough: .panel declares display:flex,
   which is more specific than the browser's display:none and wins. It
   is the same trap as the card of the empty grid in the calendar
   (.cal-nota[hidden]). */
.shell.sqd .panel[hidden]{display:none}

/* ============================================================
   THE HEAD OF THE PHOTO PANEL: name and tournaments
   ============================================================ */
/* Two lines inside the dark bar, instead of the single small-caps
   line of the other panels. It is not a whim: the federation's name
   is the most important thing on the screen, and in 13px spaced small
   caps not even half of "F.LLI MORO VOLLEYSILEAU16 EL" would fit.
   min-height and not height: the names run from 14 to 28 characters
   and the bar has to be able to grow instead of cutting. */
/* SEVERAL ENTRIES STAND SIDE BY SIDE, divided by a hairline.
   A team can be entered more than once under different names
   (ui/iscrizioni.js), and here there is the width to set them
   alongside: each name with its tournaments underneath, so which
   tournament belongs to which name reads without pairing anything up
   again.
   justify-content:flex-start and not center: the pair has to begin at
   the left like any other heading, and center would push it into the
   middle of the bar the day the entries are two. */
.p-head.sq-testa{
  align-items:center;justify-content:flex-start;gap:0;
  min-height:58px;padding-top:9px;padding-bottom:9px;
}
/* Each one is as wide as it needs, not a third of the bar: shared out
   in equal parts, two entries end up at the two ends of the panel,
   and two names a hand's width apart no longer read as the same team.
   As things narrow they narrow all together (flex-shrink), and the
   ellipsis arrives only when the room really runs out. */
.sq-isc{min-width:0;flex:0 1 auto;display:flex;flex-direction:column;gap:1px}
/* A hairline divides them, and not a comma or a slash: it says they
   are two entries of the same team without adding a sign to read. */
.sq-isc + .sq-isc{margin-left:18px;padding-left:18px;
  align-self:stretch;border-left:1px solid var(--bar-line)}
/* THE TEAM BAR IS THE TALLEST of the four: it carries two lines, and
   it is the only one that says a thing that changes. Under each of
   the others there is something that needs real height: a 16:9 photo,
   a caption that must not scroll, a plate and a square. */
/* The height of those bars lives in app/griglia.css, where it holds
   for every page. */
/* The name is NOT spaced small caps like .p-head .t: it is a proper
   name, already written in uppercase by the federation, and the extra
   spacing makes it read as a label instead of as who they are. */
.sq-nome{max-width:100%;font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The tournaments: the same grammar as the subtitle in the list on
   the left and in the calendar's filter: smaller, fainter, not
   uppercase. Whoever has just clicked that entry finds the same words
   again here, and knows they opened the right thing without rereading
   them. */
.sq-sotto{max-width:100%;font-size:12.5px;font-weight:400;color:var(--bar-dim);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* A HAIRLINE BETWEEN ONE ITEM AND THE NEXT. A team can name several
   entries (ui/iscrizioni.js), so an item can be four lines tall, and
   four lines in a row with nothing in between read as four items:
   what is lost is exactly what the grouping has to say, that those
   two names are one single team and are ticked together.

   THE HAIRLINE LIVES IN THE GAP, not on the item. Drawn as a border
   of the item it becomes part of the item, and the item is a rounded
   slab: the ticked one comes out square on top and round below. This
   way the slab stays whole and the line passes through the air that
   separates them.
   Above every item except the first, otherwise one is left hanging at
   the end of the list.

   THE AIR ABOVE AND BELOW THE HAIRLINE IS THE SAME, and to have it
   the count has to take the line itself into account: the line takes
   one pixel inside the gap, so at the middle of ten it leaves four
   pixels on one side and five on the other. With a gap of 11 and the
   line at 6, five and five. */
#elenco button{position:relative}
#elenco button + button{margin-top:11px}
#elenco button + button::before{
  content:"";position:absolute;left:0;right:0;top:-6px;height:1px;background:var(--line);
}

/* ============================================================
   THE TEAM PHOTO
   ============================================================ */
/* 16:9, and the proportion is held by aspect-ratio and not by a
   height written by hand: the centre column changes width at every
   size of window, and a fixed height gives an empty band under the
   photo on one screen and a crop on another.
   THE PLACE OF THE PHOTO IS ITS OWN even when the photograph is not
   there yet: the empty box has the same shape and the same footprint
   as the full one. The page is laid out on how it will be, not on how
   it is this week.
   max-height:100% is the clause that adapts: the column is a
   flexible box with a real height, so the percentage resolves here:
   on a short window the ceiling wins and object-fit:cover crops from
   above and below, which in a team photo are ceiling and floor. */
.sq-fotobox{flex:1;min-height:0;display:flex;overflow:hidden}
/* THE PHOTO RIDES 25px HIGH. A team photo is 3:2 and the box is 16:9,
   so cover trims top and bottom evenly, and the bottom of a team
   photo is the front row, kneeling, while the top is gym ceiling.
   MINUS twenty-five, not plus: with cover the image is taller than the box,
   so a positive offset slides it DOWN and shows more ceiling. Negative
   lifts it and brings the feet back in. */
.sq-foto{display:block;width:100%;aspect-ratio:16/9;max-height:100%;margin:auto;
  object-fit:cover;object-position:center calc(50% - 25px)}
.sq-foto.vuota{
  display:grid;place-items:center;padding:0 24px;text-align:center;
  background:var(--sunken);color:var(--faint);
  font-size:13px;font-weight:500;letter-spacing:.02em;
}

/* The body of a panel. As a rule it is the one that scrolls and not
   the page, which is how the other two boards work.
   "fisso" is the roster: it takes its measure from the TEXT and never
   scrolls, which is the promise of this page. flex:none is
   compulsory, otherwise in an "auto" row of the grid the body would
   be worth zero and only the dark bar would be left. */
.sq-corpo{flex:1;min-height:0;overflow-y:auto}
.sq-corpo.fisso{flex:none;overflow:hidden}
/* THE CALENDAR PANEL SCROLLS. Five cards with the address of the
   venue are about four hundred and fifty pixels, and the height the
   column leaves it depends on the window: on a short screen the fifth
   match would stay outside. Better to scroll than to show four and
   not say so. */
#calbox{flex:1;min-height:0;overflow-y:auto}

/* ============================================================
   THE ROSTER: a caption, not a column
   ============================================================ */
/* The names read in a row, in the order they stand in the photo
   above: «Da sinistra in alto: …», as under the team photos of the
   printed calendars. It is running text, so it is set as text.

   The leading is wide: in here there are twelve surnames in a row
   separated by commas, and whoever reads is going back and forth
   between a face in the photograph and a name in the line. Lines too
   close together lose the place at every trip.

   NO MAXIMUM MEASURE. A max-width of 74ch (the comfortable measure
   given to a text to be read) is the wrong rule for this text: a
   caption is not read, it is scanned looking for a name. Cut at 74
   characters it wraps with half the column still free and makes two
   lines where one is enough, which steals from the roster exactly the
   height it needs in order not to scroll. */
.sq-dida{padding:15px 20px 16px;display:flex;flex-direction:column;gap:7px}
.sq-dida p{font-size:14.5px;line-height:1.7;color:var(--ink-2);text-wrap:pretty}

/* The staff is a group OF ITS OWN and not the tail of the roster:
   they are the people one writes to, not the ones who play. IN A ROW
   like the caption, though: three names stacked up down here would
   open a column again. */
.sq-staff{border-top:1px solid var(--line)}
.sq-gruppo{padding:14px 20px 6px;font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.sq-staff-riga{padding:0 20px 18px;font-size:14.5px;line-height:1.9;color:var(--muted)}
/* Every person is a small block that does NOT break: name and role
   have to wrap together, otherwise «Mario» reads at the end of one
   line and «Bianchi Allenatore» at the start of the next. */
.sq-p{display:inline-block;white-space:nowrap;margin-right:16px}
.sq-p b{font-weight:600;color:var(--ink-2)}
.sq-p i{font-style:normal;font-size:11.5px;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;color:var(--faint)}

/* What is not there yet. It is not an error and it keeps from looking
   like one: it says what is missing and who can send it. */
.sq-vuoto{display:flex;flex-direction:column;align-items:center;gap:5px;
  text-align:center;padding:30px 26px;color:var(--muted)}
.sq-vuoto b{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.sq-vuoto span{font-size:13px;font-weight:400;color:var(--faint);max-width:34ch}

/* ============================================================
   THE MAIN SPONSOR
   ============================================================
   Logo and name, and no more: no category, no town, no line of
   description. The panel is a plate plus a line tall, ALWAYS the
   same: it does not grow when there is room to spare and above all it
   does not shrink when there is none.
   ============================================================ */
.sq-sp{display:flex;flex-direction:column;padding:14px}
.sq-sp.apre{transition:background .14s}
.sq-sp.apre:hover{background:var(--zebra)}

/* THE PLATE IS THE ONE OF THE SPONSOR PAGE, measurements included: a
   box 124 tall with a logo at most 108 tall inside it. Those
   proportions are tried on all fifteen of the club's logos, the long
   and narrow ones included, so the same company looks the same
   wherever it is met.
   It stays WHITE at night too: the logo files carry a white
   background baked in and none of them has an alpha channel. On dark
   paper a rectangle would show.

   IN PIXELS AND NOT IN PERCENTAGE. Inside a plate laid out in a grid
   a percentage height does not resolve against the height of the
   container, it falls back to auto, and the logo stands 318 pixels
   tall inside a box of 148, that is, out past the edges and cut in
   half. Measured: img 328x318 in a plate of 370x148.

   HOW BIG IT SITS INSIDE is said by the sponsor bar, which does this
   job: plate 56, logo 48, that is 86%. At 61% (76 inside 124) it
   shows: a white band above and one below as big as half the logo.

   --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. It never goes above 1 (fattore(), in
   pipeline/logos.js), so --h is the real ceiling. */
.sq-placca{--h:108px;flex:none;height:124px;
  border-radius:10px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden;padding:0 18px;
  transition:border-color .16s}
.sq-sp.apre:hover .sq-placca{border-color:var(--brand)}
.sq-placca img{display:block;width:100%;height:calc(var(--h) * var(--k,1));
  object-fit:contain;object-position:center}
.sq-placca img.scuro{border-radius:3px}

.sq-sp-nome{flex:none;display:block;padding:12px 4px 2px;text-align:center;
  font-size:16px;font-weight:600;letter-spacing:-.012em;line-height:1.3;
  color:var(--ink)}
.sq-sp.apre:hover .sq-sp-nome{color:var(--brand-2)}

/* ============================================================
   THE GLIMPSE OF THE CALENDAR
   ============================================================ */
/* THE CARDS ARE THE CALENDAR'S (app/gara.css), and they are not
   touched up: the right-hand column is 400px wide, that is the same
   measure as the day column of /calendario/, which is the one the
   card is drawn for. Here it only says how they sit INSIDE a panel
   rather than inside a column. */
.sq-gara{display:block;color:inherit;text-decoration:none}
.sq-gara:hover .dcard{background:var(--zebra)}
#calbox .dcard{border-bottom:1px solid var(--line)}
#calbox > :last-child .dcard{border-bottom:0}

/* THE DATE, at the top of the when column. Fainter than the time,
   which is the number one is after: the date says WHICH day among six
   rows, the time says at what hour it is played. */
.ddata{display:block;font-size:11px;font-weight:500;color:var(--faint);
  margin-bottom:1px}
.dcard.casa .ddata{color:var(--muted)}

/* The shortcut in the dark bar of the panel. */
.p-head .p-vai{margin-left:auto;display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--bar-dim);transition:color .14s}
.p-head .p-vai:hover{color:var(--bar-fg)}
.p-head .p-vai svg{width:14px;height:14px}
.p-head .p-vai[hidden]{display:none}

}

/* pages/squadre.css */
@media (min-width:900px){
/* THE TAIL OF THE TEAMS PAGE SHEET.
   ==========================================
   Like the tails of the other two pages, and for the same reason: what
   is in here is all corrections, and they ALL win by POSITION. A
   @media adds no specificity, so written before the rule it means to
   correct it loses on order and does nothing at all, with no errors
   and no warnings. This sheet is the LAST of the page before
   motion.css, and the order lives in build/build.js.

   In particular it has to come after app/griglia.css, which carries
   the two thresholds of the results board (1399 and 960): the first
   one is rewritten from scratch here, for the reasons below.        */

/* ============================================================
   1399: THE THIRD COLUMN DOES NOT GO AWAY
   On the results page, below 1400px, the table leaves the board and
   takes shelter behind a button: it is side information, and the
   centre needs those 400px for the box score.
   Here the third column is not side information and has nowhere to go:
   it holds the main sponsor and the kit, and there is no button to put
   them behind. Inventing one would mean inventing the modal this page
   does not have. Hidden, those two things would be invisible on any
   ordinary laptop, that is on the screen of half the audience. It
   narrows, it stays.
   ============================================================ */
@media (max-width:1399px){
  .shell.sqd{grid-template-columns:284px minmax(420px,1fr) 340px}
  /* FLEX and not grid. app/griglia.css switches the third column off
     here (.aside{display:none}) and it has to come back on AS IT IS,
     that is as a flex column. With "display:grid" the two flex values
     of the panels count for nothing and the kit square collapses to
     zero: measured 0x0 at 1366x768 and at 1280x720, two ordinary
     laptop screens. */
  .shell.sqd .aside{display:flex}
  /* Narrower column, shorter plate: the mark inside stays at 86%, the
     proportion of every plate on the site. */
  .sq-placca{--h:92px;height:106px;padding:0 16px}
  .sq-sp{padding:12px}
  .sq-sp-nome{font-size:15px}
  .sq-dida{padding:14px 16px 16px}
  .sq-dida p{font-size:14px}
  .sq-staff-riga{padding:0 16px 16px;font-size:14px}
}

/* ============================================================
   FLOW MODE: it has to sit at the END of the sheet
   Below 960px the three columns stack and the page really scrolls
   again. "flex:1" means "flex:1 1 0%", that is base ZERO: with
   automatic height it contributes nothing and the panels collapse
   flat. Here they go back to flex:none so they measure on content.

   BY WIDTH ONLY, and not by height as on the other two pages. There a
   max-height threshold exists because the month grid and the box score
   have a minimum height below which they stop reading. Nothing here
   works that way: what has to give gives inside the screen, since the
   team photo shortens by cropping and the kit square shrinks while
   staying square. A page that starts scrolling because the window is
   short, while the three columns would still fit, is only a page that
   no longer holds still.
   ============================================================ */
@media (max-width:960px){
  html,body{height:auto;overflow:auto}
  /* #schermo is the container where the page mounts one layout or the
     other, and it falls into the same trap as all the rest. */
  #schermo{flex:none}
  .shell.sqd{grid-template-columns:minmax(0,1fr);height:auto;overflow:visible;flex:none}
  .shell.sqd .centre{grid-template-rows:none}
  .shell.sqd .side .panel,.shell.sqd .tree,.sq-corpo,#divbox,
  #spPanel,#divPanel{
    flex:none;min-height:0;max-height:none;height:auto;
  }
  .shell.sqd .tree,.sq-corpo{overflow:visible}
}

/* The theme button stays in the corner even on a narrow window: first
   the links compact, then the lettering next to the crest goes. These
   are the same two rules that close the tails of the other two pages,
   and they cannot move into header.css: there they would apply below
   900px too, where the mark centred in the phone header would
   disappear. They live in the board band, one copy per page, and the
   band is written by build/build.js. */
@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/barre.css */
@media (max-width:899px){
/* ============================================================
   THE TWO BARS ABOVE THE CONTENT
   ============================================================
   The first says WHAT is being looked at (competition and season) and
   scrolls away, because once read it is done. The second says WHERE
   inside that competition (the matchday, or the table caption) and
   stays stuck at the top, because that one is always needed.        */

/* ---- competition bar: scrolls away ---- */
.compbar{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:12px 12px 12px 14px;
  display:flex;align-items:center;gap:10px;
}
.comp{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:11px;text-align:left;
}
.badge{
  flex:none;width:38px;height:38px;border-radius:10px;
  background:var(--ink);color:var(--paper);
  display:grid;place-items:center;
  font-size:15px;font-weight:800;letter-spacing:-.03em;
}
/* THE COMPETITION TAG, in the brand face: the reason at length is in
   app/lato.css, where the same tag appears in the board tree.
   .badge alone is not enough: the teams page uses the same class for
   the tag of a TEAM, and that sheet loads alongside this one. Only the
   competition is tinted here, in the bar at the top and in the sheet
   that a tap opens.
   Letter spacing is zero: this face is narrow already. Weight is 400
   because it has a single cut. */
.compbar .badge,
#compList .opt .badge{font-family:var(--titoli);font-weight:400;letter-spacing:0}

.comp-txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.comp-txt .t{
  font-size:16px;font-weight:700;letter-spacing:-.015em;
  display:flex;align-items:center;gap:5px;
}
.comp-txt .t .chev{color:var(--faint);font-size:11px;flex:none}
.comp-txt .s{
  font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* The season is a pill, not a full width button like in the board
   sidebar: here it shares the line with the competition name, which is
   the important part, so it takes as little room as it can. */
.season{
  flex:none;
  display:flex;align-items:center;gap:5px;
  padding:7px 10px;border-radius:8px;
  background:var(--sunken);
  font-size:13px;font-weight:700;letter-spacing:.01em;
}
.season .chev{color:var(--faint);font-size:10px}

/* ---- sub bar: stays stuck ---- */
.subbar{
  position:sticky;top:0;z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  height:52px;
}
.rounds{height:100%;display:grid;grid-template-columns:44px 1fr auto 44px;align-items:center}
.rnav{
  height:44px;display:grid;place-items:center;color:var(--ink);
  transition:opacity .15s;
}
.rnav[disabled]{opacity:.22;cursor:default}
.rnav svg{width:16px;height:16px}
.rmid{text-align:center;line-height:1.15}
.rmid .n{font-size:13px;font-weight:800;letter-spacing:.09em}
.rmid .d{font-size:11px;color:var(--muted);margin-top:1px}
/* table sub header: caption on the left, options on the right */
.tblbar{height:100%;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:0 12px 0 14px;position:relative}

/* switch inside the cup run: matches or group.
   It sits in the bar, next to the caption: compact. */
.pswitch{flex:none;display:flex;gap:4px;background:var(--sunken);
  border-radius:9px;padding:3px}
.pswitch button{
  padding:6px 12px;border-radius:7px;background:transparent;color:var(--muted);
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.pswitch button.on{background:var(--brand);color:var(--on-brand)}

/* ---- cup run ----
   The markup comes from src/scripts/ui/percorso.js, the same for both
   layouts. Here are the phone measurements: the board ones, a couple
   of points smaller. */
.perc{padding:4px 0 10px}
.perc .tappa{padding:12px 14px;border-bottom:1px solid var(--line)}
.perc .tappa:last-child{border-bottom:0}
.perc .tappa.qui{background:var(--silea-fill);box-shadow:inset 3px 0 0 var(--brand)}
.perc .cima{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px}
.perc .nome{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
/* Two team lines per match, home on top, one score per line: the same
   shape as the Silea card. The markup is the board one
   (ui/percorso.js), a couple of points smaller here. */
.perc .gara{display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;
  gap:8px;padding:4px 0;font-size:13px;color:var(--muted)}
.perc .gara .sg{font-weight:700;text-align:center}
.perc .gara.vinta .sg{color:var(--up)}
.perc .gara.persa .sg{color:var(--down)}
.perc .gara .sq{min-width:0;display:flex;flex-direction:column;gap:1px}
.perc .gara .ln{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.perc .gara .ln.noi{color:var(--brand);font-weight:700}
.perc .gara .ris{display:flex;flex-direction:column;gap:1px;text-align:right;
  font-variant-numeric:tabular-nums}
.perc .gara .ris b{font-weight:700;color:var(--ink);line-height:1.3}
/* THE DATE IN PLACE OF THE SCORE. It is wider than a set count and
   must neither wrap nor push the names. Plain weight and tone, because
   a score is a result while a date is service information. Tabular
   figures, so that four dates one under the other read as a column. */
.perc .gara .ris .na{font-weight:500;font-size:11px;color:var(--muted);white-space:nowrap}
/* A HAIRLINE BETWEEN ONE MATCH AND THE NEXT in the same group. A cup
   group holds four matches, each two lines tall: with nothing in
   between, eight lines of names read as a single list and only the
   hourglass says which two go together. The hairline is as light as
   the ones in the site lists. The LAST match has none: the stage
   border, or the outcome line, already closes it. */
.perc .gara + .gara{border-top:1px solid var(--line);padding-top:7px;margin-top:7px}
.perc .esito{margin-top:6px;font-size:12px;color:var(--muted)}
.perc .esito b{font-weight:700;color:var(--ink-2)}
.perc .esito.vinto b{color:var(--up)}

.tblcap{
  display:flex;align-items:center;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);
}

.perc .gara .sg{font-size:12px}

}

/* 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/fogli.css */
@media (max-width:899px){
/* ============================================================
   THE SHEETS THAT RISE FROM THE BOTTOM
   ============================================================
   Competition, season and match detail are not pages: they are sheets
   that cover the screen for the length of a choice and then go. They
   rise from the bottom because that is where the thumb comes from, and
   they close by dragging down, by tapping the veil, or with Esc.

   FIXED POSITION, not absolute. Anchored to #schermo they would start
   BELOW the header and the veil would leave it uncovered. Fixed, they
   measure against the window, which is the box they need.            */
.scrim{
  position:fixed;inset:0;z-index:60;
  background:var(--scrim);
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.scrim.on{opacity:1;pointer-events:auto}

.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--paper);
  border-radius:18px 18px 0 0;
  transform:translateY(101%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  max-height:82%;display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.sheet.on{transform:none}
/* drag zones: the browser must not read the gesture itself */
.grab,.md-fixed{touch-action:none}
.grab{padding:9px 0 4px;display:grid;place-items:center;flex:none}
.grab i{width:34px;height:4px;border-radius:2px;background:var(--line-2);display:block}
/* THE TITLE APART FROM THE HANDLE. A grip to pull and the name of
   what is on screen are two unrelated things, and stuck together they
   read as one piece. Twelve above and twelve below: the title floats
   in its own space and the bar goes back to being a grip. */
.sheet h3{
  flex:none;padding:12px 18px 12px;
  font-size:16px;font-weight:700;letter-spacing:-.015em;
}
/* position:relative for a sure reference: the measurements of the
   items are read against this box, not against some ancestor */
.sheet-body{position:relative;flex:1;min-height:0;overflow-y:auto;padding:0 10px 14px;overscroll-behavior:contain}
/* FIXED HEIGHT, not "as much as it takes".
   The match sheet is set on the tallest of the three tabs, the five
   set chart: 120 + 122 + 48 + 234 = 538. Changing tab (chart, photos,
   report) the sheet neither shortens nor wobbles.
   The competition one sits at 82% for the same reason: changing
   section the list gets shorter or longer, and with automatic height
   it wobbles under the fingers while choosing. */
#matchSheet{height:min(88%,538px)}
#compSheet{height:82%}
/* score, box score and tabs stay put at the top, only the panel below
   scrolls: the gallery does not carry the result away */
.md-fixed{flex:none;border-bottom:1px solid var(--line)}
.md-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
.md-scroll::-webkit-scrollbar{width:8px}
.md-scroll::-webkit-scrollbar-track{background:transparent}
.md-scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:5px;
  border:2px solid transparent;background-clip:content-box}
/* The scrollbars are in styles/scorrimento.css, and the phone size in
   tel/base.css. */
/* Three tabs at the top of the "Scegli la competizione" sheet. 1fr
   columns: the same width for all three, whatever the length of the
   word. minmax(0,1fr) or the content dictates the minimum. */
.ttabs{
  flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;padding:4px 14px 10px;
}
.ttabs button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:9px 4px;border-radius:10px;min-width:0;
  border:1px solid transparent;background:var(--sunken);
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}
.ttabs button.on{background:var(--silea-fill);border-color:var(--brand);color:var(--brand)}
/* section with no data: switched off */
.ttabs button[disabled]{background:transparent;border-color:transparent;
  color:var(--faint);opacity:.45}
.ttabs svg{width:17px;height:17px;flex:none}
.ttabs .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.grp{padding:12px 8px 5px;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.opt{
  width:100%;display:flex;align-items:center;gap:11px;
  padding:11px 8px;border-radius:10px;text-align:left;
}
.opt:active{background:var(--sunken)}
.opt .badge{width:32px;height:32px;border-radius:8px;font-size:13px}
.opt .txt{flex:1;min-width:0}
.opt .txt b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.opt .txt small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
/* WHO PLAYS IT, between the tournament and the group: the same ladder
   as the board sidebar (app/lato.css .tree .txt .chi). "U16
   Provinciale / Girone C" does not say whether it is LagoVerde or MGI
   Tools, and those are two teams with two tables.
   Never wrapping: at 390px a twenty-eight character federation name
   would push the tick off to the right. */
.opt .txt .chi{display:block;font-size:12px;font-weight:500;color:var(--ink-2);
  margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt .tick{color:var(--brand);opacity:0;flex:none}
.opt.sel .tick{opacity:1}
/* More than one entry inside an item (ui/iscrizioni.js): every name
   with its leagues below, and a gap between the pairs. */
.opt .isc + .isc{display:block;margin-top:7px}
.opt.sel .txt b{font-weight:700}
.opt[disabled]{opacity:.42;cursor:default}
.opt[disabled] .badge{background:var(--sunken);color:var(--faint)}

/* season sheet: compact pills */
.pills{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:4px 8px 8px}
.pill{
  padding:14px 0;border-radius:10px;text-align:center;
  background:var(--sunken);
  font-size:14px;font-weight:700;letter-spacing:.01em;
}
.pill.sel{background:var(--ink);color:var(--paper)}
.pill[disabled]{opacity:.4;cursor:default}

/* match detail sheet */
/* APART FROM THE HANDLE like the titles of the other sheets. This one
   has no <h3>, its first line is the date, so the spacing of .sheet h3
   does not reach it and is written here. */
.md-head{padding:12px 18px 14px;display:flex;flex-direction:column;gap:12px}
/* it goes INSIDE .md-when: as a sibling it would take the 12px gap of
   .md-head and the 18px inset a second time. Inherited uppercase and
   bold are cancelled here. */
.md-dove{display:block;margin-top:6px;font-size:14.5px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--ink-2);line-height:1.45}
/* WHEN AND WHERE ARE THE ANSWER, not a caption. They are the two
   things the card is opened to find out: what time on Saturday, and
   which gym. Larger size and the text colour, not the label dress the
   rest of the site gives to labels. */
.md-when{font-size:13.5px;font-weight:700;letter-spacing:.01em;
  text-transform:none;color:var(--ink)}
.md-rows{display:flex;flex-direction:column;gap:10px}
.md-note{padding:10px 18px 14px;font-size:12.5px;color:var(--muted);line-height:1.5}

/* THE DIRECTIONS BUTTON. As wide as the text and not as the sheet: it
   is an action, and an action is tapped where it is written. Forty
   four tall, like everything touched with a thumb. */
.md-mappa{display:inline-flex;align-items:center;gap:9px;
  margin:0 18px 18px;min-height:44px;padding:0 16px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:11px;background:var(--velo);
  color:var(--brand);text-decoration:none;
  font-size:14.5px;font-weight:600}
.md-mappa svg{width:18px;height:18px;flex:none}
.md-mappa:active{background:var(--zebra)}

/* --- match tabs: chart · photos · report --------------------------- */
.mtabs{display:flex;gap:4px;padding:4px;margin:4px 14px 10px;
  background:var(--sunken);border-radius:10px}
.mtabs button{flex:1;padding:9px 0;border-radius:8px;font-size:11.5px;font-weight:700;
  letter-spacing:.04em;color:var(--muted);transition:background .15s,color .15s}
.mtabs button.on{background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--line)}

.vuoto{padding:34px 18px;display:flex;flex-direction:column;align-items:center;
  gap:6px;text-align:center}
.vuoto b{font-size:14.5px;font-weight:700;color:var(--ink-2)}
.vuoto span{font-size:12.5px;color:var(--faint)}

/* --- margin per set chart ------------------------------------------
   There is no point by point, so the bar tells by how much each set
   was won: it starts from the centre towards whoever took it.
   Proportional bars (25 against 21) would be unreadable: in volleyball
   every set is nearly 50/50 and the gap disappears.                 */
.chart{padding:10px 16px 16px;height:100%;display:flex;flex-direction:column}
.ch-head{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:2px 0 12px;
}
.ch-side{
  font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--muted);
  white-space:nowrap;
}
/* The rows share the height: three sets or five, the chart fills the
   same box and the foot stays at the bottom. */
.ch-row{
  display:grid;grid-template-columns:18px 1fr 46px 34px;
  align-items:center;gap:9px;
  flex:1 1 0;min-height:28px;max-height:56px;
}
.ch-sc{font-size:11.5px;color:var(--faint);text-align:right;font-variant-numeric:tabular-nums}
.ch-n{font-size:10px;font-weight:700;color:var(--faint)}
.ch-track{position:relative;height:10px;border-radius:5px;background:var(--sunken)}
.ch-track::before{
  content:"";position:absolute;left:50%;top:-3px;bottom:-3px;
  width:1px;background:var(--line-2);
}
.ch-bar{
  position:absolute;top:0;bottom:0;display:block;
  background:var(--line-2);
  animation:chgrow .42s cubic-bezier(.2,.8,.2,1) both;
}
.ch-bar.me{background:var(--accent)}
.ch-bar.l{border-radius:5px 0 0 5px;transform-origin:right center}
.ch-bar.r{border-radius:0 5px 5px 0;transform-origin:left center}
@keyframes chgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ch-d{
  font-size:11.5px;font-weight:700;text-align:right;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.ch-tot{
  flex:none;margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:12px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);
}
.ch-tot b{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em}

/* The season tag is a PLATE of its own, as on the desk. It sits below
   because the pill is narrow and putting it alongside would break the
   year. */
.pill .tag{
  display:block;margin-top:3px;
  font-size:9.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);
}
.pill.sel .tag{color:var(--paper);opacity:.7}

}

/* 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}

}

/* tel/gara.css */
@media (max-width:899px){
/* ============================================================
   THE MATCH CARD: phone
   ============================================================
   Two screens draw a match, the calendar diary and the first team
   panel on the home page, and the markup sits in one place
   (ui/gara.js): so does this sheet.

   The diary stays out of it: .gblock and .gday are how the calendar
   groups matches by day, and they hold only there.
   ============================================================ */

/* ============================================================
   THE CARD OF A MATCH
   Same markup as the day column on the board (ui/gara.js), phone
   measurements: the time column narrows from 74 to 66px and the type
   drops a point and a half, because the usable width here is 390 and
   not 400 inside a 1600 board.
   ============================================================ */
/* The cards of a day TOUCH. Eight pixels apart, with the band at ten,
   the gap between two matches of one day is nearly the gap between two
   different days, and half way down the screen it stops being clear
   whose a card is. The top border comes from the card above (or from
   the band), and the block closes at the foot. */
.dcard{
  display:grid;grid-template-columns:66px minmax(0,1fr);align-items:center;gap:12px;
  margin:0 12px;padding:11px 12px;
  background:var(--paper);border:1px solid var(--line);border-top:0;border-radius:0;
}
.gblock .dcard:last-child{border-radius:0 0 12px 12px}
/* Home and away: the 3px bar on the left, which across the site
   already means "this row is marked". Brand at home, quiet away. */
.dcard.casa{box-shadow:inset 3px 0 0 var(--brand)}
.dcard.via{box-shadow:inset 3px 0 0 var(--line-2)}
/* Every card opens the match sheet, even for a match still to play:
   inside are the full date, the address and how long is left. The
   touch feedback is the one of every list on the phone. */
.dcard.apre:active{background:var(--sunken)}
/* THE STRIP CARRIES THE TIME, the OUTCOME in words and home or away,
   the three things looked at first while scrolling the diary with a
   thumb. The score sits at the end of the two team lines, where the
   result card puts it. */
.dwhen{display:flex;flex-direction:column;align-items:center;gap:3px}
.dwhen b{font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
/* PALE green and red, never the solid ones: in a list being scrolled
   a file of saturated blots becomes the only thing visible. The draw
   is neutral. */
.desito{
  padding:1px 5px;border-radius:5px;white-space:nowrap;
  font-size:8.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
}
.dcard.vinta .desito{background:var(--up-fill);color:var(--up)}
.dcard.persa .desito{background:var(--down-fill);color:var(--down)}
.dcard.pari .desito{background:var(--line-2);color:var(--ink)}
.dsede{
  display:flex;align-items:center;gap:3px;
  font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
}
.dcard.casa .dsede{color:var(--brand)}
.dsede .emo{font-size:12px;line-height:1}
.dinfo{min-width:0;display:flex;flex-direction:column;gap:1px}
/* The title of the card is the COMPETITION, with the round at the end
   of the same line: the team name is in the row, and writing it twice
   serves nobody. */
.dcima{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px}
/* THE COMPETITION PLATE IS AN OUTLINE, not a fill: the tournament is
   what tells one match from another, but in a list being scrolled six
   brand fills in a row take the eye before the team names do. The
   reason at length is in app/gara.css.
   The measurements stay the phone ones, a shade narrower: the card has
   less width and the plate must not eat the round number beside it. */
.dcomp{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border:1px solid var(--brand);border-radius:999px;padding:2px 8px;
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--brand);
}
.dgio{flex:none;white-space:nowrap;font-size:10px;font-weight:500;color:var(--faint)}
/* THE TWO TEAMS, HOME ON TOP, THE SCORE AT THE END OF EACH LINE, as
   in the result card of the results screen and with the same language:
   ours in team colour and uppercase, the other plain. Whoever reads it
   knows who hosts without looking for the icon beside, and when our
   line is the lower one it means an away match.
   OUR NAME IS NOT SMALLER. Same size for both, and the weight makes
   the difference: a home team in a smaller size would say the opposite
   of what the colour says. */
.dteam{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13.5px;font-weight:500;line-height:1.3;color:var(--ink-2);
}
.dteam.noi{font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--brand)}
.drow{display:flex;align-items:baseline;gap:9px}
.dsc{
  flex:none;min-width:12px;text-align:right;
  font-size:14px;font-weight:800;line-height:1.3;letter-spacing:-.02em;color:var(--ink-2);
}
.dcard.attesa .dsc{font-weight:600;color:var(--line-2)}
.ddove{margin-top:3px;font-size:12px;color:var(--muted);overflow-wrap:anywhere}

}

/* tel/squadre.css */
@media (max-width:899px){
/* ============================================================
   THE TEAMS: the tail of the phone band
   ============================================================
   Below 900px the three columns unroll into four blocks one under the
   other. Nearly everything comes from the shared sheets: the bar at
   the top (.compbar), the sheets rising from the bottom (.opt, .pill),
   the sponsor bar at the foot. In here there is only the stack and its
   corrections.

   It is the LAST sheet of the phone band before motion.css, for the
   same reason tel/calendario.css is the last one there: it also holds
   the corrections to the shared sheets, and a correction written
   before the rule it corrects loses on order and does nothing.       */

/* Every block is a card: paper ground, hairline below, and a small
   caps title. Not the .panel of the board with the dark bar on top: at
   390px a dark bar every two screenfuls of scrolling turns into a
   ladder. The hierarchy is the same, title then content. */
.sq-pila{display:flex;flex-direction:column}
.sq-blocco{background:var(--paper);border-bottom:1px solid var(--line)}
.sq-blocco:last-child{border-bottom:0;padding-bottom:8px}

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

/* ============================================================
   THE TEAM PHOTO
   ============================================================ */
/* The first block has no title: the photo comes right under the bar
   that says whose it is, and a "FOTO" heading in between would say
   what is already visible.

   THE PLACE OF THE PHOTO IS ITS OWN even when there is no photograph:
   the empty box has the same shape and the same bulk as the full one.
   The page is laid out on how it will be, not on how it is this
   week. */
/* THE PHOTO RIDES 25px HIGH. A team photo is 3:2 and the box is 16:9,
   so cover trims top and bottom evenly, and the bottom of a team photo
   is the front row kneeling while the top is gym ceiling.
   MINUS twenty-five, not plus: with cover the image is taller than the
   box, so a positive offset slides it DOWN and shows more ceiling.
   Negative lifts it and brings the feet back in. */
.sq-foto{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  object-position:center calc(50% - 25px)}
.sq-foto.vuota{
  display:grid;place-items:center;padding:0 22px;text-align:center;
  background:var(--sunken);color:var(--faint);
  font-size:12.5px;font-weight:500;
}

/* ============================================================
   THE SQUAD: a caption, not a column
   ============================================================ */
/* The names read in a row, in the order they stand in the photo
   above: «Da sinistra in alto: …», as under the team photos in a
   calendar. Running text, so laid out as text.
   Wide leading: twelve surnames separated by commas, and whoever reads
   shuttles between a face in the photograph and a name in the line.
   Tight lines lose the place on every trip, and at 390px there are
   twice as many lines. */
.sq-dida{padding:0 16px 16px;display:flex;flex-direction:column;gap:8px}
.sq-dida p{font-size:14px;line-height:1.75;color:var(--ink-2);text-wrap:pretty}

/* The staff is a group apart, but in a ROW: three names stacked under
   a caption would reopen the column just taken away. */
.sq-staff{border-top:1px solid var(--line);margin-top:2px}
.sq-gruppo{padding:12px 16px 5px;font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.sq-staff-riga{padding:0 16px 16px;font-size:14px;line-height:1.95;color:var(--muted)}
/* Name and role wrap together: otherwise «Mario» reads at the end of
   one line and «Bianchi Allenatore» at the start of the next. */
.sq-p{display:inline-block;white-space:nowrap;margin-right:14px}
.sq-p b{font-weight:600;color:var(--ink-2)}
.sq-p i{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--faint)}

.sq-vuoto{display:flex;flex-direction:column;align-items:center;gap:4px;
  text-align:center;padding:6px 22px 24px;color:var(--muted)}
.sq-vuoto b{font-size:14px;font-weight:600;color:var(--ink-2)}
.sq-vuoto span{font-size:12.5px;font-weight:400;color:var(--faint);max-width:32ch}

/* ============================================================
   THE MAIN SPONSOR
   ============================================================ */
/* Logo and name, nothing else, as the club wants it. On the phone
   they sit SIDE BY SIDE and not one above the other as on the board:
   this block sits between the photo and the squad exactly so it does
   not slow the way down, and in a column it would take a third of the
   screen for two facts.

   color and text-decoration are declared HERE, and it is not
   redundancy: the brand box is the first real <a> inside a phone
   layout. The general reset (a{color:inherit}) is in styles/base.css,
   which belongs to the sponsor page alone; the phone bands load
   tel/base.css, which carries none. Without these two declarations the
   company name comes out blue and underlined. */
.sq-sp{display:flex;align-items:center;gap:14px;padding:0 16px 18px;
  color:inherit;text-decoration:none}
.sq-placca{--h:38px;
  flex:none;width:104px;height:62px;border-radius:9px;
  background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden;padding:0 10px}
.sq-placca img{display:block;width:100%;height:calc(var(--h) * var(--k,1));
  object-fit:contain;object-position:center}
.sq-placca img.scuro{border-radius:3px}
.sq-sp-nome{min-width:0;font-size:15.5px;font-weight:700;letter-spacing:-.015em;
  line-height:1.3}

/* ============================================================
   THE TEAMS SHEET
   ============================================================ */
/* FIXED HEIGHT, like the competition sheet of /risultati/: the teams
   are eleven in one season and one in another, and with automatic
   height the sheet would jump from full screen to a strip depending on
   the year. */
#sqSheet{height:min(82%,560px)}
/* The items here carry no two letter plate of the competition: a team
   has no tag. Without .badge the text takes the whole row, which suits
   names that reach twenty-eight characters. */
#sqSheet .opt .txt b{font-size:15px}

/* ============================================================
   MORE THAN ONE ENTRY IN THE BAR AT THE TOP
   ============================================================
   Down here the bar IS the heading of the team: there is no header
   above the photo. A team entered several times (ui/iscrizioni.js)
   puts its names ONE UNDER THE OTHER: side by side, as on the board,
   two names of twenty-eight characters do not fit at 390px.
   BOTH AT THE SAME SIZE. Inside the heading the two names are the same
   team, and writing one in a smaller size makes it read as a note. On
   the board they sit side by side and equal; here they are stacked,
   and they stay equal.
   The selector takes the name that comes AFTER a subtitle, that is
   every name but the first: in the bar the pairs follow one another
   flat (name, leagues, name, leagues) because .comp-txt is a column
   already and nesting another one inside it adds nothing. */
.comp-txt .s + .t{margin-top:7px}
/* The name does not wrap: the bar is as tall as it needs, but on two
   lines the season button beside it gets squeezed. */
.comp-txt .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

/* THE CHEVRON SITS AT MID HEIGHT. Inside the first name it would hang
   from the first line, and with two entries it would look as if it
   concerned that one rather than the button, which opens them all.
   Outside the block of names it is centred by the button itself, which
   is one horizontal row.
   The gap is the small one it has beside the name, not the eleven of
   the bar, which are there to part the text from the little square. */
#sqBtn{gap:6px}
#sqBtn > .chev{flex:none;color:var(--faint);font-size:11px}

/* A HAIRLINE BETWEEN ONE ITEM AND THE NEXT. An item that names
   several entries (ui/iscrizioni.js) can be four lines tall, and four
   lines in a row with nothing between them read as four items: which
   loses the very thing the grouping says, that those two names are one
   team and tick together.

   THE HAIRLINE SITS IN THE GAP, not on the item. Drawn as a border it
   becomes part of the item, and the item is a rounded slab: the ticked
   one would come out square on top and round at the bottom. This way
   the slab stays whole and the line runs through the air between them.
   Above every item but the first, so none is left hanging at the end
   of the list. */
#elenco .opt{position:relative}
#elenco .opt + .opt{margin-top:9px}
#elenco .opt + .opt::before{
  content:"";position:absolute;left:0;right:0;top:-5px;height:1px;background:var(--line);
}

/* ============================================================
   THE GLIMPSE OF THE CALENDAR
   ============================================================ */
/* The cards are the ones of the calendar diary (tel/gara.css), drawn
   for 390px already: here it only says how they sit inside the block.
   The block does NOT scroll on its own (the page scrolls, like
   everything else down here) and the matches are three, not five. */
.sq-gara{display:block;color:inherit;text-decoration:none;
  -webkit-tap-highlight-color:transparent}
.sq-gara:active .dcard{background:var(--sunken)}
#calbox .dcard{border-bottom:1px solid var(--line)}
#calbox > :last-child .dcard{border-bottom:0}

.ddata{display:block;font-size:10.5px;font-weight:600;color:var(--faint);
  margin-bottom:1px}
.dcard.casa .ddata{color:var(--muted)}

/* The small title of the block holds the shortcut on the right. */
.sq-tit{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sq-vai{flex:none;display:flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand)}
.sq-vai svg{width:13px;height:13px}
.sq-vai[hidden]{display:none}

}

/* 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)}
}