/* =====================================================================================================
 * WuvDay Help Center - public site components on the WuvDay web tokens (wuv-tokens.css, loaded first).
 * Colours: var(--wuv-*) only, so light and dark come from the same rules. Phone first.
 * ===================================================================================================== */

/* Fonts are served by the site itself: no page asks Google or any other third party for them. */
@font-face { font-family: 'Quicksand'; font-weight: 400; font-display: swap; src: url('../fonts/quicksand-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Quicksand'; font-weight: 500; font-display: swap; src: url('../fonts/quicksand-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Quicksand'; font-weight: 600; font-display: swap; src: url('../fonts/quicksand-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Quicksand'; font-weight: 700; font-display: swap; src: url('../fonts/quicksand-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Material Icons Outlined'; font-weight: 400; font-display: block; src: url('../fonts/material-icons-outlined.woff2') format('woff2'); }

:root { --hc-wrap: 1120px; --hc-measure: 66ch; --hc-bar-h: 60px; }
@media (min-width: 992px) { :root { --hc-bar-h: 68px; } }

/* The surfaces of the white restyle (the web app's board, PDF «Webapp restyle»): what changes between the two themes, named once
   from the tokens. Light: a white bar and footer, cards with the board card's soft shadow, outline controls on white, the search
   a grey pill. Dark: bar and footer on the raised surface, cards with a thin line instead of a shadow (a shadow does not show on
   a dark page), outline controls on the page, the search with the colour of the page inside its own edge. */
:root {
  --hc-chrome-bg: var(--wuv-surface); --hc-chrome-line: var(--wuv-divider);
  --hc-card: var(--wuv-shadow-card);
  --hc-outline-bg: var(--wuv-surface);
  --hc-find-bg: var(--wuv-search);
  --hc-seg-bg: var(--wuv-surface-2); --hc-seg-line: var(--wuv-divider); --hc-seg-on: var(--wuv-surface);
}
[data-theme="dark"] {
  --hc-chrome-bg: var(--wuv-surface-2); --hc-chrome-line: var(--wuv-stroke-strong);
  --hc-card: 0 0 0 1px var(--wuv-divider);
  --hc-outline-bg: transparent;
  --hc-find-bg: var(--wuv-canvas);
  --hc-seg-bg: transparent; --hc-seg-line: var(--wuv-stroke-strong); --hc-seg-on: var(--wuv-accent-soft);
}
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --hc-chrome-bg: var(--wuv-surface-2); --hc-chrome-line: var(--wuv-stroke-strong);
    --hc-card: 0 0 0 1px var(--wuv-divider);
    --hc-outline-bg: transparent;
    --hc-find-bg: var(--wuv-canvas);
    --hc-seg-bg: transparent; --hc-seg-line: var(--wuv-stroke-strong); --hc-seg-on: var(--wuv-accent-soft);
  }
}

/* the web app's pills: capitals spaced a little wider, the outline one with the 1.5px edge of the board's controls */
.wuv .wuv-pill { letter-spacing: .06em; }
.wuv .wuv-pill-outline { border-width: 1.5px; background: var(--hc-outline-bg); }
.wuv .wuv-pill-outline:hover { background: var(--wuv-surface-2); }

/* the wordmark: the W of the brand in the action red, «UVDAY» in the colour of the text (the letters are drawn here: the
   wordmark is one picture, named «WuvDay» in the page) */
.wuv-wordmark { display: inline-flex; align-items: center; color: var(--wuv-text); line-height: 1; }   /* the letters and the registered mark take the colour of the text; the reds are the logo's own */
.wuv-wordmark svg { height: 20px; width: auto; display: block; }
@media (min-width: 992px) { .wuv-wordmark svg { height: 24px; } }

/* Material Icons Outlined through the class name the WuvDay pages use: a glyph is the ligature of its name */
.material-icons { font-family: 'Material Icons Outlined'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: 'liga'; user-select: none; flex: none; width: 1em; overflow: hidden; }   /* one glyph wide from the start: until the icon font is there the icon is the name of its glyph, a word that would widen a 320px page */

/* browser surfaces carry the design too */
body.wuv { background: var(--wuv-canvas); min-width: 320px; font-size: var(--wuv-fs-15); }
.wuv ::selection { background: var(--wuv-accent-soft); color: var(--wuv-accent-soft-text); }
.wuv { caret-color: var(--wuv-accent); scrollbar-color: var(--wuv-stroke-strong) transparent; }
.wuv a { text-underline-offset: .2em; text-decoration-thickness: 1px; }
.wuv h1, .wuv h2, .wuv h3 { text-wrap: balance; }
.wuv p, .wuv li { text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- the bar: white, with the wordmark, the name of the site after a thin line, and outline pills ---- */
.hc-bar { position: sticky; top: 0; z-index: 50; background: var(--hc-chrome-bg); color: var(--wuv-text); border-bottom: 1px solid var(--hc-chrome-line); }
.hc-bar-in { height: var(--hc-bar-h); max-width: var(--hc-wrap); margin: 0 auto; padding: 0 var(--wuv-gutter); display: flex; align-items: center; gap: 8px; }
@media (min-width: 992px) { .hc-bar-in { padding: 0 32px; } }   /* the wordmark stands on the edge of the content, as the page below it */
.hc-brand { display: inline-flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; min-height: 44px; border-radius: 10px; }
.hc-brand-name { display: none; padding-left: 14px; border-left: 1px solid var(--wuv-divider); color: var(--wuv-text-muted); font-size: var(--wuv-fs-14); font-weight: 600; line-height: 1.6; white-space: nowrap; }
@media (min-width: 576px) { .hc-brand-name { display: inline; } }   /* on a phone the bar is the wordmark and its buttons, as in the web app */
.hc-bar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hc-bar-btn { height: 40px; min-width: 40px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--wuv-text); text-decoration: none; font: 700 var(--wuv-fs-13)/1 var(--wuv-font); letter-spacing: .06em; text-transform: uppercase; border: 1.5px solid var(--wuv-stroke-strong); background: var(--hc-outline-bg); cursor: pointer; white-space: nowrap; }
.hc-bar-btn:hover { background: var(--wuv-surface-2); }
.hc-bar-btn .material-icons { font-size: 18px; }
.hc-bar-btn .lbl { display: none; }
.hc-bar-btn .hc-caret { display: none; margin: 0 -4px 0 -2px; }
@media (min-width: 768px) { .hc-bar-btn { padding: 0 16px; } .hc-bar-btn .lbl { display: inline; } .hc-menu .hc-bar-btn { padding: 0 10px 0 12px; } .hc-bar-btn .hc-caret { display: inline-block; } }
@media (pointer: coarse) { .hc-bar-btn { height: 44px; min-width: 44px; } }   /* the bar's buttons join the 44px touch rule */
.hc-back { min-width: 0; height: 44px; padding: 0 10px 0 4px; margin-left: -6px; border-radius: 999px; display: inline-flex; align-items: center; gap: 2px; color: inherit; text-decoration: none; font-weight: 700; font-size: var(--wuv-fs-15); }
.hc-back:hover { background: var(--wuv-surface-2); }
.hc-back .material-icons { font-size: 26px; }
.hc-back-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* the topic in the bar of a phone is one line, cut with an ellipsis where the buttons at its right leave no more room */

/* ---- page frame ---- */
.hc-wrap { max-width: var(--hc-wrap); margin: 0 auto; padding-left: var(--wuv-gutter); padding-right: var(--wuv-gutter); }
@media (min-width: 992px) { .hc-wrap { padding-left: 32px; padding-right: 32px; } }

/* ---- home hero: one question and the search, nothing else ---- */
.hc-hero { padding-top: 26px; padding-bottom: 6px; }
.hc-hero h1 { margin: 0; font-size: var(--wuv-fs-24); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.hc-hero p { margin: 6px 0 0; color: var(--wuv-text-2); font-size: var(--wuv-fs-15); }
.hc-hero p.hc-hero-hint { margin-top: 10px; font-size: var(--wuv-fs-14); color: var(--wuv-text-muted); }   /* the expired page's second line: what it may be when it happens again */
.hc-hero-hint a { color: var(--wuv-accent-text); font-weight: 600; }
.hc-hero-action { margin-top: 18px; }                    /* a page that is only a hero and has one thing to do (an expired page: back to the form) */
@media (min-width: 992px) { .hc-hero { padding-top: 44px; } .hc-hero h1 { font-size: var(--wuv-fs-28); } }

.hc-find { margin-top: 16px; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 8px 0 20px; border-radius: 999px; background: var(--hc-find-bg); border: 1px solid var(--wuv-field-stroke); }   /* the web app's grey pill (the page colour inside it in dark), with the edge every field of the site has: the grey alone is 1.0:1 against the grey canvas, and a person must see the field against the page (SC 1.4.11) */
.hc-find-field { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 10px; }   /* the icon, the hidden name and the field: the clear control sits beside it, out of the label */
.hc-find:focus-within { border-color: var(--wuv-field-stroke-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wuv-field-stroke-focus) 18%, transparent); }
.hc-find .material-icons { color: var(--wuv-text-2); font-size: 22px; }
.hc-find input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--wuv-text); font: 500 var(--wuv-fs-16) var(--wuv-font); outline: none; }
.hc-find input:focus-visible { outline: none; }                       /* the pill draws the ring (:focus-within): without this the generic .wuv :focus-visible rule wins and draws a square ring inside the pill */
.hc-find input::placeholder { color: var(--wuv-text-muted); }
.hc-find input::-webkit-search-cancel-button { display: none; }      /* the field has its own clear control: the browser's would be a second one beside it */
.hc-find .hc-clear { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--wuv-surface); color: var(--wuv-text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.hc-find .hc-clear[hidden] { display: none; }                         /* the display above would win over the hidden attribute: the script shows the control once something is typed */
.hc-find .hc-clear .material-icons { font-size: 18px; }
@media (min-width: 992px) { .hc-find { height: 54px; padding-left: 22px; } }
.hc-find-meta { margin: 10px 4px 0; font-size: var(--wuv-fs-13); color: var(--wuv-text-2); }
.hc-find-meta b { color: var(--wuv-text); }
.hc-find-meta:empty { margin: 0; }                                    /* the line that counts the results is a live region that is always there: it takes no room until it says something */

/* ---- the list of every guide, hidden until something is typed in the search field: the guides that the words find ----
   Then come the articles that talk about the words: the two follow each other in one column, on every width, as wide as the
   urgent group above them. */
.hc-index { padding-top: 22px; padding-bottom: 8px; }
@media (min-width: 992px) { .hc-index { padding-top: 30px; } }
.hc-topic { margin: 0 0 24px; }
.hc-topic-head { display: flex; align-items: center; gap: 10px; margin: 0 4px 8px; }
.hc-topic-head .material-icons { color: var(--wuv-text-2); font-size: 20px; }
.hc-topic-head h2 { margin: 0; font-size: var(--wuv-fs-16); font-weight: 700; line-height: 1.25; }
.hc-count { margin-left: auto; font-size: var(--wuv-fs-12); color: var(--wuv-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.hc-rows { list-style: none; margin: 0; padding: 0; background: var(--wuv-surface); border-radius: var(--wuv-r-card); box-shadow: var(--hc-card); overflow: hidden; }   /* a group of rows is a card of the board: 20px, the soft shadow (a thin line in dark) */
.hc-rows > li:where(:not([hidden])) ~ li:where(:not([hidden])) { border-top: 1px solid var(--wuv-divider); }   /* the line is between two rows that are shown: a hidden row leaves none above the first one left */
.hc-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 12px 12px 16px; color: var(--wuv-text); text-decoration: none; font-size: var(--wuv-fs-15); font-weight: 500; line-height: 1.35; }
.hc-row:hover { background: color-mix(in srgb, var(--wuv-surface-2) 60%, var(--wuv-surface)); }
.hc-row .chev { margin-left: auto; color: var(--wuv-text-muted); font-size: 20px; }
.hc-row .lead-ic { width: 36px; height: 36px; border-radius: 50%; background: var(--wuv-search); color: var(--wuv-icon); display: inline-flex; align-items: center; justify-content: center; }
.hc-row .lead-ic .material-icons { font-size: 20px; }
.hc-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-row-sub { font-size: var(--wuv-fs-13); font-weight: 500; color: var(--wuv-text-muted); line-height: 1.4; }
.hc-row-topic { font-size: var(--wuv-fs-12); font-weight: 600; color: var(--wuv-text-muted); }
.hc-row mark, .hc-snippet mark { background: var(--wuv-accent-soft); color: var(--wuv-accent-soft-text); border-radius: 4px; padding: 0 2px; font-weight: 700; }
.hc-snippet { font-size: var(--wuv-fs-13); color: var(--wuv-text-2); font-weight: 500; line-height: 1.45; }

/* the way to a person: a row that looks like the app's Support entry */
.hc-person { margin: 4px 0 32px; }
.hc-hero + .hc-wrap .hc-person { margin-top: 24px; }                    /* on a page that is only a hero (not found, a failure) the way to a person stands apart from it */
.hc-person .hc-row { min-height: 64px; }
.hc-person .lead-ic { background: var(--wuv-accent-soft); color: var(--wuv-accent-soft-text); }
.hc-person .hc-row-title { font-weight: 700; }
@media (min-width: 992px) { .hc-person { max-width: calc(50% - 16px); } }

/* ---- footer: the surface of the bar with a line on top, no longer red ---- */
.hc-foot { margin-top: 48px; background: var(--hc-chrome-bg); color: var(--wuv-text); border-top: 1px solid var(--hc-chrome-line); }   /* the space between the last block of a page and the footer is the footer's, the same on every page (see the end of the file) */
.hc-foot-in { max-width: var(--hc-wrap); margin: 0 auto; padding: 20px var(--wuv-gutter) 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: var(--wuv-fs-13); }
@media (min-width: 992px) { .hc-foot-in { padding-left: 32px; padding-right: 32px; } }
.hc-foot a { color: var(--wuv-text); font-weight: 600; }
.hc-foot .muted { color: var(--wuv-text-muted); }
.hc-foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.hc-foot-links a { text-decoration: none; }                              /* links by their place, as the bar of the web app; the line comes back under the pointer */
.hc-foot-links a:hover { text-decoration: underline; }
.hc-lang { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--wuv-stroke-strong); color: var(--wuv-text); background: var(--hc-outline-bg); font: 600 var(--wuv-fs-13)/1 var(--wuv-font); cursor: pointer; }
.hc-lang:hover { background: var(--wuv-surface-2); }
.hc-lang .material-icons { font-size: 18px; }
@media (min-width: 992px) { .hc-foot-links { margin-left: auto; } }

/* ---- article ---- */
.hc-art { display: grid; gap: 20px; padding-top: 14px; padding-bottom: 36px; }
@media (min-width: 992px) { .hc-art { grid-template-columns: 300px minmax(0, 1fr); gap: 36px; padding-top: 28px; padding-bottom: 56px; } }
.hc-rail { display: none; }
@media (min-width: 992px) { .hc-rail { display: block; position: sticky; top: calc(var(--hc-bar-h) + 24px); align-self: start; } }
.hc-rail .hc-rows { padding: 8px; }                                       /* the rail is a card of its own, its rows pills inside it */
.hc-rail .hc-rows > li:where(:not([hidden])) ~ li:where(:not([hidden])) { border-top: 0; }
.hc-rail .hc-row { min-height: 42px; padding: 9px 12px; border-radius: 999px; font-size: var(--wuv-fs-14); }
.hc-rail .hc-row[aria-current="page"] { background: var(--wuv-accent-soft); color: var(--wuv-accent-soft-text); font-weight: 700; }
.hc-rail-all { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 14px 2px; font-size: var(--wuv-fs-13); font-weight: 700; color: var(--wuv-text-2); text-decoration: none; }
.hc-rail-all .material-icons { font-size: 18px; }

/* the phone and the desktop show different parts of an article page: the back control in the bar and the other guides
   at the end are for the phone, the brand and the breadcrumbs for the desktop */
.phone-only { display: inline-flex; }
.desk-only { display: none; }
.hc-more.phone-only { display: block; }
.hc-doc .hc-crumbs { display: none; }
@media (min-width: 992px) { .phone-only { display: none; } }
@media (min-width: 992px) { .desk-only { display: inline-flex; } }
@media (min-width: 992px) { .hc-doc .hc-crumbs { display: flex; } }

.hc-doc { background: var(--wuv-surface); border-radius: var(--wuv-r-card); box-shadow: var(--hc-card); padding: 22px 18px 26px; min-width: 0; }
@media (min-width: 992px) { .hc-doc { padding: 34px 48px 40px; } }
.hc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0 0 10px; font-size: var(--wuv-fs-13); font-weight: 600; color: var(--wuv-text-muted); }
.hc-crumbs a { color: var(--wuv-text-2); text-decoration: none; }
.hc-crumbs .material-icons { font-size: 16px; }
.hc-doc h1 { margin: 0; font-size: var(--wuv-fs-24); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
@media (min-width: 992px) { .hc-doc h1 { font-size: var(--wuv-fs-28); } }
.hc-lead { margin: 8px 0 20px; max-width: var(--hc-measure); font-size: var(--wuv-fs-16); line-height: 1.55; color: var(--wuv-text-2); }

/* platform switch: the article's own sections (app, website) as a segmented control */
.hc-seg { display: flex; width: 100%; padding: 4px; gap: 4px; border-radius: 999px; background: var(--hc-seg-bg); border: 1.5px solid var(--hc-seg-line); }
@media (min-width: 576px) { .hc-seg { display: inline-flex; width: auto; } }
.hc-seg button { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--wuv-text-2); font: 600 var(--wuv-fs-14)/1.15 var(--wuv-font); display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }   /* on a phone the two labels ("In the app", "On the site") keep one line each at 320px, and a longer one wraps instead of pushing the switch out of the screen ... */
@media (min-width: 576px) { .hc-seg button { padding: 6px 16px; gap: 7px; white-space: nowrap; } }   /* ... from 576px the switch is as wide as its labels */
.hc-seg button .material-icons { font-size: 18px; }
.hc-seg button[aria-selected="true"] { background: var(--hc-seg-on); color: var(--wuv-accent-text); font-weight: 700; box-shadow: var(--wuv-shadow-press); }
.hc-seg { margin: 14px 0 20px; }                                     /* apart from the title above and the steps below it */
.hc-seg[hidden] { display: none; }                                  /* the display above would win over the hidden attribute: the script that makes the switch work shows it */
@media (pointer: coarse) { .hc-seg button { min-height: 44px; } }

.hc-doc h2 { margin: 30px 0 14px; font-size: var(--wuv-fs-20); line-height: 1.25; font-weight: 700; }
.hc-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 14px; max-width: var(--hc-measure); }
.hc-steps > li { counter-increment: step; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; font-size: var(--wuv-fs-16); line-height: 1.6; }
.hc-steps > li::before { content: counter(step); width: 30px; height: 30px; margin-top: -1px; border-radius: 50%; background: var(--wuv-accent-soft); color: var(--wuv-accent-soft-text); font: 700 var(--wuv-fs-14)/30px var(--wuv-font); text-align: center; font-variant-numeric: tabular-nums; }
.hc-steps > li > ul { grid-column: 2; margin: 6px 0 0; padding-left: 18px; color: var(--wuv-text-2); font-size: var(--wuv-fs-15); }
.hc-steps > li > ul li + li { margin-top: 4px; }
.hc-steps > li > :not(:first-child) { grid-column: 2; margin: 6px 0 0; }   /* a second paragraph, a code block or a list inside a step stays out of the number column */
/* the app's own buttons, drawn the way the app draws them: a pill with the label in capitals */
.hc-key { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 3px 10px; margin: 0 1px; border-radius: 999px; border: 1px solid var(--wuv-stroke-strong); background: var(--wuv-surface); color: var(--wuv-text); font: 700 var(--wuv-fs-12)/1.2 var(--wuv-font); letter-spacing: .04em; text-transform: uppercase; white-space: normal; vertical-align: 1px; box-shadow: 0 1px 0 var(--wuv-stroke-strong); }   /* one line wherever it fits; a label longer than a 320px phone's column wraps inside its pill instead of widening the page */
.hc-key.is-red { background: var(--wuv-accent); border-color: var(--wuv-accent); color: var(--wuv-on-accent); box-shadow: var(--wuv-shadow-press); }
.hc-key .material-icons { font-size: 15px; }
.hc-doc .wuv-notice { margin: 16px 0; max-width: var(--hc-measure); font-size: var(--wuv-fs-14); line-height: 1.55; color: var(--wuv-text); }   /* a margin under it too: numbered steps that follow have none of their own */
.hc-doc .wuv-notice > .material-icons { margin-top: 1px; }
.wuv-notice.is-info { background: var(--wuv-info-bg); border-color: var(--wuv-info-border); }
.wuv-notice.is-info > .material-icons { color: var(--wuv-info-text); }
.wuv-notice.wuv-notice-warning > .material-icons { color: var(--wuv-warning-text); }
.wuv-notice p { margin: 0; }
.wuv-notice b { font-weight: 700; }

.hc-useful { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--wuv-divider); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.hc-useful p { margin: 0 6px 0 0; font-weight: 700; font-size: var(--wuv-fs-15); }
.hc-useful .wuv-pill { height: 40px; padding: 0 18px; font-size: var(--wuv-fs-13); }
.hc-useful .wuv-pill .material-icons { font-size: 18px; }
.hc-useful { scroll-margin-top: calc(var(--hc-bar-h) + 24px); }   /* a page that opens at the block (#useful) leaves it clear of the sticky bar */
.hc-useful .wuv-pill[aria-pressed="true"] .material-icons { font-size: 0; width: 18px; }   /* the thumb of the answer already given is a check mark: the tint alone would not tell it to everybody (the icon font has no filled thumb) */
.hc-useful .wuv-pill[aria-pressed="true"] .material-icons::before { content: "check"; font-size: 18px; }
.hc-useful .wuv-pill[aria-pressed="true"] { border-color: var(--wuv-accent); background: var(--wuv-accent-soft); color: var(--wuv-accent-soft-text); box-shadow: inset 0 0 0 1px var(--wuv-accent); }   /* the answer already given: drawn like a card that was chosen in the contact form */
.hc-useful .hc-useful-thanks { margin: 0; font-size: var(--wuv-fs-14); font-weight: 600; color: var(--wuv-text-2); }   /* the line that thanks: a live region, so it is in the page before it has anything to say */
.hc-useful .hc-useful-thanks:empty { position: absolute; }   /* and while it is empty it takes no row of its own: on a phone it would add a gap under the buttons */
.hc-more { margin-top: 26px; }
.hc-more h2 { margin: 0 0 10px; font-size: var(--wuv-fs-16); }
.hc-doc .hc-rows { background: var(--wuv-canvas); border-radius: var(--wuv-r-row); box-shadow: none; }   /* rows inside a card sit on the page colour: the card already lifts them */
.hc-doc .hc-rows > li + li { border-top-color: var(--wuv-surface); border-top-width: 2px; }
@media (min-width: 992px) { .hc-more.phone-only { display: none; } }

/* ---- contact form; the policy pages (a title, a line and a link) stand in the same frame ---- */
.hc-form, .hc-policy { max-width: 640px; margin: 0 auto; padding-top: 16px; padding-bottom: 40px; }
@media (min-width: 992px) { .hc-form, .hc-policy { padding-top: 34px; padding-bottom: 64px; } }
.hc-form .hc-doc h1, .hc-policy .hc-doc h1 { margin-bottom: 6px; }
.hc-form .hc-lead, .hc-policy .hc-lead { margin-bottom: 18px; }
.hc-policy .wuv-pill { padding: 0 24px; }          /* the label and the icon fit inside the card of a 320px phone */

/* the text of a policy kept by iubenda (PolicyHtml): a long document in the article's column, its own headings one level under the
   title, and nothing of iubenda's look (it has no class and no style). The card is as wide as the column and its padding. */
.hc-policy-full { max-width: calc(var(--hc-col) + 2 * var(--wuv-gutter) + 36px); }
@media (min-width: 992px) { .hc-policy-full { max-width: calc(var(--hc-col) + 64px + 96px); } }
/* the policy page with its text: on a screen wide and tall enough the page does not scroll, the card of the document does, and
   the footer stays in sight under it (the owner, 2026-11-05). A phone keeps the page that scrolls: its footer is tall. */
@media (min-width: 768px) and (min-height: 560px) {
    body.wuv:has(.hc-policy-full) { height: 100vh; height: 100dvh; overflow: hidden; }
    body.wuv:has(.hc-policy-full) > main { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
    .hc-policy-full { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; padding-bottom: 0; }
    .hc-policy-full > .hc-doc { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    body.wuv:has(.hc-policy-full) .hc-foot { margin-top: 20px; }
}
.hc-policy-date { margin: 0 0 6px; font-size: var(--wuv-fs-13); font-weight: 600; color: var(--wuv-text-muted); }
.hc-policy-text { max-width: var(--hc-col); overflow-wrap: anywhere; font-size: var(--wuv-fs-15); line-height: 1.6; color: var(--wuv-text); }   /* the mail links of the rights are long addresses with no space: they break instead of widening a phone */
.hc-policy-text :is(h2, h3, h4, h5, h6) { margin: 28px 0 10px; line-height: 1.3; font-weight: 700; color: var(--wuv-text); scroll-margin-top: calc(var(--hc-bar-h) + 16px); }   /* the table of contents leads to them clear of the sticky bar */
.hc-policy-text h2 { font-size: var(--wuv-fs-20); }
.hc-policy-text h3 { font-size: var(--wuv-fs-17); padding-top: 18px; border-top: 1px solid var(--wuv-divider); }   /* each part of the document starts under a line */
.hc-policy-text h4 { font-size: var(--wuv-fs-16); }
.hc-policy-text :is(h5, h6) { margin: 18px 0 6px; font-size: var(--wuv-fs-14); color: var(--wuv-text-2); }
.hc-policy-text > :first-child h2:first-child, .hc-policy-text > h2:first-child { margin-top: 18px; }
.hc-policy-text :is(p, ul, ol, dl, blockquote, table) { margin: 10px 0; }
.hc-policy-text :is(ul, ol) { padding-left: 22px; }
.hc-policy-text li + li { margin-top: 4px; }
.hc-policy-text li > :is(ul, ol) { margin: 4px 0; }
.hc-policy-text :is(b, strong) { font-weight: 700; }
.hc-policy-text a { color: var(--wuv-accent-text); font-weight: 600; }
.hc-policy-text a:not([href]) { color: inherit; font-weight: inherit; }   /* a link whose address was taken out is its words */
.hc-policy-text hr { margin: 24px 0; border: 0; border-top: 1px solid var(--wuv-divider); }
.hc-policy-text aside { margin: 18px 0 8px; padding: 4px 18px 10px; border-radius: var(--wuv-r-row); background: var(--wuv-canvas); }   /* iubenda's table of contents: a panel on the page colour, as rows inside a card */
.hc-policy-text aside :is(h2, h3) { margin-top: 12px; padding-top: 0; border-top: 0; font-size: var(--wuv-fs-15); }
.hc-policy-text table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--wuv-fs-14); }   /* a wide table scrolls inside the column */
.hc-policy-text :is(th, td) { padding: 6px 10px; border: 1px solid var(--wuv-divider); text-align: left; vertical-align: top; }
.hc-policy-text th { background: var(--wuv-surface-2); font-weight: 700; }
.hc-policy-text :is(th, td) { min-width: 8em; overflow-wrap: normal; }   /* the cookie table on a phone: columns wide enough for their words, the table scrolls instead of breaking them letter by letter */
.hc-policy-text td code { white-space: nowrap; }
.hc-policy-source { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--wuv-divider); font-size: var(--wuv-fs-13); color: var(--wuv-text-muted); }
.hc-policy-source a { color: var(--wuv-text-2); font-weight: 600; }
.hc-policy-full .hc-fallback { max-width: var(--hc-col); }
.hc-fieldset { border: 0; margin: 0 0 18px; padding: 0; }
.hc-fieldset legend { padding: 0; margin: 0 0 8px; font-size: var(--wuv-fs-14); font-weight: 700; color: var(--wuv-text); }
.hc-field { margin-bottom: 16px; }
.hc-field .wuv-field-label { margin-bottom: 7px; font-size: var(--wuv-fs-14); color: var(--wuv-text); }
.hc-field .opt { font-weight: 600; color: var(--wuv-text-muted); }
.hc-form .wuv-field { height: 50px; border-radius: 14px; border-width: 1.5px; font: 500 var(--wuv-fs-16) var(--wuv-font); color: var(--wuv-text); background: var(--wuv-field); }
.hc-form textarea.wuv-field { height: auto; min-height: 150px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.hc-two { display: grid; gap: 0 14px; }
@media (min-width: 576px) { .hc-two { grid-template-columns: 1fr 1fr; } }
/* the subjects: chip-cards as the board's filter chips, white with an edge, pink with the check when chosen; each one keeps its
   line of description. The input is a real radio, out of sight: the card is its label, and the icon says which one is chosen. */
.hc-choices { display: grid; gap: 10px; }
@media (min-width: 576px) { .hc-choices { grid-template-columns: 1fr 1fr; } }
.hc-choice { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--wuv-stroke-strong); border-radius: 16px; background: var(--hc-outline-bg); color: var(--wuv-text); cursor: pointer; }
.hc-choice:hover { background: var(--wuv-surface-2); }
.hc-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hc-choice-mark { margin-top: -1px; color: var(--wuv-text-2); }
.hc-choice b { display: block; font-size: var(--wuv-fs-15); font-weight: 700; }
.hc-choice span.sub { display: block; margin-top: 2px; font-size: var(--wuv-fs-13); font-weight: 500; color: var(--wuv-text-muted); line-height: 1.4; }
.hc-choice:has(input:checked) { border-color: var(--wuv-accent-soft-stroke); background: var(--wuv-accent-soft); color: var(--wuv-chip-checked-text); }
.hc-choice:has(input:checked) .hc-choice-mark { font-size: 0; width: 20px; color: var(--wuv-chip-checked-text); }   /* the circle becomes the check: the tint alone would not tell it to everybody */
.hc-choice:has(input:checked) .hc-choice-mark::before { content: "check_circle"; font-size: 20px; }
.hc-counter { margin: 6px 0 0; display: flex; justify-content: space-between; gap: 12px; font-size: var(--wuv-fs-12); color: var(--wuv-text-muted); }
.hc-counter span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }   /* "0 / 2000" stays on one line on a 320px screen */
.hc-send { margin-top: 6px; display: grid; gap: 12px; }
.hc-send .wuv-pill { width: 100%; height: 48px; }
@media (min-width: 576px) { .hc-send { grid-template-columns: auto 1fr; align-items: center; } .hc-send .wuv-pill { width: auto; } }
.hc-fine { margin: 0; font-size: var(--wuv-fs-12); line-height: 1.5; color: var(--wuv-text-muted); }
.hc-fine a { color: var(--wuv-text-2); }
.hc-form .wuv-notice { margin: 0 0 18px; }                                    /* a post that came back, a browser without the script */
.wuv-notice[hidden] { display: none; }
.hc-form .wuv-notice a { color: var(--wuv-accent-text); font-weight: 600; }                                         /* the display of a notice would win over the hidden attribute: contact.js shows the one about blocked cookies only when the browser blocks them */
.wuv-notice.wuv-notice-danger > .material-icons { color: var(--wuv-danger-text); }
.hc-choice:has(input:focus-visible) { outline: 2px solid var(--wuv-field-stroke-focus); outline-offset: 2px; }   /* the input itself is out of sight: the card shows where the keyboard is */
.hc-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* the trap for robots: out of the page and still in the form */

/* ---- short pages and the app's buttons ---- */
body.wuv { display: flex; flex-direction: column; min-height: 100vh; }   /* the footer sits at the bottom of short pages */
body.wuv > main { flex: 1 0 auto; }
.nowrap { white-space: nowrap; }                                         /* an app button keeps its punctuation on its line */
.hc-doc .hc-person { max-width: var(--hc-measure); margin-top: 22px; }   /* inside an article the contact row follows the text width and keeps its distance from the text */
.hc-doc .hc-fallback { margin: 0 0 18px; }                                /* the notice that the text is in another language sits above the title */

/* ---- one column inside an article ---- */
:root { --hc-col: 680px; }                                               /* one column width inside an article: every right edge meets */
.hc-doc .hc-lead, .hc-doc .hc-steps, .hc-doc .wuv-notice, .hc-doc .hc-person, .hc-doc .hc-useful, .hc-doc .hc-more { max-width: var(--hc-col); }
.hc-rail .hc-topic-head, .hc-rail .hc-rail-all { margin-left: 0; }       /* the rail starts on the content edge */

/* the running text of an article: 16px at 1.6 like the steps, in the same column; a long word or line never widens the page */
.hc-body { overflow-wrap: break-word; }
.hc-body > :is(p, ul, ol:not(.hc-steps)), .hc-body > section > :is(p, ul, ol:not(.hc-steps)) { max-width: var(--hc-col); margin: 14px 0; font-size: var(--wuv-fs-16); line-height: 1.6; }
.hc-body > :is(ul, ol:not(.hc-steps)), .hc-body > section > :is(ul, ol:not(.hc-steps)) { padding-left: 22px; }
.hc-body :is(ul, ol:not(.hc-steps)) > li + li { margin-top: 4px; }
.hc-body pre { max-width: var(--hc-col); margin: 14px 0; padding: 12px 14px; overflow-x: auto; border-radius: var(--wuv-r-control); background: var(--wuv-surface-2); font-size: var(--wuv-fs-14); line-height: 1.5; }

/* ---- the urgent group ("Ti serve aiuto adesso?") on top of the index ---- */
.hc-urgent { padding-top: 22px; }
@media (min-width: 992px) { .hc-urgent { padding-top: 30px; } }
.hc-urgent-rows { display: grid; gap: 1px; background: var(--wuv-divider); }
.hc-urgent-rows > li + li { border-top: 0; }
.hc-urgent-rows .hc-row { height: 100%; min-height: 68px; background: var(--wuv-surface); }
.hc-urgent-rows .hc-row:hover { background: color-mix(in srgb, var(--wuv-surface-2) 60%, var(--wuv-surface)); }
.hc-urgent-rows .lead-ic { width: 40px; height: 40px; flex: none; background: var(--wuv-accent-soft); color: var(--wuv-accent-soft-text); }
.hc-urgent-rows .hc-row-title { font-weight: 700; }
@media (min-width: 992px) { .hc-urgent-rows { grid-template-columns: 1fr 1fr; } }
.hc-urgent ~ .hc-index { padding-top: 26px; }

/* ---- the home that browses: the topics as tiles, a few guides in evidence, the way to a person ----
   Tiles and guides in evidence carry data-browse: while words are typed they give way to the list of every guide (hidden
   otherwise), and the way to a person stays. None of these rules gives them a display, which would win over the hidden attribute. */
.hc-browse { padding-top: 26px; }
@media (min-width: 992px) { .hc-browse { padding-top: 30px; } }
.hc-browse > h2, .hc-featured > h2 { margin: 0 4px 12px; font-size: var(--wuv-fs-13); font-weight: 700; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; color: var(--wuv-text-muted); }   /* the headings of the home are the board's small section labels */
.hc-urgent .hc-topic-head { margin-bottom: 12px; }
.hc-urgent .hc-topic-head h2 { font-size: var(--wuv-fs-13); letter-spacing: .12em; text-transform: uppercase; color: var(--wuv-text-muted); }
.hc-urgent .hc-topic-head .material-icons { font-size: 18px; color: var(--wuv-text-muted); }
.hc-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 992px) { .hc-tiles { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } }
.hc-tiles > li { min-width: 0; }
.hc-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; height: 100%; min-height: 112px; padding: 14px; border-radius: var(--wuv-r-card); background: var(--wuv-surface); box-shadow: var(--hc-card); color: var(--wuv-text); text-decoration: none; }
@media (min-width: 992px) { .hc-tile { min-height: 128px; padding: 18px; } }
.hc-tile:hover { background: color-mix(in srgb, var(--wuv-surface-2) 60%, var(--wuv-surface)); }
.hc-tile-ic { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--wuv-search); color: var(--wuv-icon); display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 992px) { .hc-tile-ic { width: 44px; height: 44px; } }
.hc-tile-ic .material-icons { font-size: 22px; }
.hc-tile-name { max-width: 100%; font-size: var(--wuv-fs-15); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }   /* a long name wraps inside its tile, a long word breaks, instead of widening the page */
.hc-tile-count { margin-top: auto; font-size: var(--wuv-fs-12); font-weight: 500; color: var(--wuv-text-muted); }

/* the guides in evidence and the way to a person: one under the other on a phone, side by side from 992px, the way to a person
   level with the first guide (under the heading). Without the guides in evidence (none listed, or hidden while words are typed)
   the way to a person has the place on its own and closes up to what is above it. */
.hc-lower { padding-top: 26px; }
.hc-lower:has(> .hc-featured[hidden]) { padding-top: 0; }
.hc-lower .hc-person { margin-top: 4px; }
.hc-featured:not([hidden]) + .hc-lower-support .hc-person { margin-top: 24px; }
@media (min-width: 992px) {
    .hc-lower { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-items: start; padding-top: 30px; }
    .hc-lower .hc-person { max-width: none; }
    .hc-featured:not([hidden]) + .hc-lower-support .hc-person { margin-top: 28px; }
}

/* ---- the page of a topic ----
   A phone: the topics as a row of chips that scrolls sideways, then the topic on the canvas. From 992px: breadcrumbs, the
   topics in the rail of the article page, and the guides in a white card with their rows on the canvas colour. */
.hc-switch { overflow-x: auto; padding: 14px var(--wuv-gutter) 4px; scrollbar-width: none; }   /* a chip cut off at the edge says it scrolls: no bar under the row */
.hc-switch::-webkit-scrollbar { display: none; }
.hc-switch ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; width: max-content; }
.hc-switch a { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: var(--wuv-r-chip); border: 1.5px solid var(--wuv-stroke-strong); background: var(--hc-outline-bg); color: var(--wuv-text); font-size: var(--wuv-fs-13); font-weight: 700; text-decoration: none; white-space: nowrap; }
.hc-switch a:hover { background: var(--wuv-surface-2); }
.hc-switch a[aria-current="page"] { border-color: var(--wuv-accent-soft-stroke); background: var(--wuv-accent-soft); color: var(--wuv-accent-soft-text); }
.hc-switch .material-icons { width: 18px; overflow: hidden; font-size: 18px; }   /* the width of a chip does not wait for the icon font (until it is there the icon is the name of the glyph, which is long): the script that brings the chip being read into view measures it at once */
@media (min-width: 992px) { .hc-switch { display: none; } }
.hc-topic-page { padding-top: 20px; padding-bottom: 0; }
.hc-topic-page .hc-crumbs { display: none; margin: 0; }
.hc-topic-main { min-width: 0; }
.hc-topic-intro { display: flex; align-items: center; gap: 14px; }
.hc-topic-disc { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--wuv-surface); color: var(--wuv-icon); display: inline-flex; align-items: center; justify-content: center; }
.hc-topic-disc .material-icons { font-size: 24px; }
.hc-topic-intro h1 { margin: 0; font-size: var(--wuv-fs-24); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.hc-topic-count { margin: 2px 0 0; font-size: var(--wuv-fs-13); font-weight: 500; color: var(--wuv-text-muted); }
.hc-topic-guides { margin-top: 18px; }
.hc-topic-main .hc-person { margin-top: 24px; }
.hc-rail .hc-row > .material-icons { width: 18px; overflow: hidden; font-size: 18px; }   /* the icon of a topic in the rail: its place is kept until the icon font is there */
@media (min-width: 992px) {
    .hc-topic-page { gap: 14px 36px; padding-top: 28px; padding-bottom: 56px; }
    .hc-topic-page .hc-crumbs { display: flex; grid-column: 1 / -1; }
    .hc-topic-main { padding: 34px 48px 40px; border-radius: var(--wuv-r-card); background: var(--wuv-surface); box-shadow: var(--hc-card); }
    .hc-topic-disc { background: var(--wuv-search); }
    .hc-topic-intro h1 { font-size: var(--wuv-fs-28); }
    .hc-topic-main .hc-rows { background: var(--wuv-canvas); max-width: var(--hc-col); border-radius: var(--wuv-r-row); box-shadow: none; }
    .hc-topic-main .hc-rows > li + li { border-top-color: var(--wuv-surface); border-top-width: 2px; }
    .hc-topic-main .hc-topic-guides { margin-top: 22px; }
    .hc-topic-main .hc-person { margin: 24px 0 0; }
}

/* ---- touch size on the chrome ---- */
@media (pointer: coarse) { .hc-lang { min-height: 44px; } }   /* the language button joins the 44px touch rule */
@media (pointer: coarse) { .hc-foot-links a { display: inline-flex; align-items: center; min-height: 44px; } }   /* so do the footer's links */

/* ---- the urgent group shows only the rows that have something to open: an odd last row takes the empty cell ----
   The rows the words typed in the search field hide stay in the list (hidden), so it is the rows that are shown that
   are counted: the last of them, when it is the first, third, fifth..., takes both columns. */
@media (min-width: 992px) { .hc-urgent-rows > li:nth-last-child(1 of :not([hidden])):nth-child(odd of :not([hidden])) { grid-column: 1 / -1; } }

/* ---- language menu: a disclosure without script that lists the five languages by their own names ---- */
.hc-menu { position: relative; }
.hc-menu > summary { list-style: none; cursor: pointer; }
.hc-menu > summary::-webkit-details-marker { display: none; }
.hc-menu[open] > :is(.hc-bar-btn, .hc-lang) { background: var(--wuv-surface-2); border-color: var(--wuv-text-muted); }
.hc-menu[open] .hc-caret { transform: rotate(180deg); }
.hc-menu-list { position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; min-width: 190px; margin: 0; padding: 8px; list-style: none; background: var(--wuv-surface); color: var(--wuv-text); border: 1px solid var(--wuv-divider); border-radius: 16px; box-shadow: var(--wuv-shadow-float); }
.hc-foot .hc-menu-list { top: auto; bottom: calc(100% + 6px); right: auto; left: 0; }   /* in the footer it opens upwards */
.hc-menu-list a, .hc-foot .hc-menu-list a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--wuv-r-control); color: var(--wuv-text); font-size: var(--wuv-fs-15); font-weight: 600; text-decoration: none; }
.hc-menu-list a:hover { background: var(--wuv-surface-2); }
.hc-menu-list a[aria-current="true"] { background: var(--wuv-accent-soft); color: var(--wuv-accent-soft-text); font-weight: 700; }
.hc-menu-list :focus-visible { outline-color: var(--wuv-field-stroke-focus); }          /* the blue of the page, inside the menu as everywhere on the white chrome */

/* ---- the page that says the message was sent: one card of the board ---- */
.hc-form .wuv-empty.is-surface { border-radius: var(--wuv-r-card); box-shadow: var(--hc-card); }

/* ---- the space above the footer ---- */
/* It is the footer's margin (48px, with .hc-foot above), on every page: the last block of a page brings no space of its own under it,
   or the two would add up (an article, a form and a policy ended with 36-64px of padding, the home and the not-found page with the
   contact row's 32px margin, and the home's featured guides with nothing at all on the desktop, where they stand beside that row). */
.hc-art, .hc-form, .hc-policy, .hc-topic-page { padding-bottom: 0; }
body.wuv > main :is(.hc-lower-support, .hc-topic-main, .hc-wrap) > .hc-person:last-child { margin-bottom: 0; }