/* Round 30 (owner rules 7au and 7av, 26 Sep 2026).
   7au: under a band word, a plain comparison counted out of 100 couples ("Warmer than 86 out of 100 couples").
   7av: under that sentence, a thin "where they sit" line of 100 couples (card C of
   reports/coszion/2026-09-26_two-charts-rank-wording): less on the left, more on the right, the Normal zone a
   slightly brighter middle labelled "most couples", a dot in the theme or group colour ringed with the page
   colour. Static (no animation), decoration only (aria-hidden): the words carry the meaning. */

.r30-say{display:block;font-size:15px;line-height:1.35;color:var(--ink);margin-top:2px;font-weight:400;letter-spacing:0}
.r27-answer .total>.r30-say{font-size:15px}
.meter-say{font-size:16px;margin:6px 0 0}

.r30-sit{display:block;margin-top:9px;--t:0px;font-size:12px;line-height:1.2;font-weight:400;letter-spacing:.01em;color:var(--muted);min-width:0;max-width:100%;text-align:left;container-type:inline-size;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.r30-sit.is-named{--t:17px}
.r30-sit-in{position:relative;display:block;height:calc(var(--t) + 36px)}
.r30-sit-in>span{position:absolute;display:block;margin:0;padding:0}
.r30-sit-base{left:0;right:0;top:calc(var(--t) + 11px);height:2px;border-radius:2px;background:color-mix(in srgb,var(--ink) 15%,transparent)}
.r30-sit-mid{left:calc(var(--lo) * 1%);width:calc((var(--hi) - var(--lo)) * 1%);top:calc(var(--t) + 9px);height:6px;border-radius:3px;background:color-mix(in srgb,var(--ink) 22%,transparent)}
.r30-sit-tied{left:0;width:calc(var(--tied) * 1%);top:calc(var(--t) + 9px);height:6px;border-radius:3px;background:color-mix(in srgb,var(--neutral) 30%,transparent)}
.r30-sit.warm .r30-sit-tied{background:color-mix(in srgb,var(--warm) 30%,transparent)}
.r30-sit.demand .r30-sit-tied{background:color-mix(in srgb,var(--demand) 30%,transparent)}
.r30-sit-in>.r30-sit-mid-label,.r30-sit-in>.r30-sit-end{font-size:12px;line-height:1.2}
.r30-sit-mid-label{left:calc(var(--lo) * 1%);width:calc((var(--hi) - var(--lo)) * 1%);top:calc(var(--t) + 19px);text-align:center;color:var(--muted);white-space:nowrap}
.r30-sit-end{top:calc(var(--t) + 19px);color:var(--muted);white-space:nowrap}
.r30-sit-end.l{left:0}
.r30-sit-end.r{right:0;text-align:right}
.r30-sit-dot{top:calc(var(--t) + 4px);left:clamp(8px,calc(var(--pos) * 1%),calc(100% - 8px));width:16px;height:16px;margin-left:-8px!important;border-radius:50%;border:3px solid var(--bg);box-sizing:border-box;background:var(--neutral)}
.r30-sit.warm .r30-sit-dot{background:var(--warm)}
.r30-sit.demand .r30-sit-dot{background:var(--demand)}
.r30-sit-in>.r30-sit-who{font-size:12px;line-height:1.2}
.r30-sit-who{top:0;font-size:12px;font-weight:500;white-space:nowrap;color:var(--warm);max-width:100%;overflow:hidden;text-overflow:ellipsis}
.r30-sit.demand .r30-sit-who{color:var(--demand)}
.r30-sit.neutral .r30-sit-who{color:var(--neutral)}
.r30-sit-who[data-side=mid]{left:calc(var(--pos) * 1%);transform:translateX(-50%)}
.r30-sit-who[data-side=start]{left:max(0px,calc(var(--pos) * 1% - 8px))}
.r30-sit-who[data-side=end]{right:max(0px,calc(100% - var(--pos) * 1% - 8px))}

/* A narrow line (the first screen's columns on a small phone): "most couples" moves to its own row under
   the line so it never runs into the end words ("more intense" is the longest).
   Round 31 (Astra P20): the labels are 12px now (were 10.5px and 11px), so the cut moves out: 190px for the
   short end words, 250px for Intensity's "calmer" / "more intense" (measured, see docs/r31/HANDBACK_w2.md). */
@container (max-width:190px){
 .r30-sit-in{height:calc(var(--t) + 50px)}
 .r30-sit-in>.r30-sit-mid-label{top:calc(var(--t) + 34px)}
}
@container (max-width:250px){
 .r30-sit.neutral .r30-sit-in{height:calc(var(--t) + 50px)}
 .r30-sit.neutral .r30-sit-in>.r30-sit-mid-label{top:calc(var(--t) + 34px)}
}

/* The theme list (List view): the comparison and the line sit under the name and word; the line takes
   the place of the rank bar once the reading has settled. */
.gauge .gauge-say{grid-column:2/-1;font-size:14px;line-height:1.35;color:var(--ink)}
.gauge .gauge-say:empty,.gauge .gauge-sit:empty{display:none}
.gauge .gauge-sit{grid-column:2/-1;display:block;min-width:0}
.gauge .gauge-sit .r30-sit{margin-top:4px}
.gauge.has-sit .gauge-bar{display:none}

/* The meanings fold (inside the List view): the line under each theme's word. */
.meter-row summary .r30-sit{grid-column:1/-1;width:100%}

/* Owner fix, 26 Sep: between phone and wide desktop the three group columns got too narrow for the line; stack them there. */
@media (min-width:701px) and (max-width:1100px){.r27-answer .totals{grid-template-columns:minmax(0,1fr);gap:14px}}