/* A snapshot of the shared WuvDay tokens, which are kept outside this repository: the paths, ADRs and mockups named below are there. */
/* SNAPSHOT for the Help Center mockups (2026-10-19) of .ai/webapp-kb-materials/2026-09-30-web-design-language/wuv-tokens.css
   (the WuvDay web design language, a proposal of 2026-09-30). Do not edit here: change the source and re-copy. */
/*
 * WuvDay web design language — tokens and base recipes (PROPOSAL, 2026-09-30)
 * ---------------------------------------------------------------------------
 * Source of truth: the Android design language (ios-handoff/design-language.md, ADR-015…022) and its
 * desktop reading in adminpannel/backend-laravel/DESIGN.md. Every value here is either copied from those
 * two (the comment says which) or is a web-specific answer marked "WEB".
 *
 * Rules (same as Android and the panel):
 *  1. A component never names a colour: var(--wuv-*) only. A hex in component CSS is a dark-mode bug.
 *  2. Every colour token has a dark twin. Light on :root; dark on [data-theme="dark"] and, for
 *     [data-theme="system"], under @media (prefers-color-scheme: dark).
 *  3. Foregrounds on a brand colour (white on the red bar) stay literal white: they are not themed.
 *  4. Four radii are the whole shape vocabulary: 22 pill · 20 board card · 12 grouped row · 14 snackbar.
 *  5. Shadows only on what floats (board card, snackbar, menus, sheets). Grouped rows are flat.
 *
 * This file is used by the mockups first. When the restyle is built, the same names become the SCSS/CSS
 * layer of the webapp (Bootstrap 4 stays underneath until §5 Q4 of the KB is decided).
 */

:root {
  /* ---- surfaces and structure (Android §1.1) ---- */
  --wuv-window: #FFFFFF;          /* wuv_window_bg: page background of the board and forms */
  --wuv-canvas: #F4F4F6;          /* wuv_bg: grey canvas behind grouped rows (account, lists) */
  --wuv-surface: #FFFFFF;         /* wuv_surface: cards, rows, sheets, bars */
  --wuv-surface-2: #F0F0F2;       /* wuv_surface_variant: raised sections, hover of outline pills */
  --wuv-field: #FFFFFF;           /* wuv_field_bg */
  --wuv-field-stroke: #8E8E96;    /* WEB: Android's wuv_pos_field_stroke #D5D5D8 measures 1.46:1; the panel darkened it to #8E8E96 (3:1, WCAG 1.4.11) and the web follows */
  --wuv-field-stroke-focus: #1565C0; /* wuv_pos_field_stroke_focused */
  --wuv-search: #F2F2F4;          /* wuv_search_bg: search pill, filter circles, empty-state disc */
  --wuv-circle: #FFFFFF;          /* wuv_circle_field: circular field-level buttons */
  --wuv-divider: #E4E4E8;         /* wuv_divider: hairlines */
  --wuv-stroke-strong: #C9C9CF;   /* wuv_stroke_strong: outline pills, scrollbars */
  --wuv-sheet-handle: #D8D8DC;

  /* ---- text and icons (Android §1.2) ---- */
  --wuv-text: #3A4251;            /* wuv_text_primary / veryDarkGrayishBlue */
  --wuv-text-2: #5F5F5F;          /* wuv_text_secondary */
  --wuv-text-muted: #6B6B72;      /* WEB: Android's wuv_pos_text_muted #8E8E8E measures 3.28:1 on white; the panel's text-3 #6B6B72 holds 4.5:1. Body of empty states, secondary lines, relative dates */
  --wuv-text-faint: #B4B4BC;      /* wuv_text_faint: GLYPH TINT ONLY (empty-state disc icon); never text on the web — 2.06:1 */
  --wuv-icon: #3A4251;            /* wuv_icon */
  --wuv-on-accent: #FFFFFF;       /* literal white on red: not themed */

  /* ---- the reds (Android §1.3) ---- */
  --wuv-accent: #DF1B28;          /* colorAccent: the ONE action red */
  --wuv-accent-hover: #C41622;    /* WEB (panel DESIGN.md): hover of the primary pill */
  --wuv-accent-disabled: rgba(223, 27, 40, .5);
  --wuv-chrome: #DF1B28;          /* WEB: navbar/footer chrome. Android app bars use #E63D44; the panel
                                     uses #DF1B28 so that light mode has one red — the web follows the panel */
  --wuv-chrome-text: #FFFFFF;
  --wuv-chrome-cta-bg: #FFFFFF;   /* wuv_chrome_cta_bg: pill sitting ON the chrome */
  --wuv-chrome-cta-text: #DF1B28;
  --wuv-error-text: #DF1B28;      /* wuv_error_text: inline field errors */
  --wuv-accent-text: #DF1B28;     /* WEB: the accent used as TEXT on a surface (bar action label, links in red); splits from the fill in dark mode, where #B13F45 on #1E1E1E measures 2.91:1 */
  --wuv-accent-soft: #FCEBEC;     /* wuv_accent_soft_bg: selection tint, checked chips */
  --wuv-accent-soft-stroke: #F3C6CA;
  --wuv-accent-soft-text: #A32D2D;/* wuv_picker_selected_text */
  --wuv-chip-checked-text: #B02A37;
  --wuv-badge-soft: #FCEDEE;

  /* ---- semantic triples (Android §1.4) ---- */
  --wuv-success-bg: #E4F7EF;  --wuv-success-text: #1B7A54;  --wuv-success-border: #A7E3CC;
  --wuv-warning-bg: #FFF4D6;  --wuv-warning-text: #7A5F00;  --wuv-warning-border: #EAD27A; /* WEB: text darkened from Android's #8A6D00 (4.49:1) to the panel's #7A5F00 */
  --wuv-danger-bg: #FCEDEE;   --wuv-danger-text: #B8141F;   --wuv-danger-border: #F2C7C9; /* WEB: Android uses colorAccent on this tint (4.27:1); the panel's #B8141F passes */
  --wuv-info-bg: #E9F1FB;     --wuv-info-text: #1565C0;     --wuv-info-border: #C3D8F2;
  --wuv-notice-bg: #E8F1F8;   --wuv-notice-text: #1F5F8B;   --wuv-notice-border: #BCD8E9;
  --wuv-danger-fill: #B8141F; --wuv-danger-fill-hover: #9E111A; --wuv-on-danger: #FFFFFF; /* WEB (round 2): the solid fill of a destructive confirm, 6.6:1 with white */
  --wuv-earning: #0F6E56;         /* wuv_earning_green */
  --wuv-quota-ok: #1D9E75;        /* wuv_quota_ok */
  --wuv-quota-warn: #EF9F27;      /* wuv_quota_warn */
  --wuv-price: #FED250;           /* yellow (legacy, alive): price tag / pending */
  --wuv-price-text: #111111;

  /* ---- chips (Android §1.4, §4.3) ---- */
  --wuv-category-bg: #EEEDFE;   --wuv-category-text: #3C3489;   /* violet: categories only */
  --wuv-chip-neutral-bg: #E9E9EE; --wuv-chip-neutral-text: #3A4251;
  --wuv-chip-off-bg: #F5F5F7;   --wuv-chip-off-stroke: #ECECEC;

  /* ---- user-type labels (Android light values; dark twins are WEB proposals — Android has none) ---- */
  --wuv-type-business-bg: #E5F1FF;    --wuv-type-business-text: #0062CC;
  --wuv-type-editor-bg: #FCEAEC;      --wuv-type-editor-text: #B02A37;
  --wuv-type-journalist-bg: #FFF4D6;  --wuv-type-journalist-text: #7A5F00; /* WEB: Android's #8A6D00 measures 4.49:1; the panel's #7A5F00 passes */
  --wuv-type-institution-bg: #E9ECF1; --wuv-type-institution-text: #34475E;
  --wuv-type-delegate-bg: #E6F0EE;    --wuv-type-delegate-text: #3E5B55; /* WEB (round 2): Android's #ECEEF0/#565C63 read as the institution's grey; a teal grey keeps the two apart (6.4:1) */

  /* ---- listing status (Android set, ListingStatus.java — the one that passed the contrast pass) ---- */
  --wuv-status-draft-bg: #9E9E9E;      --wuv-status-draft-text: #111111;
  --wuv-status-published-bg: #3CB97E;  --wuv-status-published-text: #0B3D28; /* WEB: Android draws white on this green (2.49:1); dark text measures 6.6:1 — to feed back to Android */
  --wuv-status-negotiation-bg: #FED250;--wuv-status-negotiation-text: #111111;
  --wuv-status-sold-bg: #C0E5F4;       --wuv-status-sold-text: #111111;
  --wuv-status-removed-bg: #DF1B28;    --wuv-status-removed-text: #FFFFFF; /* deleted / admin cancelled / reported */
  --wuv-status-expired-bg: #8A5296;    --wuv-status-expired-text: #FFFFFF; /* WEB: Android's #9F67A4 with white measures 4.24:1; darkened to pass 4.5:1 */

  /* ---- Selection (WEB, new): a hue absent from the platform so the section reads as another space.
          Default = "petrol"; the mockup round shows named alternatives. ---- */
  --wuv-selection: #0F5C6E;          /* fills (pills, band, overlays) with --wuv-selection-on */
  --wuv-selection-hover: #0B4959;
  --wuv-selection-text: #0F5C6E;     /* the same hue used as text or icon on a surface (the two split in dark mode) */
  --wuv-selection-soft: #E3F1F5;
  --wuv-selection-soft-text: #0B5468;
  --wuv-selection-soft-stroke: #B7D9E3;
  --wuv-selection-on: #FFFFFF;

  /* ---- Selection band (WEB, from mockup round 1): the "Selection chrome" under the red bar ---- */
  --wuv-selection-band: #0F5C6E;        /* solid hue in light; veiled in dark like the red chrome */
  --wuv-selection-band-text: #FFFFFF;
  --wuv-selection-band-cta-bg: #FFFFFF; /* pill sitting ON the band, as --wuv-chrome-cta-* */
  --wuv-selection-band-cta-text: #0F5C6E;
  --wuv-selection-band-rule: transparent; /* 3px top rule, needed only in dark where the veiled band is 1.35:1 against the page */

  /* ---- chrome details (WEB, from mockup round 1): white at strengths on the red bar; not themed ---- */
  --wuv-chrome-stroke: rgba(255, 255, 255, .72);   /* outline pill on the chrome */
  --wuv-chrome-hover: rgba(255, 255, 255, .14);    /* hover of links and icon buttons on the chrome */
  --wuv-chrome-divider: rgba(255, 255, 255, .22);
  --wuv-chrome-ring: rgba(255, 255, 255, .9);      /* focus ring on the chrome: the blue ring measures 1.2:1 on red */
  --wuv-scrim: rgba(17, 17, 17, .45);              /* backdrop of side panels and modals */
  --wuv-chrome-search-stroke: transparent;         /* edge of the search pill on the chrome; a field stroke in dark, where #262626 on #241A1B is 1.12:1 */

  /* ---- footer (WEB): chrome red in light, veiled chrome in dark ---- */
  --wuv-footer-bg: #DF1B28;
  --wuv-footer-text: #FFFFFF;
  --wuv-footer-muted: rgba(255, 255, 255, .86);
  --wuv-footer-hover: rgba(255, 255, 255, .14);
  --wuv-footer-rule: rgba(255, 255, 255, .55);
  --wuv-footer-border: transparent;

  /* ---- media overlays (WEB): on photos and videos, never themed (design-language §1.6) ---- */
  --wuv-media-on: #FFFFFF;
  --wuv-media-glyph: rgba(255, 255, 255, .30);
  --wuv-media-dim: rgba(17, 17, 17, .38);
  --wuv-media-fade: rgba(17, 17, 17, .66);

  /* ---- layout (WEB) ---- */
  --wuv-container: 1344px;              /* 1280 content + 2 × 32 gutters; Bootstrap's xl 1500 is not kept */
  --wuv-width-list: 1120px;             /* WEB (round 2, X24): personal lists (Acquisti, Vendite, Le mie …, Notifiche, legal text) */
  --wuv-width-form: 900px;              /* WEB (round 2, X24): forms and account pages (profile, wizard, transfer) */

  /* ---- skeletons (Android §7.1) ---- */
  --wuv-bone: #E4E4E8;
  --wuv-bone-strong: #D8D8DD;
  --wuv-shimmer: rgba(255, 255, 255, .6);

  /* ---- shadows (WEB reading of Android elevation; only on what floats) ---- */
  --wuv-shadow-card: 0 4px 14px rgba(28, 32, 40, .10), 0 1px 3px rgba(28, 32, 40, .06); /* board card, cardElevation 5dp */
  --wuv-shadow-float: 0 6px 20px rgba(28, 32, 40, .12), 0 1px 3px rgba(28, 32, 40, .08); /* menus, sheets, side panels */
  --wuv-shadow-bar: 0 4px 12px rgba(28, 32, 40, .14);                                     /* snackbar, elevation 6dp */
  --wuv-shadow-press: 0 1px 2px rgba(28, 32, 40, .10);                                    /* primary pill */

  /* ---- shape (Android §3.3: the four numbers) + web controls ---- */
  --wuv-r-pill: 22px;
  --wuv-r-card: 20px;
  --wuv-r-row: 12px;
  --wuv-r-bar: 14px;
  --wuv-r-control: 10px;          /* WEB (panel): text fields, selects, nav items */
  --wuv-r-chip: 999px;            /* Android chips are full pills */

  /* ---- sizes ---- */
  --wuv-h-button: 44px;           /* Android default button height */
  --wuv-h-button-compact: 44px;   /* compact pill: wrap content, 34px side padding */
  --wuv-h-field: 44px;            /* WEB: same height as buttons on touch; 40px allowed in dense desktop forms */
  --wuv-h-chip-filter: 40px;      /* WuvFilterChip */
  --wuv-h-chip-category: 30px;    /* WuvCategoryChip */
  --wuv-h-search: 46px;           /* board search bar */
  --wuv-h-navbar: 64px;           /* today's navbar height, kept */
  --wuv-card-pad: 12px;           /* board card content padding */
  --wuv-row-pad: 14px;            /* grouped row inner padding */
  --wuv-row-gap: 12px;            /* space between grouped rows */
  --wuv-gutter: 16px;             /* phone side gutter */
  --wuv-empty-disc: 84px;         /* empty/error state disc (ADR-015) */
  --wuv-empty-glyph: 36px;

  /* ---- typography (Quicksand on both platforms; Android scale 11–16, hero 17–24) ---- */
  --wuv-font: 'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wuv-fs-11: .6875rem; --wuv-fs-12: .75rem; --wuv-fs-13: .8125rem; --wuv-fs-14: .875rem;
  --wuv-fs-15: .9375rem; --wuv-fs-16: 1rem;  --wuv-fs-17: 1.0625rem; --wuv-fs-20: 1.25rem;
  --wuv-fs-22: 1.375rem; --wuv-fs-24: 1.5rem; --wuv-fs-28: 1.75rem;
  --wuv-lh: 1.5;
  --wuv-lh-tight: 1.25;

  /* ---- motion (Android §7) ---- */
  --wuv-skeleton-delay: 120ms;    /* show bones only after this */
  --wuv-skeleton-min: 400ms;      /* keep them at least this long */
  --wuv-skeleton-exit: 300ms;     /* fade out */
  --wuv-shimmer-period: 1400ms;
  --wuv-ease: cubic-bezier(.2, 0, 0, 1);
}

/* ---- dark twins (Android values-night; WEB proposals where Android has none) ----
   The same block appears twice: once for [data-theme="dark"], once for [data-theme="system"] under
   prefers-color-scheme: dark. Keep the two in step. */
[data-theme="dark"] {
  --wuv-window: #121212; --wuv-canvas: #121212; --wuv-surface: #1E1E1E; --wuv-surface-2: #262626;
  --wuv-field: #1E1E1E; --wuv-field-stroke: #6E6E74; --wuv-field-stroke-focus: #6FA8E8;
  --wuv-search: #262626; --wuv-circle: #262626; --wuv-divider: #2E2E2E; --wuv-stroke-strong: #3A3A3E;
  --wuv-sheet-handle: #4A4A50;
  --wuv-text: #ECECEC; --wuv-text-2: #A0A0A0; --wuv-text-muted: #A8AAB0; --wuv-text-faint: #B8BAC0; --wuv-icon: #DADADA;
  --wuv-accent: #B13F45; --wuv-accent-hover: #C24C52; --wuv-accent-disabled: rgba(177, 63, 69, .5);
  --wuv-chrome: #241A1B; --wuv-chrome-cta-bg: #B13F45; --wuv-chrome-cta-text: #FFFFFF; --wuv-error-text: #E57373; --wuv-accent-text: #E57373;
  --wuv-accent-soft: #2E2023; --wuv-accent-soft-stroke: #4A3236; --wuv-accent-soft-text: #E08A8F; --wuv-chip-checked-text: #E08A8F; --wuv-badge-soft: #3A2426;
  --wuv-success-bg: #173226; --wuv-success-text: #7CD7AC; --wuv-success-border: #265C44;
  --wuv-warning-bg: #3A3012; --wuv-warning-text: #EAD27A; --wuv-warning-border: #5A4A1A;
  --wuv-danger-bg: #3A2426; --wuv-danger-text: #E08A8F; --wuv-danger-border: #5A3134;
  --wuv-info-bg: #23303F; --wuv-info-text: #6FA8E8; --wuv-info-border: #34506A;
  --wuv-notice-bg: #16262F; --wuv-notice-text: #8FC0E0; --wuv-notice-border: #2C4A5C;
  --wuv-danger-fill: #A3333A; --wuv-danger-fill-hover: #8E2C32; --wuv-on-danger: #FFFFFF;
  --wuv-earning: #58C79A; --wuv-price: #7A6320; --wuv-price-text: #F4E7B8;
  --wuv-category-bg: #2F2B4E; --wuv-category-text: #C7C1F2;
  --wuv-chip-neutral-bg: #2A2A2E; --wuv-chip-neutral-text: #ECECEC; --wuv-chip-off-bg: #26262A; --wuv-chip-off-stroke: #3A3A40;
  --wuv-type-business-bg: #1B2E44; --wuv-type-business-text: #8FC0F0;
  --wuv-type-editor-bg: #3A2426; --wuv-type-editor-text: #E08A8F;
  --wuv-type-journalist-bg: #3A3012; --wuv-type-journalist-text: #EAD27A;
  --wuv-type-institution-bg: #262C36; --wuv-type-institution-text: #B7C4D6;
  --wuv-type-delegate-bg: #22302D; --wuv-type-delegate-text: #A9C9C1;
  --wuv-status-sold-bg: #23303F; --wuv-status-sold-text: #C0E5F4;
  --wuv-status-negotiation-bg: #7A6320; --wuv-status-negotiation-text: #F4E7B8;
  --wuv-status-draft-bg: #3A3A40; --wuv-status-draft-text: #ECECEC;
  --wuv-status-published-bg: #1F6B4A; --wuv-status-published-text: #E4F7EF; --wuv-status-removed-bg: #8E2C32; --wuv-status-removed-text: #FCEDEE; --wuv-status-expired-bg: #5E3A66; --wuv-status-expired-text: #F1E6F4; /* round 2 (X18): every status has a dark twin */
  --wuv-selection: #1F7A90; --wuv-selection-hover: #186577; --wuv-selection-text: #6BBBD0; --wuv-selection-soft: #12303A; --wuv-selection-soft-text: #7FC4D8; --wuv-selection-soft-stroke: #1E4C5A;
  --wuv-bone: #2E2E33; --wuv-bone-strong: #3A3A40; --wuv-shimmer: rgba(255, 255, 255, .09);
  --wuv-shadow-card: 0 4px 14px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35);
  --wuv-shadow-float: 0 6px 20px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
  --wuv-shadow-bar: 0 4px 12px rgba(0, 0, 0, .5);
  --wuv-shadow-press: 0 1px 2px rgba(0, 0, 0, .4);
  --wuv-selection-band: #12303A; --wuv-selection-band-text: #ECECEC; --wuv-selection-band-cta-bg: #1F7A90; --wuv-selection-band-cta-text: #FFFFFF; --wuv-selection-band-rule: #1F7A90;
  --wuv-scrim: rgba(0, 0, 0, .62); --wuv-chrome-search-stroke: #3A3A3A;
  --wuv-footer-bg: #241A1B; --wuv-footer-text: #ECECEC; --wuv-footer-muted: #A0A0A0; --wuv-footer-hover: rgba(255, 255, 255, .08); --wuv-footer-rule: #3A3A3E; --wuv-footer-border: #2E2E2E;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --wuv-window: #121212; --wuv-canvas: #121212; --wuv-surface: #1E1E1E; --wuv-surface-2: #262626;
    --wuv-field: #1E1E1E; --wuv-field-stroke: #6E6E74; --wuv-field-stroke-focus: #6FA8E8;
    --wuv-search: #262626; --wuv-circle: #262626; --wuv-divider: #2E2E2E; --wuv-stroke-strong: #3A3A3E;
    --wuv-sheet-handle: #4A4A50;
    --wuv-text: #ECECEC; --wuv-text-2: #A0A0A0; --wuv-text-muted: #A8AAB0; --wuv-text-faint: #B8BAC0; --wuv-icon: #DADADA;
    --wuv-accent: #B13F45; --wuv-accent-hover: #C24C52; --wuv-accent-disabled: rgba(177, 63, 69, .5);
    --wuv-chrome: #241A1B; --wuv-chrome-cta-bg: #B13F45; --wuv-chrome-cta-text: #FFFFFF; --wuv-error-text: #E57373; --wuv-accent-text: #E57373;
    --wuv-accent-soft: #2E2023; --wuv-accent-soft-stroke: #4A3236; --wuv-accent-soft-text: #E08A8F; --wuv-chip-checked-text: #E08A8F; --wuv-badge-soft: #3A2426;
    --wuv-success-bg: #173226; --wuv-success-text: #7CD7AC; --wuv-success-border: #265C44;
    --wuv-warning-bg: #3A3012; --wuv-warning-text: #EAD27A; --wuv-warning-border: #5A4A1A;
    --wuv-danger-bg: #3A2426; --wuv-danger-text: #E08A8F; --wuv-danger-border: #5A3134;
    --wuv-info-bg: #23303F; --wuv-info-text: #6FA8E8; --wuv-info-border: #34506A;
    --wuv-notice-bg: #16262F; --wuv-notice-text: #8FC0E0; --wuv-notice-border: #2C4A5C;
  --wuv-danger-fill: #A3333A; --wuv-danger-fill-hover: #8E2C32; --wuv-on-danger: #FFFFFF;
    --wuv-earning: #58C79A; --wuv-price: #7A6320; --wuv-price-text: #F4E7B8;
    --wuv-category-bg: #2F2B4E; --wuv-category-text: #C7C1F2;
    --wuv-chip-neutral-bg: #2A2A2E; --wuv-chip-neutral-text: #ECECEC; --wuv-chip-off-bg: #26262A; --wuv-chip-off-stroke: #3A3A40;
    --wuv-type-business-bg: #1B2E44; --wuv-type-business-text: #8FC0F0;
    --wuv-type-editor-bg: #3A2426; --wuv-type-editor-text: #E08A8F;
    --wuv-type-journalist-bg: #3A3012; --wuv-type-journalist-text: #EAD27A;
    --wuv-type-institution-bg: #262C36; --wuv-type-institution-text: #B7C4D6;
    --wuv-type-delegate-bg: #22302D; --wuv-type-delegate-text: #A9C9C1;
    --wuv-status-sold-bg: #23303F; --wuv-status-sold-text: #C0E5F4;
    --wuv-status-negotiation-bg: #7A6320; --wuv-status-negotiation-text: #F4E7B8;
    --wuv-status-draft-bg: #3A3A40; --wuv-status-draft-text: #ECECEC;
  --wuv-status-published-bg: #1F6B4A; --wuv-status-published-text: #E4F7EF; --wuv-status-removed-bg: #8E2C32; --wuv-status-removed-text: #FCEDEE; --wuv-status-expired-bg: #5E3A66; --wuv-status-expired-text: #F1E6F4; /* round 2 (X18): every status has a dark twin */
    --wuv-selection: #1F7A90; --wuv-selection-hover: #186577; --wuv-selection-text: #6BBBD0; /* dark hover goes DARKER: a lighter hover (#2A8DA5) measured 3.85:1 with white */ --wuv-selection-soft: #12303A; --wuv-selection-soft-text: #7FC4D8; --wuv-selection-soft-stroke: #1E4C5A;
    --wuv-bone: #2E2E33; --wuv-bone-strong: #3A3A40; --wuv-shimmer: rgba(255, 255, 255, .09);
    --wuv-shadow-card: 0 4px 14px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35);
    --wuv-shadow-float: 0 6px 20px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
    --wuv-shadow-bar: 0 4px 12px rgba(0, 0, 0, .5);
    --wuv-shadow-press: 0 1px 2px rgba(0, 0, 0, .4);
    --wuv-selection-band: #12303A; --wuv-selection-band-text: #ECECEC; --wuv-selection-band-cta-bg: #1F7A90; --wuv-selection-band-cta-text: #FFFFFF; --wuv-selection-band-rule: #1F7A90;
    --wuv-scrim: rgba(0, 0, 0, .62); --wuv-chrome-search-stroke: #3A3A3A;
    --wuv-footer-bg: #241A1B; --wuv-footer-text: #ECECEC; --wuv-footer-muted: #A0A0A0; --wuv-footer-hover: rgba(255, 255, 255, .08); --wuv-footer-rule: #3A3A3E; --wuv-footer-border: #2E2E2E;
    color-scheme: dark;
  }
}

/* =====================================================================================================
 * Base recipes — enough for the mockups to share one vocabulary. Class names are proposals.
 * ===================================================================================================== */

html { font-family: var(--wuv-font); font-size: 16px; }
body.wuv { margin: 0; background: var(--wuv-window); color: var(--wuv-text); font-size: var(--wuv-fs-14); line-height: var(--wuv-lh); -webkit-font-smoothing: antialiased; }
body.wuv.wuv-canvas { background: var(--wuv-canvas); }
.wuv *, .wuv *::before, .wuv *::after { box-sizing: border-box; }
:where(.wuv a) { color: inherit; } /* zero specificity on purpose: a pill written as a link keeps its own label colour (finding of the Selection mockup build, 2026-09-30) */
.wuv :focus-visible { outline: 2px solid var(--wuv-field-stroke-focus); outline-offset: 2px; }
.wuv-chrome :focus-visible, .wuv-footer :focus-visible { outline-color: var(--wuv-chrome-ring); } /* the blue ring is invisible on red */
.wuv-search:focus-within { box-shadow: 0 0 0 2px var(--wuv-field-stroke-focus); }              /* the input inside has no outline of its own */
.wuv-chrome .wuv-search:focus-within { box-shadow: 0 0 0 2px var(--wuv-chrome-ring); }

/* touch sizing (WEB): every control a finger can hit is at least 44px on a coarse pointer */
@media (pointer: coarse) {
  .wuv-pill, .wuv-pill-sm, .wuv-circle, .wuv-chip-filter, .wuv-bar-action, .wuv-seg > *, .wuv-icon-btn { min-height: 44px; min-width: 44px; }
  .wuv-pill-sm { padding: 0 18px; }
  .wuv-chip-category { min-height: 36px; } /* dense category chips: the tap target is the row, as on Android */
}

/* type roles (Android §2: screen/card title 16 bold, body 13 muted, caption 11–12 faint) */
.wuv-title { font-size: var(--wuv-fs-16); font-weight: 700; line-height: var(--wuv-lh-tight); color: var(--wuv-text); margin: 0; }
.wuv-hero { font-size: var(--wuv-fs-22); font-weight: 700; line-height: var(--wuv-lh-tight); color: var(--wuv-text); margin: 0; }
.wuv-body { font-size: var(--wuv-fs-13); color: var(--wuv-text-muted); line-height: 1.55; margin: 0; }
.wuv-caption { font-size: var(--wuv-fs-12); color: var(--wuv-text-muted); }
.wuv-label { font-size: var(--wuv-fs-11); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wuv-text-2); }
.wuv-name { font-weight: 500; color: var(--wuv-text); }

/* chrome: the red bar */
.wuv-chrome { background: var(--wuv-chrome); color: var(--wuv-chrome-text); height: var(--wuv-h-navbar); display: flex; align-items: center; padding: 0 var(--wuv-gutter); }
.wuv-chrome .wuv-pill.wuv-pill-on-chrome { background: var(--wuv-chrome-cta-bg); color: var(--wuv-chrome-cta-text); box-shadow: none; }

/* pills (Android §4.1, §4.2): 44px, 22px radius, bold uppercase; compact = wrap content + 34px sides */
.wuv-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--wuv-h-button); padding: 0 34px; border-radius: var(--wuv-r-pill); border: 1px solid transparent; font: 700 var(--wuv-fs-14)/1 var(--wuv-font); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .15s var(--wuv-ease), box-shadow .15s var(--wuv-ease); white-space: nowrap; }
.wuv-pill-primary { background: var(--wuv-accent); color: var(--wuv-on-accent); box-shadow: var(--wuv-shadow-press); }
.wuv-pill-primary:hover { background: var(--wuv-accent-hover); }
.wuv-pill-outline { background: var(--wuv-surface); color: var(--wuv-text); border-color: var(--wuv-stroke-strong); }
.wuv-pill-outline:hover { background: var(--wuv-surface-2); }
.wuv-pill-danger { background: var(--wuv-surface); color: var(--wuv-danger-text); border-color: var(--wuv-danger-border); }
.wuv-pill-selection { background: var(--wuv-selection); color: var(--wuv-selection-on); box-shadow: var(--wuv-shadow-press); }
.wuv-pill-selection:hover { background: var(--wuv-selection-hover); }
/* disabled (round 2, X27): a grey pill whose label keeps 4.6:1 (light) / 6.4:1 (dark), never a faded colour (white on a
   45 % red measured 2.2:1). Always with the reason beside it (tooltip on desktop, a line of text on the phone). */
.wuv-pill[disabled], .wuv-pill.is-disabled, .wuv-pill[aria-disabled="true"] { opacity: 1; background: var(--wuv-surface-2); border-color: var(--wuv-stroke-strong); color: var(--wuv-text-muted); box-shadow: none; pointer-events: none; cursor: default; }
.wuv-pill-destructive { background: var(--wuv-danger-fill); color: var(--wuv-on-danger); box-shadow: var(--wuv-shadow-press); } /* round 2 (X17): the confirm of a destructive dialog */
.wuv-pill-destructive:hover { background: var(--wuv-danger-fill-hover); }
.wuv-pill-block { width: 100%; }        /* full width only in forms and checkout (ADR-015) */
.wuv-pill-sm { height: 34px; padding: 0 18px; font-size: var(--wuv-fs-12); } /* WEB: dense desktop rows */

/* text fields (WEB reading of wuv_pos_field_*) */
.wuv-field { display: block; width: 100%; height: var(--wuv-h-field); padding: 0 14px; border-radius: var(--wuv-r-control); border: 1px solid var(--wuv-field-stroke); background: var(--wuv-field); color: var(--wuv-text); font: 500 var(--wuv-fs-14)/1 var(--wuv-font); }
.wuv-field:focus { outline: none; border-color: var(--wuv-field-stroke-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wuv-field-stroke-focus) 18%, transparent); }
/* one invalid style (round 2, X20): the 1 px error stroke + a soft ring, also while focused */
.wuv-field.is-invalid, .wuv-field[aria-invalid="true"] { border-color: var(--wuv-error-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wuv-error-text) 16%, transparent); }
/* locked and disabled (round 2, X20): one colour; [readonly] is a value you can read and copy, :disabled is off */
.wuv-field[readonly], .wuv-field:disabled { background: var(--wuv-surface-2); border-color: var(--wuv-divider); color: var(--wuv-text-2); box-shadow: none; }
.wuv-field:disabled { cursor: not-allowed; }
textarea.wuv-field { height: auto; min-height: 104px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.wuv-field-label { display: block; margin: 0 0 6px; font-size: var(--wuv-fs-12); font-weight: 700; color: var(--wuv-text-2); }
.wuv-field-error { display: flex; align-items: flex-start; gap: 5px; margin: 6px 0 0; font-size: var(--wuv-fs-12); line-height: 1.4; color: var(--wuv-error-text); } /* always with the error_outline glyph first */
.wuv-field-error .material-icons { flex: none; font-size: 16px; }
.wuv-field-help { margin: 6px 0 0; font-size: var(--wuv-fs-12); line-height: 1.45; color: var(--wuv-text-muted); }
.wuv-select { position: relative; }
.wuv-select select.wuv-field { -webkit-appearance: none; appearance: none; padding-right: 40px; line-height: 1.2; cursor: pointer; }
.wuv-select > .material-icons { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--wuv-text-2); pointer-events: none; } /* a caret on every select */

/* search bar (Android board: 46dp neutral pill, magnifier, filter circle) */
.wuv-search { display: flex; align-items: center; gap: 10px; height: var(--wuv-h-search); padding: 0 16px; border-radius: 999px; background: var(--wuv-search); color: var(--wuv-text-2); }
.wuv-search input { flex: 1; border: 0; background: transparent; color: var(--wuv-text); font: 500 var(--wuv-fs-14) var(--wuv-font); outline: none; min-width: 0; appearance: none; -webkit-appearance: none; }
.wuv-search 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 */
.wuv-chrome .wuv-search { border: 1px solid var(--wuv-chrome-search-stroke); }
.wuv-circle { width: 40px; height: 40px; border-radius: 50%; background: var(--wuv-circle); border: 1px solid var(--wuv-divider); display: inline-flex; align-items: center; justify-content: center; color: var(--wuv-icon); }

/* chips (Android §4.3) */
.wuv-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--wuv-r-chip); font-family: var(--wuv-font); white-space: nowrap; }
.wuv-chip-filter { height: var(--wuv-h-chip-filter); padding: 0 16px; font-size: var(--wuv-fs-14); background: var(--wuv-chip-off-bg); border: 1px solid var(--wuv-chip-off-stroke); color: var(--wuv-text); }
.wuv-chip-filter.is-checked { background: var(--wuv-accent-soft); border-color: var(--wuv-accent-soft-stroke); color: var(--wuv-chip-checked-text); }
.wuv-chip-category { height: var(--wuv-h-chip-category); padding: 0 10px; font-size: var(--wuv-fs-12); background: var(--wuv-category-bg); color: var(--wuv-category-text); }
.wuv-chip-neutral { height: 24px; padding: 0 9px; font-size: var(--wuv-fs-12); font-weight: 700; background: var(--wuv-chip-neutral-bg); color: var(--wuv-chip-neutral-text); }
.wuv-chip-selection { height: 24px; padding: 0 9px; font-size: var(--wuv-fs-12); font-weight: 700; background: var(--wuv-selection-soft); color: var(--wuv-selection-soft-text); border: 1px solid var(--wuv-selection-soft-stroke); }
.wuv-type { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; font-size: var(--wuv-fs-11); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.wuv-type-business { background: var(--wuv-type-business-bg); color: var(--wuv-type-business-text); }
.wuv-type-editor { background: var(--wuv-type-editor-bg); color: var(--wuv-type-editor-text); }
.wuv-type-journalist { background: var(--wuv-type-journalist-bg); color: var(--wuv-type-journalist-text); }
.wuv-type-institution { background: var(--wuv-type-institution-bg); color: var(--wuv-type-institution-text); }
.wuv-type-delegate { background: var(--wuv-type-delegate-bg); color: var(--wuv-type-delegate-text); }

/* board card (Android §3.1): 20px radius, real shadow, 16:9 cover reaching the corners, 12px padding,
   four corner overlays (format ↖, owner menu ↗, price ↙, status ↘), title, "city · country",
   faint relative date, hairline, seller row, 40px action row */
.wuv-card { background: var(--wuv-surface); border-radius: var(--wuv-r-card); box-shadow: var(--wuv-shadow-card); overflow: hidden; display: flex; flex-direction: column; }
.wuv-card-cover { position: relative; aspect-ratio: 16 / 9; background: var(--wuv-bone-strong) center / cover no-repeat; }
.wuv-card-cover .wuv-ov { position: absolute; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 999px; font-size: var(--wuv-fs-12); font-weight: 700; background: rgba(17, 17, 17, .62); color: #FFFFFF; }
.wuv-card-cover .wuv-ov-tl { top: 10px; left: 10px; }
.wuv-card-cover .wuv-ov-tr { top: 10px; right: 10px; }
.wuv-card-cover .wuv-ov-bl { bottom: 10px; left: 10px; background: var(--wuv-price); color: var(--wuv-price-text); }
.wuv-card-cover .wuv-ov-br { bottom: 10px; right: 10px; }
.wuv-card-cover .wuv-ov-selection { background: var(--wuv-selection); color: var(--wuv-selection-on); }
.wuv-card-body { padding: var(--wuv-card-pad); display: flex; flex-direction: column; gap: 4px; }
.wuv-card-place { font-size: var(--wuv-fs-13); color: var(--wuv-text-2); }
.wuv-card-date { font-size: var(--wuv-fs-11); color: var(--wuv-text-muted); } /* Android draws it in wuv_text_faint; on the web that fails 3:1, so muted */
.wuv-card-divider { height: 1px; background: var(--wuv-divider); margin: 8px 0; }
.wuv-card-seller { display: flex; align-items: center; gap: 8px; font-size: var(--wuv-fs-13); }
.wuv-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; margin-top: 6px; }
.wuv-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--wuv-search); flex: none; }

/* grouped rows (Android §3.2): flat, 12px radius, no shadow, on the grey canvas */
.wuv-rows { display: flex; flex-direction: column; gap: var(--wuv-row-gap); }
.wuv-row { background: var(--wuv-surface); border-radius: var(--wuv-r-row); padding: var(--wuv-row-pad); display: flex; align-items: center; gap: 12px; }
.wuv-row-group { background: var(--wuv-surface); border-radius: var(--wuv-r-row); overflow: hidden; }
.wuv-row-group .wuv-row { border-radius: 0; border-top: 1px solid var(--wuv-divider); }
.wuv-row-group .wuv-row:first-child { border-top: 0; }

/* empty and error state (ADR-015): 84px disc, 36px glyph, 16 bold title, 13 muted body, compact pill */
.wuv-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 32px; }
.wuv-empty-disc { width: var(--wuv-empty-disc); height: var(--wuv-empty-disc); border-radius: 50%; background: var(--wuv-search); display: flex; align-items: center; justify-content: center; color: var(--wuv-text-faint); }
.wuv-empty-disc .material-icons { font-size: var(--wuv-empty-glyph); }
.wuv-empty .wuv-title { margin-top: 16px; }
.wuv-empty .wuv-body { margin-top: 6px; max-width: 42ch; }
.wuv-empty .wuv-pill { margin-top: 18px; }

/* feedback (Android §6): modal for blocking errors, transient bar otherwise; badge + glyph grammar */
.wuv-bar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); min-width: 280px; max-width: min(560px, calc(100vw - 32px)); display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--wuv-r-bar); background: var(--wuv-surface); border: 1px solid var(--wuv-divider); box-shadow: var(--wuv-shadow-bar); color: var(--wuv-text); font-size: var(--wuv-fs-14); }
.wuv-badge { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--wuv-fs-15); flex: none; }
.wuv-badge-success { background: var(--wuv-success-bg); color: var(--wuv-success-text); }
.wuv-badge-info { background: var(--wuv-info-bg); color: var(--wuv-info-text); }
.wuv-badge-error { background: var(--wuv-danger-bg); color: var(--wuv-danger-text); }
.wuv-bar-action { margin-left: auto; font-size: var(--wuv-fs-13); font-weight: 700; text-transform: uppercase; color: var(--wuv-accent-text); background: none; border: 0; cursor: pointer; }
.wuv-notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--wuv-r-row); border: 1px solid var(--wuv-notice-border); background: var(--wuv-notice-bg); color: var(--wuv-text); font-size: var(--wuv-fs-13); }
.wuv-notice-success { background: var(--wuv-success-bg); border-color: var(--wuv-success-border); }
.wuv-notice-warning { background: var(--wuv-warning-bg); border-color: var(--wuv-warning-border); }
.wuv-notice-danger { background: var(--wuv-danger-bg); border-color: var(--wuv-danger-border); }

/* skeletons (Android §7): overlays, never fake rows; bones with a sweeping band */
.wuv-bone { background: var(--wuv-bone); border-radius: 7px; position: relative; overflow: hidden; }
.wuv-bone-strong { background: var(--wuv-bone-strong); border-radius: 6px; }
.wuv-bone-pill { border-radius: var(--wuv-r-pill); }
.wuv-skeleton { position: relative; overflow: hidden; border-radius: var(--wuv-r-card); }
.wuv-skeleton::after { content: ""; position: absolute; inset: 0; width: 55%; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--wuv-shimmer), transparent); animation: wuv-shimmer var(--wuv-shimmer-period) linear infinite; }
@keyframes wuv-shimmer { to { transform: translateX(285%); } }
@media (prefers-reduced-motion: reduce) { .wuv-skeleton::after { animation: none; } }

/* allowance meter (Selection, WEB new): quota ok / warn colours from Android */
.wuv-meter { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--wuv-text) 12%, transparent); overflow: hidden; } /* round 2: a track visible on any surface */
.wuv-meter > span { display: block; height: 100%; border-radius: 999px; background: var(--wuv-quota-ok); }
.wuv-meter.is-warn > span { background: var(--wuv-quota-warn); }
.wuv-meter.is-out > span { background: var(--wuv-accent); }

/* status pill (listing status, Android colours) */
.wuv-status { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: var(--wuv-fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.wuv-status-published { background: var(--wuv-status-published-bg); color: var(--wuv-status-published-text); }
.wuv-status-negotiation { background: var(--wuv-status-negotiation-bg); color: var(--wuv-status-negotiation-text); }
.wuv-status-sold { background: var(--wuv-status-sold-bg); color: var(--wuv-status-sold-text); }
.wuv-status-removed { background: var(--wuv-status-removed-bg); color: var(--wuv-status-removed-text); }
.wuv-status-expired { background: var(--wuv-status-expired-bg); color: var(--wuv-status-expired-text); }
.wuv-status-draft { background: var(--wuv-status-draft-bg); color: var(--wuv-status-draft-text); }

/* =====================================================================================================
 * Round 2 recipes (fix wave 2026-10-04, FIX-round2.md §3; the parts that draw them are documented in
 * ../2026-09-30-mockups-round1/pages/_src-marketplace/PARTS-round2.md). One recipe per thing, both themes.
 * ===================================================================================================== */

/* widths of the personal pages (X24): lists 1120, forms 900 */
.wuv-width-list, .wuv-width-form { width: 100%; margin-left: auto; margin-right: auto; }
.wuv-width-list { max-width: var(--wuv-width-list); }
.wuv-width-form { max-width: var(--wuv-width-form); }

/* feedback bar action: a 44 px target on the phone whatever the pointer */
@media (max-width: 991.98px) { .wuv-bar-action { min-height: 44px; min-width: 44px; padding: 0 6px; } }

/* status chip (X14, X18): sentence case, a glyph, a tint per tone; the words come from one table (statusChip()) */
.wuv-state { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 8px; border-radius: 999px; background: var(--wuv-chip-neutral-bg); color: var(--wuv-chip-neutral-text); font-size: var(--wuv-fs-12); font-weight: 700; line-height: 1; white-space: nowrap; }
.wuv-state .material-icons { font-size: 15px; }
.wuv-state.is-ok { background: var(--wuv-success-bg); color: var(--wuv-success-text); }
.wuv-state.is-wait { background: var(--wuv-warning-bg); color: var(--wuv-warning-text); }
.wuv-state.is-info { background: var(--wuv-info-bg); color: var(--wuv-info-text); }
.wuv-state.is-bad { background: var(--wuv-danger-bg); color: var(--wuv-danger-text); }
.wuv-state.is-nego { background: var(--wuv-status-negotiation-bg); color: var(--wuv-status-negotiation-text); }
.wuv-state.is-sold { background: var(--wuv-status-sold-bg); color: var(--wuv-status-sold-text); }

/* tabs (X19, X23): the account-tab look to switch lists; the segmented control stays for views and filter values.
   Phone: the row scrolls, the page script brings the active tab into view and the next label peeks. */
.wuv-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--wuv-divider); scrollbar-width: none; }
.wuv-tabs::-webkit-scrollbar { display: none; }
.wuv-tabs > [role="tab"], .wuv-tabs > a { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 12px; border: 0; background: none; color: var(--wuv-text-2); font: 600 var(--wuv-fs-14)/1 var(--wuv-font); white-space: nowrap; text-decoration: none; cursor: pointer; }
.wuv-tabs > [role="tab"]:hover, .wuv-tabs > a:hover { color: var(--wuv-text); }
.wuv-tabs > [aria-selected="true"], .wuv-tabs > [aria-current="page"] { color: var(--wuv-text); font-weight: 700; }
.wuv-tabs > [aria-selected="true"]::after, .wuv-tabs > [aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--wuv-accent); }
.wuv-tabs-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--wuv-chip-neutral-bg); color: var(--wuv-chip-neutral-text); font-size: var(--wuv-fs-11); font-weight: 700; }
[aria-selected="true"] > .wuv-tabs-n { background: var(--wuv-accent-soft); color: var(--wuv-chip-checked-text); }
@media (max-width: 991.98px) { .wuv-tabs { -webkit-mask-image: linear-gradient(90deg, black calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, black calc(100% - 24px), transparent); } }

/* confirm dialog (X17, X25): alertdialog, no ×, Escape = Annulla, focus on the safe action; destructive = solid fill */
.wuv-dialog { position: relative; width: 100%; max-width: 440px; border-radius: var(--wuv-r-card); background: var(--wuv-surface); color: var(--wuv-text); box-shadow: var(--wuv-shadow-float); }
.wuv-dialog-head { display: flex; align-items: center; gap: 12px; padding: 20px 20px 6px; }
.wuv-dialog-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--wuv-search); color: var(--wuv-icon); }
.wuv-dialog-ic .material-icons { font-size: 21px; }
.wuv-dialog.is-danger .wuv-dialog-ic { background: var(--wuv-danger-bg); color: var(--wuv-danger-text); }
.wuv-dialog-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--wuv-fs-17); font-weight: 700; line-height: 1.3; }
.wuv-dialog-body { padding: 4px 20px 18px; font-size: var(--wuv-fs-14); line-height: 1.55; color: var(--wuv-text-2); }
.wuv-dialog-body p { margin: 0; }
.wuv-dialog-body p + p { margin-top: 8px; }
.wuv-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--wuv-divider); }
.wuv-dialog-foot .wuv-pill { flex: 1 1 auto; padding: 0 16px; } /* phone: side by side when the two labels fit, stacked when they do not */
@media (min-width: 576px) { .wuv-dialog-foot .wuv-pill { flex: 0 0 auto; padding: 0 22px; } }
@media (min-width: 992px) { .wuv-dialog-foot .wuv-pill { height: 40px; } }

/* pager (X22): «‹ Precedente 1 2 3 … 12 Successiva ›» from 768 px, the numbers from 576 px, «‹ Pagina 1 di 12 ›» on the phone */
.wuv-pager { display: flex; align-items: center; justify-content: center; gap: 4px; }
.wuv-pager-b { min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--wuv-text); display: inline-flex; align-items: center; justify-content: center; gap: 4px; font: 600 var(--wuv-fs-14)/1 var(--wuv-font); text-decoration: none; cursor: pointer; }
.wuv-pager-b:hover { background: var(--wuv-surface-2); }
.wuv-pager-b[aria-current="page"] { background: var(--wuv-accent-soft); border-color: var(--wuv-accent-soft-stroke); color: var(--wuv-chip-checked-text); font-weight: 700; }
.wuv-pager-b[aria-disabled="true"] { color: var(--wuv-text-muted); pointer-events: none; cursor: default; }
.wuv-pager-gap { min-width: 20px; text-align: center; color: var(--wuv-text-muted); }
.wuv-pager-n, .wuv-pager-gap, .wuv-pager-word { display: none; }
.wuv-pager-txt { padding: 0 8px; font-size: var(--wuv-fs-13); color: var(--wuv-text-2); white-space: nowrap; }
.wuv-pager-txt b { color: var(--wuv-text); }
@media (min-width: 576px) { .wuv-pager-n, .wuv-pager-gap { display: inline-flex; align-items: center; justify-content: center; } .wuv-pager-txt { display: none; } }
@media (min-width: 768px) { .wuv-pager-word { display: inline; } }
@media (min-width: 992px) { .wuv-pager-b { min-width: 36px; height: 36px; } }

/* radio (X20): a real input drives the dot; the whole row is the 44 px target */
.wuv-radio { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--wuv-fs-14); color: var(--wuv-text); cursor: pointer; }
.wuv-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wuv-radio-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--wuv-field-stroke); background: var(--wuv-field); display: inline-flex; align-items: center; justify-content: center; }
.wuv-radio input:checked + .wuv-radio-dot { border-color: var(--wuv-accent); }
.wuv-radio input:checked + .wuv-radio-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--wuv-accent); }
.wuv-radio input:focus-visible + .wuv-radio-dot { outline: 2px solid var(--wuv-field-stroke-focus); outline-offset: 2px; }

/* file field (X20): the whole box opens the picker; filled, missing, wrong file */
.wuv-file-box { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border: 1px dashed var(--wuv-field-stroke); border-radius: var(--wuv-r-control); background: var(--wuv-field); cursor: pointer; }
.wuv-file-box:hover { background: var(--wuv-surface-2); }
.wuv-file-box:focus-within { outline: 2px solid var(--wuv-field-stroke-focus); outline-offset: 2px; }
.wuv-file-box.is-filled { border-style: solid; }
.wuv-file.is-invalid .wuv-file-box { border: 1px solid var(--wuv-error-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wuv-error-text) 16%, transparent); }
.wuv-file-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--wuv-search); color: var(--wuv-icon); }
.wuv-file-box.is-filled .wuv-file-ic { background: var(--wuv-success-bg); color: var(--wuv-success-text); }
.wuv-file.is-invalid .wuv-file-ic { background: var(--wuv-danger-bg); color: var(--wuv-danger-text); }
.wuv-file-thumb { flex: none; width: 56px; height: 56px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--wuv-info-bg); color: var(--wuv-info-text); }
.wuv-file-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wuv-file-name { display: flex; min-width: 0; font-size: var(--wuv-fs-14); font-weight: 700; color: var(--wuv-text); white-space: nowrap; }
.wuv-file-name > span:first-child { overflow: hidden; text-overflow: ellipsis; }   /* middle ellipsis: the cut falls before the end that tells files apart */
.wuv-file-name > span + span { flex: none; }
.wuv-file-meta { font-size: var(--wuv-fs-12); color: var(--wuv-text-muted); }
.wuv-file-act { flex: none; font-size: var(--wuv-fs-13); font-weight: 700; color: var(--wuv-accent-text); }
.wuv-file-box input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* empty, error and outcome states (ADR-015) on a surface; only the positive outcome tints its disc */
.wuv-empty.is-surface { border-radius: var(--wuv-r-row); background: var(--wuv-surface); padding: 44px 24px 48px; }
.wuv-empty.is-canvas { border-radius: var(--wuv-r-row); background: var(--wuv-canvas); padding: 44px 24px 48px; }
.wuv-empty-disc.is-success { background: var(--wuv-success-bg); color: var(--wuv-success-text); }
.wuv-empty-code { margin-top: 18px; }
.wuv-empty .wuv-empty-code + .wuv-title { margin-top: 6px; }
.wuv-empty-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin-top: 18px; }
.wuv-empty .wuv-empty-actions .wuv-pill { margin-top: 0; }
.wuv-empty-cap { display: flex; align-items: flex-start; gap: 6px; max-width: 60ch; margin-top: 16px; font-size: var(--wuv-fs-12); line-height: 1.5; color: var(--wuv-text-muted); text-align: left; }
.wuv-empty-cap .material-icons { flex: none; font-size: 16px; color: var(--wuv-text-2); }

/* controls that sit on the grey canvas keep their edge (X29) */
:is(.wuv-canvas, .on-canvas) .wuv-seg { background: var(--wuv-surface); box-shadow: inset 0 0 0 1px var(--wuv-stroke-strong); }
:is(.wuv-canvas, .on-canvas) .wuv-chip-filter:not(.is-checked) { background: var(--wuv-surface); border-color: var(--wuv-stroke-strong); }