/* a411mob:begin */
/* [SG-PATCH 2026-11-03 A411 | Felix] Kit 6 of the mobile sweep (Angelo's phone after kit 5). A file of its own; zz-mobile, -2, -3, -4
   and -5 are frozen. skin.helper.php links it after zz-mobile-5.css and before zz-mobile.css. No :has(). Every colour is the one the
   element already has; sizes are tokens or the values the same component already uses (named below). */

/* (S1) «N azioni/giorno» of a Reactions row keeps its speedometer under 1024px, beside «Attivo» (Angelo 03/11: «ci deve essere quel
   simbolino lì»). The module prints <span class="mdi mdi-speedometer"> (account-list.fragment.php); ai-support.css hid it at every
   width («caption muted, no glyph», sg2026 redesign), not R2. It gets the same treatment as the row counters beside it (ai-support.css:
   13px stroke glyph on currentColor through a mask), the glyph is Lucide «gauge», the family of those counters. To keep it on the
   line of «Attivo» at 360px (4-digit speeds included) the glyph sits --space-1 from its value and the room kept free for the row's
   kebab (R2: 42px) becomes the kebab's own width, --space-8 (the kebab is a 32px box at the right end of the row). */
@media (max-width: 1023.98px) {
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6):not(#sg-f7) #reactions-pro .aside-list-item .sub > .speed > .mdi:not(#sg-p0):not(#sg-p1) {
    display: inline-block; width: 13px; height: 13px; margin: 0 var(--space-1) 0 0 !important; vertical-align: -2px; font-size: 0 !important; line-height: 0; background: currentColor;
    --sg-speed-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 14 4-4'/%3E%3Cpath d='M3.34 19a10 10 0 1 1 17.32 0'/%3E%3C/svg%3E");
    -webkit-mask: var(--sg-speed-i) center/100% 100% no-repeat; mask: var(--sg-speed-i) center/100% 100% no-repeat;
  }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6):not(#sg-f7) #reactions-pro .aside-list-item .sub > .speed > .mdi:not(#sg-p0):not(#sg-p1)::before { content: none !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6):not(#sg-f7) #reactions-pro .aside-list-item .sub > .speed:not(#sg-p0):not(#sg-p1) { margin-right: var(--space-8) !important; }
}

/* (S2) The Headway dot (topbar.fragment.php, A411): ours, static, with its own id and classes (#sg-hw-dot > .sg-hw-dot-n; kit 6 v2, V6-4:
   Headway's own #HW_badge_cont / #HW_badge must stay unique). Its look is the one Headway's badge has, restated value for value from
   the rules that draw that badge: core.css #HW_badge_cont (absolute, top 14px) and #HW_badge (18px box); app.css:512 (gradient fill,
   --brand-on-primary, 700 13px/18px var(--f)) and app.css:4676 (top -2px, left 16px); the lines of Headway's injected sheet (display,
   round shape, centring). Headway's own badge, when the widget is loaded, stays hidden: its eyecatcher is off and the dot is ours. */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2) .toggleHeadway .headway-bell > .HW_badge_cont:not(#sg-p0) { display: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2) .toggleHeadway .headway-bell > .sg-hw-dot:not(#sg-p0) { display: block; position: absolute; top: 14px; width: var(--space-8); height: var(--space-8); visibility: visible; pointer-events: none; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2) .toggleHeadway .headway-bell > .sg-hw-dot > .sg-hw-dot-n:not(#sg-p0) {
  display: block; position: absolute; top: -2px; left: 16px; right: auto; bottom: auto; width: 18px; height: 18px; border-radius: var(--r-full); text-align: center; opacity: 1; transform: none;
  background: var(--sg-gradient-fill); color: var(--brand-on-primary); font: 700 13px/18px var(--f);
}

/* (S3) «Efficacia delle azioni» on the phone (Angelo 03/11, 412px: FOLLOWER with its number beside it, LIKE without a label, the heart
   and 352 alone on a line, short dividers, «502,9Like / 100»). The card layout of the module and of ai-support.css depends on a viewport
   media query, a container query and td:nth-child() indexes; on the dev at 280-780px it renders right, on Angelo's phone it did not.
   Under 768px this block lays the card out by itself, from the cells' own data-label and nothing else:
   - each metric cell (td[data-label]) is a column: label above, value below, centred in a third of the card; one divider under the
     three, full width (no gap between the cells, so the line is continuous);
   - the action cell (first) and the «Ogni 100 azioni» cell (last) span the card;
   - the two rates are two cells side by side, follower first as in the desktop table; in each, the icon spans two lines, the number is
     on the first and the unit («Follower / 100») on the second, so a number never touches its unit.
   Colours, font sizes and the chips' fill stay the module's. */
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table:not(#sg-p0):not(#sg-p1) { display: block !important; width: 100% !important; min-width: 0 !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table > thead:not(#sg-p0):not(#sg-p1) { display: none !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table > tbody:not(#sg-p0):not(#sg-p1) { display: block !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table > tbody > tr:not(#sg-p0):not(#sg-p1) {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-flow: row !important; column-gap: 0 !important; row-gap: 0 !important; align-items: stretch !important;
  }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table > tbody > tr > td:not(#sg-p0):not(#sg-p1) {
    float: none !important; position: static !important; width: auto !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important;
  }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table > tbody > tr > td:first-child:not(#sg-p0):not(#sg-p1),
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table > tbody > tr > td:last-child:not(#sg-p0):not(#sg-p1) { grid-column: 1 / -1 !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table > tbody > tr > td[data-label]:not(#sg-p0):not(#sg-p1) {
    grid-column: auto !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important;
    gap: var(--space-1) !important; padding: var(--space-2) var(--space-1) var(--space-3) !important; text-align: center !important;
    border: 0 !important; border-bottom: 1px solid var(--border) !important;
  }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table > tbody > tr > td[data-label]:not(#sg-p0):not(#sg-p1)::before {
    content: attr(data-label) !important; display: block !important; order: 0 !important; margin: 0 !important; max-width: 100%;
  }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table > tbody > tr > td[data-label] > *:not(#sg-p0):not(#sg-p1) {
    order: 1 !important; position: static !important; float: none !important; margin: 0 !important; max-width: 100%; white-space: nowrap;
  }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table .rp-stats-effectiveness-outcome:not(#sg-p0):not(#sg-p1) { display: inline-flex !important; align-items: center !important; gap: var(--space-1) !important; }
  /* «Ogni 100 azioni» */
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table > tbody > tr > td:last-child:not(#sg-p0):not(#sg-p1) { display: block !important; text-align: left !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table .rp-stats-effectiveness-mobile-label:not(#sg-p0):not(#sg-p1) { display: block !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table .rp-stats-effectiveness-rates:not(#sg-p0):not(#sg-p1) {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--space-2) !important; direction: ltr;
  }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table .rp-stats-effectiveness-rates > span:not(#sg-p0):not(#sg-p1) {
    display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-template-rows: auto auto !important; column-gap: var(--space-2) !important; row-gap: 0 !important;
    align-items: center !important; min-width: 0 !important; box-sizing: border-box !important; text-align: left !important;
  }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table .rp-stats-effectiveness-rates > .is-follow:not(#sg-p0):not(#sg-p1) { order: 1 !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table .rp-stats-effectiveness-rates > .is-like:not(#sg-p0):not(#sg-p1) { order: 2 !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table .rp-stats-effectiveness-rates > span > .mdi:not(#sg-p0):not(#sg-p1) { grid-column: 1 !important; grid-row: 1 / 3 !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table .rp-stats-effectiveness-rates > span > strong:not(#sg-p0):not(#sg-p1) { display: block !important; grid-column: 2 !important; grid-row: 1 !important; min-width: 0; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(#reactions-pro, .sgp-rp) .rp-stats-effectiveness-table .rp-stats-effectiveness-rates > span > small:not(#sg-p0):not(#sg-p1) { display: block !important; grid-column: 2 !important; grid-row: 2 !important; min-width: 0; margin: 0 !important; }
}
/* (A1, self-critique round) «Report dei target», the A.I. block: under 768px «Velocità stimata (azioni/giorno)» lost its line: the
   speedometer stood alone on a line and the label went under it (ai-support.css turns float off for every .react-stats-main-icon of the
   targets card, meant for the target rows, which are flex; this row is not). Here the row is a flex line again: glyph, label, value on
   the right as at 1280. Only this row: the span.clearfix right after the block's «A.I. Working..» label (stats.fragment.php:113-114).
   Kit 6 v2 (V6-1 of Vera): the v1 selector «span.clearfix > .react-stats-main-target» also took every target row
   (span.clearfix.react-stats-line, :225-226) and the «Total actions» row (:353); the adjacent-sibling anchor takes neither. */
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) #reactions-pro .rp-stats-targets-shell label.react-stats-title + span.clearfix:not(.react-stats-line) > .react-stats-main-target:not(#sg-p0):not(#sg-p1) {
    display: flex !important; align-items: center !important; column-gap: var(--space-1) !important; max-width: none !important;
  }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) #reactions-pro .rp-stats-targets-shell label.react-stats-title + span.clearfix:not(.react-stats-line) > .react-stats-main-target > .react-stats-main-icon:not(#sg-p0):not(#sg-p1) {
    display: inline-block !important; flex: none !important; width: auto !important; margin: 0 !important;
  }
}
/* [SG-PATCH 2026-11-05 A414 | Felix] Kit 8.
   (1) «Il ? Non funziona più» (Angelo, 05/11): on a touch screen the <span> beside a label's checkbox has a 44 px hit area in its ::after, painted over the «?» inside that span. Kit 7 left the
       «?» there (before, core.js moved it out of the span, by chance out from under that ::after), so the tap ticked the checkbox. The «?» goes above it, with a 44 px hit area of its own. skin/js/app.js opens it.
   (2) Vera K7-1: the old CSS bubble of core.js stays empty when Tippy has taken the title: no dark square under the tooltip.
   (3) «Qui inoltre si taglia quando non ci entra» (Angelo, 05/11): the ApexCharts tooltip of the statistics, one row per series at 37 px, ran past the card and was clipped, see-through and over
       the whole plot. On a phone or a touch screen it is a panel at the bottom of the chart: two columns, every series, opaque, over the legend and not over the plot, whatever day the finger is on.
       Over the panel a tap closes it (skin/js/app.js) instead of toggling a legend entry hidden under it. The x-axis date stays on one line. */
.tooltip.tippy.active:not([title])::before { display: none; }
@media (max-width: 767.98px), (pointer: coarse) {
  html:is([data-skin="sg26"],#sg-skin) body label span.tooltip.tippy { position: relative; z-index: 1; cursor: pointer; }
  html:is([data-skin="sg26"],#sg-skin) body label span.tooltip.tippy::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--space-10) + var(--space-1)); height: calc(var(--space-10) + var(--space-1)); transform: translate(-50%, -50%); }
}
@media (max-width: 559.98px), (hover: none) {
  html:is([data-skin="sg26"],#sg-skin) body #total-line-chart .apexcharts-tooltip { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2); white-space: normal; padding-bottom: var(--space-1); background: var(--surface-raised) !important; color: var(--text) !important; border: 1px solid var(--border-2) !important; border-radius: var(--r-md) !important; box-shadow: none !important; }
  html:is([data-skin="sg26"],#sg-skin) body #total-line-chart .apexcharts-tooltip.apexcharts-active { pointer-events: auto; }
  html:is([data-skin="sg26"],#sg-skin) body #total-line-chart .apexcharts-tooltip-title { grid-column: 1 / -1; margin: 0 0 var(--space-1) !important; padding: var(--space-1) var(--space-2) !important; background: var(--surface-raised) !important; border-bottom: 1px solid var(--border-2) !important; color: var(--text) !important; }
  html:is([data-skin="sg26"],#sg-skin) body #total-line-chart .apexcharts-tooltip-series-group { padding: 0 var(--space-2) !important; min-height: 0 !important; align-items: flex-start !important; color: var(--text) !important; }
  html:is([data-skin="sg26"],#sg-skin) body #total-line-chart .apexcharts-tooltip-marker { flex: none; width: var(--space-2) !important; height: var(--space-2) !important; margin: var(--space-1) var(--space-1) 0 0 !important; }
  html:is([data-skin="sg26"],#sg-skin) body #total-line-chart .apexcharts-tooltip-text { min-width: 0; line-height: 16px !important; }
  html:is([data-skin="sg26"],#sg-skin) body #total-line-chart .apexcharts-tooltip-y-group { padding: 0 0 var(--space-1) !important; white-space: normal; overflow-wrap: anywhere; }
  html:is([data-skin="sg26"],#sg-skin) body #total-line-chart .apexcharts-tooltip-text-y-value { margin-left: var(--space-1) !important; }
  html:is([data-skin="sg26"],#sg-skin) body #total-line-chart .apexcharts-xaxistooltip { white-space: nowrap !important; background: var(--surface-raised) !important; color: var(--text) !important; border-color: var(--border-2) !important; }
  html:is([data-skin="sg26"],#sg-skin) body #total-line-chart .apexcharts-xaxistooltip-bottom::after { border-bottom-color: var(--surface-raised) !important; }
  html:is([data-skin="sg26"],#sg-skin) body #total-line-chart .apexcharts-xaxistooltip-bottom::before { border-bottom-color: var(--border-2) !important; }
}
/* a411mob:end */