/* The Guide · base and shared components (docs/DESIGN_SYSTEM.md §4-§5).
   One definition per component: the old soft style, the «Creuza» corrections that sat at the end of app.css and
   the shared parts of creuza.css are merged here. Every value comes from web/tokens.css (generated from
   design/tokens.json). Loaded after tokens.css and before app.css (pages) and the module stylesheets. */

/* ---------- Fonts: Archivo for the interface; Manrope and Fraunces only for the map labels ---------- */
@font-face { font-family: "Manrope"; src: url("/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; src: url("/fonts/archivo-ext.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Base ---------- */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; background: var(--color-bg); color: var(--color-ink); font: var(--type-body); letter-spacing: 0; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.01em; font-weight: 750; }
p { margin: 0 0 .75em; }
a { color: inherit; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button, a, input, select, label, summary { touch-action: manipulation; }
button:disabled { opacity: .5; cursor: not-allowed; }
ul, ol { padding-left: 1.2em; }
dl { margin: 0; }
hr { border: 0; border-top: var(--border-hairline) solid var(--color-line); }
.tg-i { width: 20px; height: 20px; flex: none; }
.sr-only, .ws-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 300; background: var(--color-surface); color: var(--color-ink); padding: 10px 14px; border-radius: var(--radius-sm); box-shadow: var(--elevation-3); }
.skip-link:focus { top: calc(10px + var(--safe-top)); }

/* ---------- Focus (§5): always visible, 3 px, on the element's radius; yellow on the coloured blocks ---------- */
:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-accent) 70%, transparent); outline-offset: 3px; border-radius: 6px; }
:is(.home-pick, .tg-plan, .auth-hero, .setup-heading, .tg-profile-head, .app-cta-card) :focus-visible,
.tu-tile.is-accent:focus-visible { outline-color: var(--color-yellow); }
main:focus-visible, #main:focus-visible { outline: none; }

/* ---------- Motion (§2.6): with «riduci movimento» nothing moves and a press changes only the shadow ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .button:active, .chip-button:active, .tu-tile:active, .action-tile:active, .app-bottom-nav a[data-nav="iris"]:active,
  .app-bottom-nav a:active .app-nav-icon, .home-quick-item:active .home-quick-icon, .biz-dir-card:active, .amici-dm:active, .cm-pin:active,
  .grp-vote:active, .grp-row:active, .grp-rsvp-btn:active, button.grp-option:active, .tgv-fab:active, .dm-row:active, .dm-friend:active,
  .mg-cta:active, .mg-item-card:active, .mg-kids-camera:active, .mt-ctl:active, .mt-go:active, .pa-event-card:active, .pas-card:active,
  .rk-home:active, .sfy-112:active, .social-act:active, .social-star-row label:active, .tg-card:active, .tg-fb-btn:active, .tg-persona:active,
  .tg-qbtn:active .tg-glyph, .tg-xfb-btn:active, .va-play:active,
  .tg-postcard, .tg-postcard:hover, .tg-postcard-big, .tg-postcard-big-stamp, .tg-passport-book, .tg-choice-card:active { transform: none !important; }
}

/* ---------- Typography (§2.3): one scale, sizes in rem from the tokens ---------- */
.eyebrow, .app-kicker, .personal-overline, .ws-kicker, .commercial-kicker { font: var(--type-kicker); letter-spacing: var(--type-kicker-tracking); text-transform: uppercase; color: var(--color-accent-deep); }
.app-page-intro, .page-heading, .ws-page-header { padding: var(--space-4) 0 var(--space-5); }
.app-page-title, .page-heading h1, .ws-page-header h1, .tg-map-page-heading h1 { font: var(--type-display-l); font-stretch: var(--type-display-l-stretch); text-transform: uppercase; letter-spacing: 0; font-variation-settings: normal; margin: var(--space-2) 0 var(--space-3); overflow-wrap: anywhere; }
.app-page-subtitle, .page-heading p { color: var(--color-muted); font-size: var(--type-body-l-size); max-width: 60ch; margin: 0; }
.muted, .tiny { color: var(--color-muted); }
.tiny { font-size: var(--type-caption-size); line-height: 1.45; margin-top: 10px; }
.lead { font-size: var(--type-title-size); line-height: 1.5; color: var(--color-ink); font-weight: 600; }
.section-title, .app-section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin: var(--space-8) 0 var(--space-4); }
.section-title h2, .app-section-title h2 { font: var(--type-display-m); font-stretch: var(--type-display-m-stretch); text-transform: uppercase; letter-spacing: 0; margin-top: var(--space-2); }
.section-title p { color: var(--color-muted); margin: var(--space-2) 0 0; font-size: var(--type-body-s-size); }

/* ---------- Buttons (§4.1): primary, secondary, tertiary (.ghost); M 48, S 40 with a 44 px touch area ---------- */
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-pill); border: var(--border-width) solid var(--color-outline); background: var(--color-accent); color: var(--color-accent-ink); font: var(--type-label); letter-spacing: 0; text-decoration: none; box-shadow: var(--elevation-2); transition: transform var(--motion-fast) var(--motion-ease), background var(--motion-base) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.button:hover { background: var(--color-accent-deep); }
.button:active { transform: translate(2px, 2px); box-shadow: var(--elevation-pressed); }
.button .tg-i, .button svg { width: 20px; height: 20px; }
.button.secondary { background: var(--color-surface); color: var(--color-ink); }
.button.secondary:hover { background: var(--color-yellow-soft); }
.button.small { min-height: 40px; padding: 0 var(--space-5); box-shadow: var(--elevation-1); }
.button.small:active { transform: translate(1px, 1px); box-shadow: var(--elevation-pressed); }
.button.small::after { content: ""; position: absolute; inset: -4px 0; }
.button.ghost { background: transparent; color: var(--color-accent-deep); border-color: transparent; box-shadow: none; }
.button.ghost:hover { background: var(--color-surface-2); }
.button.ghost:active { transform: none; box-shadow: none; }
.button.full { width: 100%; }
/* on a computer a button is at most 360 px wide (§4.1), unless it is the action row of a sheet */
@media (min-width: 960px) { main .button.full { width: auto; min-width: min(100%, 240px); max-width: 360px; } }
.button.danger, .button.personal-destructive, .personal-danger.button { background: var(--color-danger); color: var(--color-accent-ink); }
.button.danger:hover { background: color-mix(in srgb, var(--color-danger) 82%, var(--color-ink)); }
.button:disabled, .button[aria-disabled="true"] { background: var(--color-surface-2); color: var(--color-muted); border-color: var(--color-line); box-shadow: none; transform: none; opacity: 1; cursor: not-allowed; }
.text-button { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 28px; padding: 6px 0; font: var(--type-label); color: var(--color-accent-deep); text-decoration: none; background: none; }
.text-button::after { content: ""; position: absolute; inset: -8px -4px; }
.text-button .tg-i { width: 16px; height: 16px; }
.personal-danger, .text-button.personal-danger { color: var(--color-danger); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.icon-button { position: relative; width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--color-ink-2); background: transparent; text-decoration: none; transition: background var(--motion-base) var(--motion-ease); }
.icon-button:hover { background: var(--color-surface-2); }
.icon-button svg { width: 20px; height: 20px; }

/* ---------- Chips (§4.2): 36 high with a 44 px touch area; selected = ink ---------- */
.chip, .interest-buttons button { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: var(--border-width) solid var(--color-outline); background: var(--color-surface); color: var(--color-ink); font: var(--type-label); white-space: nowrap; transition: background var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease); }
.chip[aria-pressed="true"], .interest-buttons button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); box-shadow: var(--elevation-1); }
.chip-button { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: var(--border-width) solid var(--color-outline); background: var(--color-surface); color: var(--color-ink); font: var(--type-label); font-size: var(--type-body-s-size); text-decoration: none; transition: background var(--motion-base) var(--motion-ease); }
.chip-button .tg-i { width: 16px; height: 16px; }
.chip-button:hover { background: var(--color-yellow-soft); }
.chip-button:active { transform: translate(1px, 1px); }
.chip-button.is-done { background: var(--color-ok-soft); color: var(--color-ok); }
:is(.chip, .chip-button, .interest-buttons button)::after { content: ""; position: absolute; inset: -5px 0; }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font: var(--type-caption); font-weight: 750; background: var(--color-surface-2); color: var(--color-ink-2); white-space: nowrap; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
.tag, .personal-tags span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--color-blue-soft); color: var(--color-blue); font: var(--type-caption); font-weight: 750; }
.tg-icon-bubble { width: 48px; height: 48px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-accent-deep); flex: none; }
.tg-icon-bubble .tg-i { width: 24px; height: 24px; }

/* Segmented control (§4.3): surface-2 track, the active segment white with the contour */
.tg-seg { display: flex; gap: var(--space-1); min-height: 48px; padding: var(--space-1); border-radius: var(--radius-pill); background: var(--color-surface-2); }
.tg-seg-option { position: relative; flex: 1; min-width: 0; display: grid; }
.tg-seg-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tg-seg-option span { display: grid; place-items: center; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: var(--border-width) solid transparent; color: var(--color-ink-2); font: var(--type-label); white-space: nowrap; transition: background var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease); }
.tg-seg-option input:checked + span { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-outline); box-shadow: var(--elevation-1); }
.tg-seg-option input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--color-accent) 70%, transparent); outline-offset: 3px; }

/* ---------- Surfaces (§4.4, §4.10, §4.11) ---------- */
.panel { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--elevation-3); border: var(--border-width) solid var(--color-outline); }
.notice, .offline-banner { background: var(--color-warn-soft); color: color-mix(in srgb, var(--color-warn) 70%, var(--color-ink)); border-radius: var(--radius-md); padding: var(--space-4) 14px; font-size: var(--type-body-s-size); line-height: 1.45; margin: var(--space-4) 0; }
.notice p { margin: 4px 0 0; }
.notice strong { display: block; }
.error-box, .personal-error, .setup-error, .ws-form-error { background: var(--color-danger-soft); color: var(--color-danger); border-radius: var(--radius-md); padding: var(--space-4) 14px; font-weight: 650; font-size: var(--type-body-s-size); margin: var(--space-4) 0; }
/* Empty states: no dashed box (§4.11); the bubble, a display title and one line */
.empty, .personal-empty, .geo-empty, .ws-empty, .tg-map-empty { text-align: center; padding: var(--space-7) var(--space-5); color: var(--color-muted); margin: var(--space-4) 0; }
.empty .tg-icon-bubble, .personal-empty .personal-empty-icon { margin: 0 auto var(--space-4); width: 64px; height: 64px; border-radius: 50%; background: var(--color-yellow-soft); color: var(--color-ink); }
.empty .tg-icon-bubble .tg-i { width: 28px; height: 28px; }
.empty h2, .personal-empty h2, .tg-map-empty h3 { font: var(--type-display-m); font-stretch: var(--type-display-m-stretch); text-transform: uppercase; color: var(--color-ink); margin-bottom: var(--space-3); }
.empty p { max-width: 42ch; margin: 0 auto var(--space-4); }
/* compact empty state inside a side column or a card: smaller bubble, title-sized heading */
.empty.is-compact { padding: var(--space-5) var(--space-4); margin: 0; }
.empty.is-compact .tg-icon-bubble { width: 48px; height: 48px; margin-bottom: var(--space-3); }
.empty.is-compact .tg-icon-bubble .tg-i, .empty.is-compact .tg-icon-bubble svg { width: 24px; height: 24px; }
.empty.is-compact h3 { font: var(--type-title); color: var(--color-ink); margin: 0 0 var(--space-2); }
.empty.is-compact p { margin-bottom: 0; font-size: var(--type-body-s-size); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.app-info-disclosure { margin: 18px 0; border-radius: var(--radius-md); background: var(--color-surface); border: var(--border-hairline) solid var(--color-line); }
.app-info-disclosure > summary { min-height: 48px; padding: var(--space-4) var(--space-5); font: var(--type-label); display: flex; justify-content: space-between; align-items: center; }
.app-info-disclosure > summary::after { content: "+"; font-size: var(--type-display-s-size); color: var(--color-muted); }
.app-info-disclosure[open] > summary::after { content: "–"; }
.app-info-disclosure > :not(summary) { margin: 0 var(--space-5) 14px; color: var(--color-muted); font-size: var(--type-body-s-size); }

/* ---------- Fields (§4.8): 2 px contour, 16 px text (no zoom on iOS), focus in red with the ring ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: grid; gap: 6px; font: var(--type-label); font-size: var(--type-body-s-size); color: var(--color-ink-2); margin: 10px 0; }
.field select, .field input, input:not([type]), input[type="search"], input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="time"], input[type="date"], input[type="number"], textarea, select {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: var(--radius-md); border: var(--border-width) solid var(--color-outline); background: var(--color-surface); color: var(--color-ink); font-weight: 600; font-size: var(--type-body-l-size); outline: none; appearance: none; -webkit-appearance: none;
}
.field select, .field input, .field textarea { min-height: 52px; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236c797c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
textarea { padding: var(--space-4) 14px; min-height: 96px; line-height: 1.45; }
.field select:focus, .field input:focus, textarea:focus, select:focus, input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 16%, transparent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-accent); width: 22px; height: 22px; flex: none; margin: 0; }
/* Switch (§4.8): one for the whole site, 52 × 32, track surface-2 with the ink contour, on = ok. The old copies of
   groups, notifications and safety are gone; the quiz of the tastes keeps its own markup with .tg-switch-ui. */
input[type="checkbox"][role="switch"] { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 52px; height: 32px; margin: 0; border-radius: var(--radius-pill); border: var(--border-width) solid var(--color-outline); background: var(--color-surface-2); cursor: pointer; transition: background var(--motion-base) var(--motion-ease); accent-color: auto; }
input[type="checkbox"][role="switch"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; border: var(--border-width) solid var(--color-outline); background: var(--color-surface); transition: transform var(--motion-base) var(--motion-ease); }
input[type="checkbox"][role="switch"]:checked { background: var(--color-ok); }
input[type="checkbox"][role="switch"]:checked::after { transform: translateX(20px); }
input[type="checkbox"][role="switch"]:disabled { background: var(--color-surface-2); border-color: var(--color-line); cursor: not-allowed; }
input[type="checkbox"][role="switch"]:disabled::after { border-color: var(--color-line); }
.checkline { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 650; margin: 10px 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font: var(--type-label); margin-bottom: var(--space-3); padding: 0; }
.interests-label { font: var(--type-label); font-size: var(--type-body-s-size); color: var(--color-ink-2); margin: var(--space-5) 0 var(--space-3); }
.interest-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Small shared pieces ---------- */
.app-plan-options { margin: var(--space-5) 0; border-radius: var(--radius-md); background: var(--color-surface-2); padding: 0 14px; }
.app-plan-options > summary { min-height: 48px; padding: 14px 0; font-weight: 750; display: flex; justify-content: space-between; }
.app-plan-options > summary span { color: var(--color-muted); font-weight: 650; font-size: var(--type-body-s-size); }
.app-plan-options[open] { padding-bottom: 14px; }
.budget-note, .dialog-note, .app-planner-note, .personal-helper, .setup-helper, .ws-form-note, .ws-footnote { color: var(--color-muted); font-size: var(--type-body-s-size); line-height: 1.5; }
.dialog-note { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--color-surface-2); border-radius: var(--radius-sm); padding: 10px var(--space-4); margin: 14px 0 var(--space-3); color: var(--color-ink-2); }
.dialog-note .tg-i { width: 16px; height: 16px; margin-top: 2px; }
/* Back link (§4.7): «‹ Tu», 44 px tall, above the page header */
.app-back { min-height: 44px; margin: var(--space-2) 0 calc(-1 * var(--space-2)); padding: 0 var(--space-2) 0 0; }
.app-back .tg-i { width: 20px; height: 20px; }

/* ---------- Page header (§4.6, web/ui.js pageHead): kicker, one h1, intro, actions on the right on a computer ---------- */
.tg-page-head { position: relative; }
.tg-page-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
@media (min-width: 960px) {
  .tg-page-head.has-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-6); align-items: end; }
  .tg-page-head.has-actions > :not(.tg-page-actions) { grid-column: 1; }
  .tg-page-head.has-actions > .tg-page-actions { grid-column: 2; grid-row: 1 / span 3; margin: 0; justify-content: flex-end; }
}
/* Section header (§4.6): display-m title, «Tutti ›» on the right */
.tg-section-head { align-items: baseline; }
.tg-section-more { flex: none; white-space: nowrap; min-height: 44px; }
.tg-section-more .tg-i { width: 16px; height: 16px; }

/* ---------- List row (§4.5, web/ui.js row): icon or picture, title and one line, chevron, value or one action ---------- */
.tg-row { display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: 56px; padding: var(--space-3) var(--space-4); color: var(--color-ink); background: transparent; text-align: left; text-decoration: none; border-radius: 0; transition: background var(--motion-base) var(--motion-ease); }
a.tg-row:hover, button.tg-row:hover { background: var(--color-surface-2); }
.tg-row > .tg-i { flex: none; width: 18px; height: 18px; color: var(--color-muted); }
.tg-row-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--color-yellow-soft); color: var(--color-ink); }
.tg-row-icon .tg-i, .tg-row-icon svg { width: 22px; height: 22px; }
.tg-row-copy { flex: 1; min-width: 0; display: grid; gap: var(--space-1); }
.tg-row-copy strong { font: var(--type-title); font-size: var(--type-body-size); line-height: 1.3; overflow-wrap: anywhere; }
.tg-row-copy small { font-size: var(--type-body-s-size); color: var(--color-muted); line-height: 1.4; }

/* ---------- Segmented tabs (§4.3) as buttons: the same look as .tg-seg with radios ---------- */
.tg-seg.is-tabs { align-items: stretch; }
.tg-seg-tab { position: relative; flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--space-2); border-radius: var(--radius-pill); border: var(--border-width) solid transparent; color: var(--color-ink-2); font: var(--type-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease); }
.tg-seg-tab:hover { color: var(--color-ink); }
.tg-seg-tab[aria-pressed="true"], .tg-seg-tab[aria-selected="true"] { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-outline); box-shadow: var(--elevation-1); }

/* ---------- Chip rows: one scrolling row on the phone, counts inside the chip (§4.2) ---------- */
.tg-chip-row { display: flex; gap: var(--space-3); overflow-x: auto; padding: var(--space-2) var(--gutter) var(--space-3); margin: 0 calc(-1 * var(--gutter)); scrollbar-width: none; scroll-snap-type: x proximity; }
.tg-chip-row::-webkit-scrollbar { display: none; }
.tg-chip-row > * { flex: none; }
.tg-chip-row.is-fill > * { flex: 1 1 0; justify-content: center; min-width: max-content; }
.tg-chip-row .chip .tg-i { width: 16px; height: 16px; }
.tg-chip-count { font: var(--type-caption); color: var(--color-muted); }
.chip[aria-pressed="true"] .tg-chip-count { color: inherit; }

/* ---------- Notice (§4.10): info, without contour (it is not tappable) ---------- */
.tg-notice { display: flex; gap: var(--space-3); align-items: flex-start; margin: 0; padding: var(--space-4) 14px; border-radius: var(--radius-md); background: var(--color-warn-soft); color: var(--color-ink); font-size: var(--type-body-s-size); line-height: 1.45; }
.tg-notice.is-info { background: var(--color-blue-soft); }
.tg-notice.is-warn { background: var(--color-warn-soft); }
.tg-notice.is-error { background: var(--color-danger-soft); color: var(--color-danger); font-weight: 650; }
.tg-notice.is-ok { background: var(--color-ok-soft); color: var(--color-ok); font-weight: 650; }
.tg-notice strong { font-weight: 800; }
.tg-notice .tg-i { flex: none; margin-top: 1px; color: var(--color-blue); }

/* ---------- Illustrations of the homes (§4.14, web/home-art.js) ----------
   The same colours in the light and the dark theme, like the blocks: every tint is mixed from the block tokens. */
.tg-art { display: block; width: 100%; height: 100%; color: var(--color-block-yellow-text);
  --art-paper: var(--color-block-blue-text); --art-cream: var(--color-block-ink-text); --art-ink: var(--color-block-yellow-text);
  --art-green: color-mix(in srgb, color-mix(in oklch, var(--color-block-blue) 45%, var(--color-block-yellow)) 72%, var(--art-ink)); }
.tg-art .a-ink { fill: var(--art-ink); }
.tg-art .a-ink2 { fill: color-mix(in srgb, var(--art-ink) 80%, var(--art-paper)); }
.tg-art .a-paper { fill: var(--art-paper); }
.tg-art .a-cream { fill: var(--art-cream); }
.tg-art .a-cream2 { fill: color-mix(in srgb, var(--art-cream) 82%, var(--art-ink)); }
.tg-art .a-red { fill: var(--color-block-red); }
.tg-art .a-redsoft { fill: color-mix(in srgb, var(--color-block-red) 24%, var(--art-paper)); }
.tg-art .a-yellow, .tg-art .a-lit { fill: var(--color-block-yellow); }
.tg-art .a-yellowsoft { fill: color-mix(in srgb, var(--color-block-yellow) 32%, var(--art-paper)); }
.tg-art .a-blue { fill: var(--color-block-blue); }
.tg-art .a-bluedeep { fill: color-mix(in srgb, var(--color-block-blue) 72%, var(--art-ink)); }
.tg-art .a-bluesoft { fill: color-mix(in srgb, var(--color-block-blue) 16%, var(--art-paper)); }
.tg-art .a-green { fill: var(--art-green); }
.tg-art .a-hill { fill: color-mix(in srgb, var(--art-green) 34%, var(--art-paper)); }
.tg-art .a-nighthill { fill: color-mix(in srgb, var(--art-green) 30%, var(--color-block-ink)); }
.tg-art .a-grey { fill: color-mix(in srgb, var(--art-ink) 42%, var(--art-paper)); }
.tg-art .a-greysoft { fill: color-mix(in srgb, var(--art-ink) 14%, var(--art-paper)); }
.tg-art .a-sand { fill: color-mix(in srgb, var(--color-block-yellow) 36%, var(--art-cream)); }
.tg-art .a-night { fill: var(--color-block-ink); }
.tg-art .a-seanight { fill: color-mix(in srgb, var(--color-block-blue) 55%, var(--color-block-ink)); }
.tg-art .a-stroke-red { stroke: var(--color-block-red); }
.tg-art .a-stroke-yellow { stroke: var(--color-block-yellow); }
.tg-art .a-stroke-blue { stroke: var(--color-block-blue); }
.tg-art .a-stroke-cream { stroke: var(--art-cream); }
.tg-art .a-stroke-wave { stroke: color-mix(in srgb, var(--color-block-blue) 22%, var(--art-paper)); }
.tg-art-text { font-family: var(--font-display); font-stretch: var(--font-stretch-numbers); }

/* ---------- Poster hero (§4.14): yellow block, greeting, the city in giant letters, skyline at the bottom ---------- */
.tg-poster { position: relative; overflow: hidden; display: grid; container-type: inline-size; background: var(--color-block-yellow); color: var(--color-block-yellow-text); border: var(--border-width) solid var(--color-outline); border-radius: var(--radius-xl); box-shadow: var(--elevation-3); }
.tg-poster :focus-visible { outline-color: var(--color-block-yellow-text); }
.tg-poster-copy { display: grid; gap: var(--space-5); padding: var(--space-6) var(--space-6) var(--space-4); min-width: 0; }
.tg-poster-title { display: grid; margin: 0; font-family: var(--font-display); font-weight: 900; font-stretch: var(--font-stretch-display); text-transform: uppercase; letter-spacing: 0; line-height: .9; min-width: 0; }
.tg-poster-hello { font-size: var(--type-display-m-size); }
.tg-poster-city { font-size: min(24cqi, calc(var(--type-display-xl-size) * 2.4)); line-height: .84; overflow-wrap: anywhere; }
.tg-poster-city.is-medium { font-size: min(17cqi, calc(var(--type-display-xl-size) * 2)); }
.tg-poster-city.is-long { font-size: min(11.5cqi, calc(var(--type-display-xl-size) * 1.6)); }
.tg-poster-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.tg-poster-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-height: 44px; color: inherit; text-decoration: none; border-radius: var(--radius-md); }
.tg-poster-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: var(--border-width) solid var(--color-block-yellow-text); background: var(--color-block-blue-text); color: var(--color-block-yellow-text); font: var(--type-label); white-space: nowrap; }
.tg-poster-chip .tg-i { width: 16px; height: 16px; }
.tg-poster-chips:hover .tg-poster-chip { background: var(--color-block-ink-text); }
.tg-poster-art { height: 152px; min-width: 0; }

/* ---------- Ticket chips (§4.14): «Quanto tempo hai?», one choice, notched like a ticket stub ---------- */
.tg-tickets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.tg-ticket { position: relative; display: grid; place-items: center; align-content: center; gap: var(--space-1); min-height: 76px; padding: var(--space-3) var(--space-2); border: var(--border-width) solid var(--color-outline); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); text-align: center; transition: background var(--motion-base) var(--motion-ease); }
.tg-ticket::before, .tg-ticket::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--color-bg); border: var(--border-width) solid var(--color-outline); }
.tg-ticket::before { left: -7px; clip-path: inset(0 0 0 50%); }
.tg-ticket::after { right: -7px; clip-path: inset(0 50% 0 0); }
.tg-ticket b { font: var(--type-display-s); font-size: var(--type-display-m-size); font-stretch: var(--font-stretch-numbers); line-height: 1; }
.tg-ticket small { font: var(--type-caption); color: var(--color-muted); line-height: 1.2; }
.tg-ticket:hover { background: var(--color-yellow-soft); }
.tg-ticket[aria-pressed="true"] { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); box-shadow: var(--elevation-1); }
.tg-ticket[aria-pressed="true"] b { color: var(--color-yellow); }
.tg-ticket[aria-pressed="true"] small { color: var(--color-bg); }
:where([data-theme="dark"]) .tg-ticket[aria-pressed="true"] b { color: var(--color-bg); }

/* ---------- Postcard (§4.14): illustrated front with «Saluti da», back with stamp, postmark and the stops ---------- */
.tg-postcard-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(88%, 380px); gap: var(--space-4); overflow-x: auto; overscroll-behavior-x: contain; padding: var(--space-3) var(--gutter) var(--space-5); margin: 0 calc(-1 * var(--gutter)); scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
.tg-postcard-rail::-webkit-scrollbar { display: none; }
.tg-postcard-rail > * { scroll-snap-align: start; min-width: 0; }
.tg-postcard-rail.is-places { grid-auto-columns: min(66%, 248px); }
.tg-postcard { --pc-tilt: -1deg; position: relative; display: block; min-width: 0; padding: var(--space-3); border: var(--border-width) solid var(--color-outline); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--elevation-3); transform: rotate(var(--pc-tilt)); text-align: left; transition: transform var(--motion-base) var(--motion-ease); }
.tg-postcard:nth-child(even) { --pc-tilt: 1deg; }
.tg-postcard:hover { transform: rotate(0deg); }
.tg-postcard-link { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: var(--space-4); color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.tg-postcard-front { position: relative; display: block; min-height: 176px; overflow: hidden; border: var(--border-width) solid var(--color-outline); border-radius: var(--radius-sm); background: var(--color-surface-2); }
.tg-postcard-front > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tg-postcard-label { position: absolute; left: 0; right: 0; bottom: 0; display: grid; padding: var(--space-3) var(--space-3) var(--space-3); background: var(--color-block-blue); color: var(--color-block-blue-text); border-top: var(--border-width) solid var(--color-outline); }
.tg-postcard-label small { font: var(--type-kicker); letter-spacing: var(--type-kicker-tracking); text-transform: uppercase; }
.tg-postcard-label b { font: var(--type-display-m); font-size: var(--type-display-s-size); font-stretch: var(--font-stretch-display); text-transform: uppercase; line-height: 1; overflow-wrap: anywhere; }
.tg-postcard-label.is-red { background: var(--color-block-red); }
.tg-postcard-label.is-green { background: color-mix(in srgb, var(--color-block-blue) 30%, var(--color-ok)); }
.tg-postcard-label.is-plum { background: color-mix(in srgb, var(--color-block-red) 50%, var(--color-block-blue)); }
.tg-postcard-back { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding-top: var(--space-1); }
.tg-postcard-stamp { position: absolute; top: 0; right: 0; width: 46px; height: 54px; display: grid; place-items: center; padding: 4px; border: var(--border-width) dashed var(--color-outline); background: var(--color-surface); }
.tg-postcard-stamp .tg-i { width: 100%; height: 100%; padding: 6px; border-radius: 2px; background: var(--color-block-blue); color: var(--color-block-blue-text); }
.tg-postcard-stamp.is-red .tg-i { background: var(--color-block-red); }
.tg-postcard-stamp.is-green .tg-i { background: color-mix(in srgb, var(--color-block-blue) 30%, var(--color-ok)); }
.tg-postcard-stamp.is-plum .tg-i { background: color-mix(in srgb, var(--color-block-red) 50%, var(--color-block-blue)); }
.tg-postcard-mark { position: absolute; top: 10px; right: 28px; width: 72px; opacity: .85; pointer-events: none; }
.tg-postcard-title { margin-top: 58px; font: var(--type-title); line-height: 1.2; }
.tg-postcard-stops { list-style: none; margin: 0; padding: 0; counter-reset: stop; display: grid; }
.tg-postcard-stops li { counter-increment: stop; display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-1) 0; border-bottom: var(--border-hairline) solid var(--color-line); font-size: var(--type-body-s-size); line-height: 1.3; }
.tg-postcard-stops li::before { content: counter(stop); flex: none; font-weight: 850; color: var(--color-accent-deep); }
.tg-postcard-meta { margin-top: auto; padding-top: var(--space-2); font: var(--type-caption); color: var(--color-ink-2); }
.tg-postcard.is-place { display: grid; gap: var(--space-3); width: 100%; }
.tg-postcard.is-place .tg-postcard-title { margin-top: 0; }
.tg-postcard.is-place .tg-postcard-front { min-height: 148px; color: var(--color-block-yellow-text); background: color-mix(in srgb, var(--color-block-blue) 16%, var(--color-block-blue-text)); }
.tg-postcard.is-place .tg-postcard-front > svg { inset: 10% 12% 22%; width: 76%; height: 68%; }
.tg-postcard.is-place .tg-postcard-front.is-red { background: color-mix(in srgb, var(--color-block-red) 22%, var(--color-block-blue-text)); }
.tg-postcard.is-place .tg-postcard-front.is-yellow { background: color-mix(in srgb, var(--color-block-yellow) 36%, var(--color-block-blue-text)); }
.tg-postcard.is-place .tg-postcard-front.is-green { background: color-mix(in srgb, var(--color-ok) 22%, var(--color-block-blue-text)); }
.tg-postcard-tag { position: absolute; left: var(--space-3); bottom: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); min-height: 28px; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--color-block-ink); color: var(--color-block-ink-text); font: var(--type-caption); font-weight: 800; }
.tg-postcard-tag .tg-i { width: 14px; height: 14px; }
.tg-postcard.is-skeleton { min-height: 220px; display: grid; grid-template-columns: 0.8fr 1fr; gap: var(--space-4); }
.tg-postcard.is-skeleton .tg-postcard-front, .tg-postcard.is-skeleton i { background: var(--color-surface-3); border-color: transparent; }
.tg-postcard.is-skeleton i { display: block; height: 14px; border-radius: var(--radius-xs); margin-top: var(--space-4); }
:where([data-theme="dark"]) .tg-postcard { background: var(--color-surface); }
:where([data-theme="dark"]) .tg-postcard-stamp { background: var(--color-surface-2); }

/* Big postcard of the day (day out): the scene, the label, the stamp and the weather chips. */
.tg-postcard-big { position: relative; overflow: hidden; min-height: 340px; border: var(--border-width) solid var(--color-outline); border-radius: var(--radius-lg); box-shadow: var(--elevation-4); transform: rotate(-1deg); background: var(--color-surface-2); }
.tg-postcard-big > .tg-art { position: absolute; inset: 0; }
.tg-postcard-big-label { position: absolute; left: var(--space-4); top: var(--space-5); max-width: calc(100% - 120px); display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); border: var(--border-width) solid var(--color-outline); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-ink); box-shadow: var(--elevation-2); }
.tg-postcard-big-title { margin: 0; font: var(--type-display-l); font-stretch: var(--type-display-l-stretch); text-transform: uppercase; line-height: .95; overflow-wrap: anywhere; }
.tg-postcard-big-stamp { position: absolute; right: var(--space-4); top: var(--space-4); width: 68px; transform: rotate(4deg); }
.tg-postcard-big-meta { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 44px; align-items: flex-end; color: inherit; text-decoration: none; }

/* ---------- Postage stamp and postmark (§4.14, web/home-art.js) ---------- */
.tg-postage { display: block; width: 100%; height: auto; filter: drop-shadow(2px 2px 0 var(--color-shadow)); }
.tg-postmark { display: block; width: 100%; height: auto; }

/* ---------- Agenda row (§4.14): time column, category kicker, title, place and price ---------- */
.tg-agenda { list-style: none; margin: 0; padding: 0; }
.tg-agenda > li + li { border-top: var(--border-hairline) solid var(--color-line); }
.tg-agenda > li { break-inside: avoid; }
.tg-agenda-slot { break-after: avoid; }
.tg-agenda-slot { margin: 0; padding: var(--space-5) 0 var(--space-2); font: var(--type-kicker); letter-spacing: var(--type-kicker-tracking); text-transform: uppercase; color: var(--color-ink); }
.tg-agenda-row { --agenda-tone: var(--color-cat-shop); display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-4); align-items: start; min-height: 56px; padding: var(--space-4) 0; color: var(--color-ink); text-decoration: none; border-radius: var(--radius-sm); }
.tg-agenda-row:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.tg-agenda-time { display: grid; gap: var(--space-1); }
.tg-agenda-time b { font: var(--type-display-s); font-stretch: var(--font-stretch-numbers); }
.tg-agenda-time b.is-day { font: var(--type-label); color: var(--color-ink-2); }
.tg-agenda-time small { font: var(--type-caption); color: var(--color-muted); }
.tg-agenda-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--color-yellow-soft); color: var(--color-ink); }
.tg-agenda-copy { display: grid; gap: var(--space-1); min-width: 0; }
.tg-agenda-copy strong { font: var(--type-title); line-height: 1.25; overflow-wrap: anywhere; }
.tg-agenda-kicker { font: var(--type-kicker); letter-spacing: var(--type-kicker-tracking); text-transform: uppercase; color: var(--agenda-tone); }
.tg-agenda-meta { font-size: var(--type-body-s-size); color: var(--color-muted); }
.tg-agenda-row.is-night { --agenda-tone: var(--color-cat-night); }
.tg-agenda-row.is-culture { --agenda-tone: var(--color-cat-culture); }
.tg-agenda-row.is-drink { --agenda-tone: var(--color-cat-drink); }
.tg-agenda-row.is-food { --agenda-tone: var(--color-cat-food); }
.tg-agenda-row.is-nature { --agenda-tone: var(--color-cat-nature); }
.tg-agenda-row.is-idea { --agenda-tone: var(--color-accent-deep); }
.tg-agenda-skeleton { display: grid; gap: var(--space-4); padding-top: var(--space-4); }
.tg-agenda-skeleton i { display: block; height: 56px; border-radius: var(--radius-md); background: var(--color-surface-2); }

/* ---------- Masthead of the agenda (§4.14): the city's daily paper ---------- */
.tg-masthead { display: grid; gap: var(--space-3); }
.tg-masthead-top { display: flex; justify-content: space-between; gap: var(--space-4); margin: 0; padding-bottom: var(--space-2); border-bottom: var(--border-width) solid var(--color-ink); font: var(--type-kicker); letter-spacing: var(--type-kicker-tracking); text-transform: uppercase; color: var(--color-ink); }
.tg-masthead-top span:last-child { letter-spacing: 0; text-transform: none; font: var(--type-caption); color: var(--color-ink-2); }
.tg-masthead-title { margin: 0; padding-bottom: var(--space-2); border-bottom: var(--border-width) solid var(--color-ink); font: var(--type-display-xl); font-stretch: var(--type-display-xl-stretch); text-transform: uppercase; letter-spacing: 0; line-height: .95; overflow-wrap: anywhere; }
.tg-masthead-accent { color: var(--color-accent); }
.tg-masthead-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tg-wx-line { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; color: var(--color-ink); text-decoration: none; border-radius: var(--radius-sm); }
.tg-wx-line:empty { display: none; }
.tg-wx-temp { font: var(--type-display-s); font-stretch: var(--font-stretch-numbers); }
.tg-wx-text { color: var(--color-ink-2); font-size: var(--type-body-s-size); }
.tg-wx-i { color: var(--color-warn); }

/* ---------- Front page (§4.14): the hero event of the agenda ---------- */
.tg-front { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: var(--space-4); padding: var(--space-5); border: var(--border-width) solid var(--color-outline); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--elevation-3); }
.tg-front-copy { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.tg-front-kicker { margin: 0; font: var(--type-kicker); letter-spacing: var(--type-kicker-tracking); text-transform: uppercase; color: var(--color-accent-deep); }
.tg-front-title { margin: 0; font: var(--type-display-m); font-stretch: var(--type-display-m-stretch); text-transform: uppercase; line-height: 1; overflow-wrap: break-word; hyphens: auto; }
.tg-front-title a { color: inherit; text-decoration: none; }
.tg-front-line, .tg-front-text, .tg-front-price { margin: 0; color: var(--color-ink-2); font-size: var(--type-body-s-size); }
.tg-front-actions { margin-top: var(--space-3); }
.tg-front-art { width: 72px; height: 90px; overflow: hidden; border: var(--border-width) solid var(--color-outline); border-radius: var(--radius-sm); }
.tg-front-art img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- «E poi» and the notices box ---------- */
.tg-epoi { padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-ink); }
.tg-epoi > .eyebrow { margin: 0 0 var(--space-2); }
.tg-epoi-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-5); }
.tg-epoi-col + .tg-epoi-col { border-left: var(--border-width) solid var(--color-ink); padding-left: var(--space-5); }
.tg-epoi-title { margin: 0 0 var(--space-3); font: var(--type-display-m); font-stretch: var(--type-display-m-stretch); text-transform: uppercase; font-size: var(--type-display-s-size); }
.tg-epoi ul { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-4); }
.tg-epoi li a { display: grid; gap: var(--space-1); color: var(--color-ink); text-decoration: none; min-height: 44px; border-radius: var(--radius-xs); }
.tg-epoi li b { font: var(--type-label); }
.tg-epoi li strong { font-size: var(--type-body-size); line-height: 1.3; }
.tg-epoi li small { color: var(--color-muted); font-size: var(--type-body-s-size); }
.tg-notices { padding: var(--space-5); border: var(--border-width) solid var(--color-outline); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--elevation-3); }
.tg-notices-title { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); font: var(--type-title); color: var(--color-blue); }
.tg-notices ul { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-4); }
.tg-notice-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); color: var(--color-ink); text-decoration: none; }
.tg-notice-row strong { display: block; font-size: var(--type-body-size); line-height: 1.3; }
.tg-notice-row small { display: block; color: var(--color-ink-2); font-size: var(--type-body-s-size); }
.tg-notice-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-xs); background: var(--color-warn-soft); color: var(--color-warn); }
.tg-notice-icon .tg-i { width: 18px; height: 18px; }

/* ---------- Choice cards (§4.14): one choice between two big options (radio group) ---------- */
.tg-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.tg-choice-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-height: 124px; padding: var(--space-5); border: var(--border-width) solid var(--color-outline); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-ink); text-align: left; box-shadow: var(--elevation-2); transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.tg-choice-card b { font: var(--type-display-l); font-stretch: var(--type-display-l-stretch); text-transform: uppercase; line-height: 1; }
.tg-choice-card small { font-size: var(--type-body-s-size); line-height: 1.35; color: var(--color-muted); }
.tg-choice-top { display: flex; width: 100%; align-items: center; justify-content: space-between; }
.tg-choice-i { width: 26px; height: 26px; }
.tg-choice-check { width: 28px; height: 28px; display: none; place-items: center; border-radius: 50%; border: var(--border-width) solid var(--color-block-yellow-text); background: var(--color-block-yellow); color: var(--color-block-yellow-text); }
.tg-choice-check .tg-i { width: 16px; height: 16px; }
.tg-choice-card:active { transform: translate(1px, 1px); box-shadow: var(--elevation-pressed); }
.tg-choice-card[aria-checked="true"] { background: var(--color-block-blue); color: var(--color-block-blue-text); box-shadow: var(--elevation-3); }
.tg-choice-card[aria-checked="true"] small { color: var(--color-block-blue-text); }
.tg-choice-card[aria-checked="true"] .tg-choice-check { display: grid; }
.tg-choice-card[aria-checked="true"]:focus-visible { outline-color: var(--color-yellow); }

/* ---------- Date badge, list card, tiles, passport ---------- */
.tg-datebadge { flex: none; display: grid; place-items: center; width: 52px; padding: var(--space-2) 0; border: var(--border-width) solid var(--color-outline); border-radius: var(--radius-sm); background: var(--color-yellow-soft); color: var(--color-ink); line-height: 1; }
.tg-datebadge b { font: var(--type-display-s); font-stretch: var(--font-stretch-numbers); }
.tg-datebadge span { font: var(--type-kicker); letter-spacing: .06em; text-transform: uppercase; }
.tg-list-card { list-style: none; margin: 0; padding: 0; border: var(--border-width) solid var(--color-outline); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--elevation-3); overflow: hidden; }
.tg-list-card > li + li { border-top: var(--border-hairline) solid var(--color-line); }
.tg-row-link { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; padding: var(--space-3) var(--space-4); color: var(--color-ink); text-decoration: none; }
.tg-row-link > .tg-i { flex: none; width: 18px; height: 18px; color: var(--color-muted); }
.tg-row-copy { flex: 1; min-width: 0; display: grid; gap: var(--space-1); }
.tg-row-copy strong { font-size: var(--type-body-size); line-height: 1.3; }
.tg-row-copy small { font-size: var(--type-body-s-size); color: var(--color-muted); }
.tg-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.tg-expo { display: grid; overflow: hidden; border: var(--border-width) solid var(--color-outline); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-ink); text-decoration: none; box-shadow: var(--elevation-3); }
.tg-expo-cover { display: block; height: 108px; border-bottom: var(--border-width) solid var(--color-outline); overflow: hidden; }
.tg-expo-cover img { width: 100%; height: 100%; object-fit: cover; }
.tg-expo-copy { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4) var(--space-4); min-width: 0; }
.tg-expo-copy strong { font: var(--type-label); line-height: 1.25; overflow-wrap: anywhere; }
.tg-expo-copy small { font: var(--type-caption); color: var(--color-accent-deep); }
.tg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
.tg-tile { display: flex; flex-direction: column; gap: var(--space-2); min-height: 150px; padding: var(--space-5); border: var(--border-width) solid var(--color-outline); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-ink); text-decoration: none; box-shadow: var(--elevation-3); }
.tg-tile-title { font: var(--type-display-m); font-stretch: var(--type-display-m-stretch); text-transform: uppercase; }
.tg-tile-line { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-body-s-size); line-height: 1.35; }
.tg-tile-line .tg-i { width: 16px; height: 16px; }
.tg-tile-big { font: var(--type-display-xl); font-stretch: var(--font-stretch-numbers); line-height: 1; }
.tg-tile-hours { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: auto; }
.tg-tile-hour { display: grid; justify-items: center; gap: var(--space-1); font: var(--type-caption); }
.tg-tile-hour small { font: inherit; }
@media (max-width: 599px) { .tg-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.tg-tile-hour .tg-i { width: 18px; height: 18px; }
.tg-tile-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: auto; }
.tg-tile.is-blue { background: var(--color-block-blue); color: var(--color-block-blue-text); }
.tg-tile.is-blue .tg-tile-title { color: var(--color-yellow); }
.tg-tile.is-sos { background: var(--color-sos); color: var(--color-sos-text); }
.tg-tile.is-sos .button.secondary { background: var(--color-surface); color: var(--color-ink); }
.tg-tile.is-sos .tg-tile-sos { background: var(--color-sos-deep); color: var(--color-sos-text); }
.tg-tile.is-blue:focus-visible, .tg-tile.is-sos :focus-visible { outline-color: var(--color-yellow); }
.tg-passport-teaser { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-5); align-items: center; padding: var(--space-5); border: var(--border-width) solid var(--color-outline); border-radius: var(--radius-lg); background: var(--color-surface-2); color: var(--color-ink); text-decoration: none; box-shadow: var(--elevation-3); }
.tg-passport-book { display: grid; align-content: center; justify-items: center; gap: var(--space-1); height: 148px; padding: var(--space-3); border: var(--border-width) solid var(--color-outline); border-radius: var(--radius-xs) var(--radius-sm) var(--radius-sm) var(--radius-xs); background: var(--color-block-red); color: var(--color-block-yellow); box-shadow: var(--elevation-2); transform: rotate(-3deg); text-align: center; }
.tg-passport-book b { font: var(--type-display-s); font-stretch: var(--font-stretch-display); text-transform: uppercase; }
.tg-passport-book small { font: var(--type-kicker); letter-spacing: var(--type-kicker-tracking); text-transform: uppercase; color: var(--color-block-red-text); }
.tg-passport-book i { font: var(--type-caption); color: var(--color-block-red-text); }
.tg-passport-copy { display: grid; gap: var(--space-2); min-width: 0; }
.tg-passport-copy strong { font: var(--type-title); }
.tg-passport-copy small { font-size: var(--type-body-s-size); color: var(--color-ink-2); }
.tg-passport-stamps { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tg-passport-stamp { display: block; width: 64px; }
.tg-passport-stamp svg { width: 100%; height: auto; }
.tg-postcard-back-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border: var(--border-width) solid var(--color-outline); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-block-yellow) 14%, var(--color-surface)); color: var(--color-ink); text-decoration: none; box-shadow: var(--elevation-3); overflow: hidden; }
.tg-pcb-left { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5); border-right: var(--border-width) solid var(--color-outline); }
.tg-pcb-count { font: var(--type-display-xl); font-stretch: var(--font-stretch-numbers); line-height: .9; }
.tg-pcb-line { font-size: var(--type-body-s-size); color: var(--color-ink-2); }
.tg-pcb-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); padding: var(--space-4); }
.tg-pcb-right i { display: block; width: 100%; border-top: var(--border-hairline) solid var(--color-line-strong); opacity: .4; }
.tg-pcb-stamp { width: 76px; }
.tg-pcb-stamp svg { width: 100%; height: auto; }

/* Language of the contents (web/lang.js, docs/TRADUZIONI.md): the note on a text still in Italian, the language sheet. */
.tg-lang-note { display: inline-flex; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-3); padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-ink-2); font-size: var(--type-body-s-size); }
.tg-lang-options { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; border: 0; }
.tg-lang-option { display: flex; gap: var(--space-3); align-items: center; min-height: 48px; padding: 0 var(--space-4); border-radius: var(--radius-sm); background: var(--color-surface-2); cursor: pointer; }
.tg-lang-option input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-accent); }