/* Intelligence (task L): «El temps del teu cos» on Avui, «Els teus patrons» in Estadístiques and
   #/experiments. DESIGN v2: bands, not cards; two riso inks overprinted; the sentence carries the
   meaning and the small drawings only echo it. */

/* ================================================================ weather card (features/weather-card.js) */
.wx { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); min-width: 0; }
.wx > .section-title { font-size: var(--fs-lg); }

.wx-tomorrow {
  --sky: var(--surface-2);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  column-gap: var(--s-4); row-gap: var(--s-3);
  padding: var(--s-4) var(--s-5) var(--s-5) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--sky);
}
.wx-tomorrow[data-sky="sun"] { --sky: var(--follicular-soft); }
.wx-tomorrow[data-sky="partly"] { --sky: var(--surface-2); }
.wx-tomorrow[data-sky="cloud"], .wx-tomorrow[data-sky="wind"] { --sky: var(--luteal-soft); }
.wx-tomorrow[data-sky="rain"] { --sky: var(--ovulation-soft); }
.wx-tomorrow[data-sky="period"] { --sky: var(--menstrual-soft); }
.wx-big { display: flex; margin: calc(-1 * var(--s-1)) 0; }
.wx-main { display: grid; gap: 2px; min-width: 0; }
.wx-when { color: var(--text-2); font-size: var(--fs-sm); }
.wx-head { font-family: var(--font-display); font-weight: 750; font-size: var(--fs-xl); letter-spacing: -.02em; line-height: 1.05; text-wrap: balance; }
.wx-where { color: var(--text-2); font-size: var(--fs-sm); }
.wx-quiet { grid-column: 1 / -1; color: var(--text-2); font-size: var(--fs-sm); max-width: 46ch; }

/* chances: a pill whose ink fills as far as the probability goes (intensity = amount of ink) */
.wx-chances { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wx-chance {
  --c: var(--ink);
  display: inline-flex; align-items: baseline; gap: var(--s-2); max-width: 100%;
  min-height: 1.9em; padding: .3em .8em; border-radius: var(--r-pill);
  font-size: var(--fs-sm); line-height: 1.2;
  background:
    linear-gradient(to right, color-mix(in oklab, var(--c) 18%, transparent) calc(var(--p) * 100%), transparent 0),
    var(--bg);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--c) 30%, transparent);
}
.wx-chance.is-period { --c: var(--menstrual); color: var(--menstrual-ink); }
.wx-chance-label { font-weight: 600; overflow-wrap: anywhere; }
.wx-chance-p { font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.wx-chance.is-period .wx-chance-p { color: inherit; }

/* the next days, as in a weather report */
.wx-next { display: grid; gap: var(--s-2); }
.wx-next-title { font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); letter-spacing: 0; }
.wx-days {
  /* always one row, like a weather report; tiles shrink with large text instead of wrapping */
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-1);
  margin: 0; padding: 0; list-style: none;
}
.wx-day {
  display: grid; justify-items: center; align-content: start; gap: 2px;
  padding: var(--s-2) 0 var(--s-2);
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--surface-2) 70%, transparent);
  min-width: 0; padding-inline: 2px;
}
.wx-day .wx-glyph { width: min(36px, 100%); height: auto; }
.wx-day-name, .wx-day-val { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.wx-day-name { font-size: var(--fs-xs); color: var(--text-2); font-weight: 600; }
.wx-day-val { font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; min-height: 1.3em; text-align: center; }
.wx-day-period { color: var(--menstrual-ink); font-weight: 700; }
.wx-conf { color: var(--text-2); font-size: var(--fs-sm); display: flex; align-items: baseline; gap: var(--s-2); }
.wx-conf::before { content: ""; flex: none; width: 14px; height: 4px; border-radius: 2px; background: var(--ink); opacity: .35; translate: 0 -.2em; }
.wx-later { max-width: 46ch; }

/* glyphs: colour ink multiplied on the paper, key line 1 px off register */
.wx-glyph { flex: none; overflow: visible; }
.wx-ink { mix-blend-mode: multiply; }
.wx-rays, .wx-drops line, .wx-wind path { fill: none; stroke-width: 3; stroke-linecap: round; }
.wx-key { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; opacity: .85; }
@media (prefers-color-scheme: dark) {
  .wx-ink { mix-blend-mode: screen; }
  .wx-key { opacity: .7; }
}

/* ================================================================ patterns card (features/insights-ui.js) */
.ins-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); min-width: 0; container: ins / inline-size; }
.ins-card > .section-title { font-size: var(--fs-lg); }
.ins-intro, .ins-empty, .ins-note { color: var(--text-2); font-size: var(--fs-sm); max-width: 60ch; }
.ins-empty { color: var(--text); font-size: var(--fs-md); }
.ins-sub { font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 650; color: var(--text-2); letter-spacing: 0; margin-top: var(--s-2); }
.ins-list { display: grid; margin: 0; padding: 0; list-style: none; border-radius: var(--r-lg); background: var(--surface-2); }
.ins-item {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--s-4); align-items: start;
  padding: var(--s-4);
}
.ins-item + .ins-item { box-shadow: inset 0 1px 0 var(--line); }
.ins-art { padding-top: .35em; }
.ins-art svg { display: block; width: 100%; height: auto; }
.ins-text { display: grid; gap: 2px; min-width: 0; }
.ins-sentence { font-size: var(--fs-md); line-height: 1.35; font-weight: 550; text-wrap: pretty; }
.ins-support { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.35; }
.ins-conf { white-space: nowrap; }
.ins-conf::before { content: "("; }
.ins-conf::after { content: ")"; }
.ins-hint { color: var(--text-2); font-size: var(--fs-sm); font-style: italic; }
@container ins (width < 20rem) {
  .ins-item { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-2); }
  .ins-art { max-width: 5.5rem; padding-top: 0; }
}

/* the little drawings */
.ins-strip { height: .9rem; }
.ins-tick { fill: var(--tick); opacity: .45; }
.ins-tick.on { opacity: 1; }
.ins-bar { opacity: .9; }
.ins-pair-with { fill: var(--ink); }
.ins-pair-without { fill: var(--ink); opacity: .3; }

.ins-more {
  appearance: none; border: 0; background: none; cursor: pointer; justify-self: start;
  min-height: 44px; padding: 0 var(--s-1);
  color: var(--menstrual-ink); font-weight: 650; font-size: var(--fs-sm);
}
.ins-link {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 56px; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  border-radius: var(--r-lg); background: var(--surface-2);
  color: var(--ink); text-decoration: none;
  transition: transform var(--t-fast) var(--ease);
}
.ins-link:active { transform: scale(.98); }
.ins-link-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ins-link-label { font-weight: 650; }
.ins-link-hint { color: var(--text-2); font-size: var(--fs-sm); }
.ins-link-chev { flex: none; display: inline-flex; color: var(--text-3); }

/* ================================================================ #/experiments (views/experiments.js) */
.exp-intro { color: var(--text-2); max-width: 60ch; }
.exp-section { display: grid; gap: var(--s-2); }
.exp-section[hidden] { display: none; }
.exp-group { display: grid; gap: var(--s-3); }
.exp-empty { padding: 0 var(--s-4); }
.exp-honest { max-width: 60ch; }

.exp {
  display: grid; gap: var(--s-2);
  padding: var(--s-4) var(--s-5) var(--s-3);
  border-radius: var(--r-lg); background: var(--surface-2);
}
.exp.is-running { box-shadow: inset 4px 0 0 var(--luteal); background: var(--luteal-soft); }
.exp-name { font-size: var(--fs-lg); line-height: 1.15; text-wrap: balance; }
.exp-name:focus { outline: none; }
.exp-result { display: grid; gap: var(--s-1); margin-top: var(--s-1); }
.exp-verdict {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 750; letter-spacing: -.01em;
}
.exp-verdict::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; }
.exp-verdict.is-better { color: color-mix(in oklab, var(--ok) 75%, var(--ink)); }
.exp-verdict.is-better::before { background: var(--ok); }
.exp-verdict.is-worse { color: var(--menstrual-ink); }
.exp-verdict.is-worse::before { background: var(--menstrual); }
.exp-verdict.is-no_difference::before { box-shadow: inset 0 0 0 2.5px var(--text-2); }
.exp-verdict.is-not_enough { color: var(--text-2); }
.exp-verdict.is-not_enough::before { border: 2px dashed var(--text-3); }
.exp-verdict.is-wrong_order { color: var(--text-2); }
.exp-verdict.is-wrong_order::before { border-radius: 3px; box-shadow: inset 0 0 0 2.5px var(--luteal); }
.exp-compared, .exp-numbers { font-size: var(--fs-sm); }
.exp-numbers { color: var(--text-2); }

.exp-plot { width: 100%; max-width: 420px; height: auto; margin: var(--s-1) 0; overflow: visible; }
.exp-lane-label { fill: var(--text-2); font-size: 13px; font-family: var(--font-text); font-weight: 600; }
.exp-lane-line { stroke: var(--line); stroke-width: 1.5; }
.exp-axis { fill: var(--text-3); font-size: 11px; font-family: var(--font-text); }
.exp-dot { stroke-width: 1.6; }
.is-with .exp-dot { fill: var(--luteal); stroke: var(--bg); }          /* with: inked, like a past day on the wheel */
.is-without .exp-dot { fill: var(--bg); stroke: var(--text-2); }      /* without: outline */
.exp-mean { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.exp.is-running .is-with .exp-dot { stroke: var(--luteal-soft); }

.exp-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-1); }
.exp-delete.btn.ghost { color: color-mix(in oklab, var(--danger) 75%, var(--ink)); }

/* form */
.exp-form-wrap { display: grid; gap: var(--s-4); }
.exp-ideas { display: grid; gap: var(--s-2); }
.exp-ideas-title { color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }
.exp-idea-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.exp-idea {
  appearance: none; border: 0; cursor: pointer; text-align: left;
  min-height: 44px; padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--luteal) 55%, transparent);
  font-size: var(--fs-sm); font-weight: 550; line-height: 1.25;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast);
}
.exp-idea:active { transform: scale(.97); background: var(--luteal-soft); }
.exp-field { cursor: pointer; }
.exp-field > .ls-text { flex: 0 1 auto; max-width: 60%; }
.exp-select {
  appearance: none; -webkit-appearance: none; border: 0; background: none; cursor: pointer;
  flex: 1 1 0; min-width: 0; min-height: 44px; margin: calc(-1 * var(--s-2)) 0;
  font: inherit; font-size: var(--fs-md); color: var(--text-2); text-align: right; text-align-last: right;
  text-overflow: ellipsis;
}
.exp-select:focus-visible { outline: 3px solid var(--ovulation); outline-offset: 2px; border-radius: var(--r-xs); }
.exp-chev { flex: none; display: inline-flex; color: var(--text-3); rotate: 90deg; }
.exp-target { display: grid; gap: var(--s-2); }
.exp-target-label { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; padding: 0 var(--s-4); }
.exp-target .segmented button { min-height: 44px; padding: 0 var(--s-2); }
.exp-hint { padding: 0 var(--s-4); max-width: 60ch; }
.exp-order {
  display: grid; gap: var(--s-2); justify-items: start;
  margin: 0 var(--s-4); padding: var(--s-3);
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--luteal) 14%, var(--surface));
  border-inline-start: 3px solid var(--luteal);
}
.exp-order[hidden] { display: none; }
.exp-order-text { font-size: var(--fs-sm); max-width: 60ch; }
.exp-order .btn { min-height: 44px; }