/* Ajustos (task I) + the grouped-list components of ui/list.js (ls-*), which the onboarding uses too.
   Tokens only. Quiet by design: the riso character lives in Avui's wheel; here only bands and dots. */

/* ============================================================ list.js */
.ls-group { display: grid; gap: var(--s-2); }
.ls-title {
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 720; letter-spacing: -.01em;
  color: var(--text); padding: 0 var(--s-1);
}
.ls-list {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface-2); border-radius: var(--r-lg); overflow: hidden;
}
.ls-list > li { position: relative; }
.ls-list > li + li::before {     /* hairline separator, inset like iOS */
  content: ""; position: absolute; top: 0; left: var(--s-4); right: 0; height: 1px; background: var(--line); z-index: 1;
}
.ls-row {
  appearance: none; border: 0; background: none; color: var(--text); font: inherit; text-align: left;
  width: 100%; min-height: 52px; padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
}
.ls-tap { cursor: pointer; transition: background var(--t-fast); }
.ls-tap:active { background: var(--surface-3); }
.ls-tap:focus-visible { outline-offset: -3px; border-radius: var(--r-lg); }
.ls-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ls-label { font-size: var(--fs-md); line-height: 1.3; overflow-wrap: break-word; }
.ls-hint { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.3; }
.ls-value { flex: 0 1 auto; min-width: 0; text-align: right; color: var(--text-2); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
/* label + value: words are never cut. The label keeps at least its longest word; when both do not
   fit on one line the value (and its chevron) drops below, right-aligned, as iOS does with large text */
.ls-end { flex: 0 1 auto; min-width: 0; margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-3); }
.ls-end:empty { display: none; }
.ls-row.has-value { flex-wrap: wrap; row-gap: 2px; }
.ls-row.has-value > .ls-text { flex: 1 1 0; min-width: min-content; }
.ls-chev { flex: none; display: inline-flex; color: var(--text-3); margin-right: calc(-1 * var(--s-1)); }
.ls-lead { flex: none; display: inline-flex; color: var(--ink); }
/* --danger is too dark on night paper (3:1): mixing 30 % ink lifts it in dark (5:1) and deepens it in light (6:1) */
.ls-row.danger .ls-label, .ls-row.danger .ls-lead { color: color-mix(in oklab, var(--danger) 70%, var(--ink)); }
.ls-foot { font-size: var(--fs-sm); color: var(--text-2); padding: 0 var(--s-4); line-height: 1.4; }
.ls-foot-stack { display: grid; gap: var(--s-2); }
.ls-foot-stack .st-error { line-height: 1.4; }
.ls-foot-line.warn { color: var(--menstrual-ink); }

/* switch row: reuses .toggle of components.css (native switch where available) */
.ls-toggle { cursor: pointer; }
.ls-toggle.disabled { opacity: .5; cursor: default; }
/* `@supports selector(input[switch])` is true in every browser (it only checks the syntax), so the
   native switch is detected in JS (list.js NATIVE_SWITCH) and the drawn track kept where it is missing */
.ls-toggle.no-switch input[switch] { position: absolute; opacity: 0; pointer-events: none; }
.ls-toggle.no-switch input[switch] + .track { display: block; }

/* stepper (UIStepper): two joined halves, 44 pt tall touch zone */
.ls-stepval { font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.ls-steps {
  flex: none; display: inline-flex; border-radius: var(--r-sm); background: var(--surface-3);
}
.ls-step {
  appearance: none; border: 0; background: none; color: var(--ink); cursor: pointer; position: relative;
  width: 46px; height: 34px; font-size: 1.3rem; font-weight: 500; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.ls-step::after { content: ""; position: absolute; inset: -5px 0; }
.ls-step + .ls-step { box-shadow: inset 1px 0 0 var(--line); }
.ls-step:active:not(:disabled) { background: color-mix(in oklab, var(--ink) 10%, transparent); border-radius: var(--r-sm); }
.ls-step:disabled { color: var(--text-3); opacity: .5; cursor: default; }

/* single choice with a check mark */
.ls-option .ls-check { flex: none; display: inline-flex; color: var(--accent); visibility: hidden; }
.ls-option[aria-checked="true"] .ls-check { visibility: visible; }

/* pushed page header: "‹ Ajustos" + inline title */
.ls-subhead { display: grid; gap: var(--s-2); justify-items: start; }
.ls-subhead h1 { font-size: var(--fs-xl); }
.ls-subtitle { color: var(--text-2); font-size: var(--fs-sm); }
.ls-back {
  appearance: none; border: 0; background: none; cursor: pointer;
  min-height: 44px; padding: 0 var(--s-3) 0 0; margin-left: calc(-1 * var(--s-2));
  display: inline-flex; align-items: center; gap: 0;
  color: var(--menstrual-ink); font-size: var(--fs-md); font-weight: 600;
}
.ls-back:active { opacity: .6; }

/* progress dots: past filled, now a long pink pill, future outline (the wheel's language) */
.ls-steps-dots { display: inline-flex; align-items: center; gap: 6px; }
.ls-steps-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ink) 45%, transparent);
  transition: width var(--t-med) var(--ease);
}
.ls-steps-dots i.done { background: var(--ink); box-shadow: none; }
.ls-steps-dots i.now { width: 22px; border-radius: var(--r-pill); background: var(--accent); box-shadow: none; }

/* colour dot of a tag: two passes, a little off register */
.ls-dot {
  width: 16px; height: 16px; border-radius: 50%; background: var(--dot);
  box-shadow: 2px 1.5px 0 color-mix(in oklab, var(--dot) 40%, transparent);
}

/* ============================================================ Ajustos pages */
.st-page { display: grid; gap: var(--s-6); align-content: start; }
.st-intro { color: var(--text-2); max-width: 62ch; }
.st-lead { max-width: 62ch; }

/* numbered steps: a real sequence (add to home screen) */
.st-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); counter-reset: st; }
.st-steps li { counter-increment: st; display: flex; align-items: center; gap: var(--s-3); line-height: 1.35; }
.st-steps li::before {
  content: counter(st); flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-sm);
  background: var(--accent); color: var(--menstrual-on);
}
.st-glyph { display: inline-flex; color: var(--ovulation-ink); }

/* notification preview: the real texts as ink bands */
.st-preview { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); width: 100%; }
.st-preview li {
  display: grid; gap: 2px; padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md); background: var(--tone-soft); box-shadow: inset 4px 0 0 var(--tone);
  font-size: var(--fs-sm); line-height: 1.35;
}
.st-preview-app { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-xs); font-weight: 650; color: var(--text-2); }

/* forms */
.st-field { display: grid; gap: var(--s-2); width: 100%; }
.st-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.st-input {
  width: 100%; min-height: 50px; padding: 0 var(--s-4);
  border: 0; border-radius: var(--r-md);
  background: var(--surface); color: var(--text);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ink) 18%, transparent);
  font: inherit; font-size: max(16px, 1rem);   /* < 16px makes iOS zoom in */
}
.st-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ovulation); }
.st-input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger); }
.st-input:disabled { opacity: .55; }
.st-help { font-size: var(--fs-sm); color: var(--text-2); }
.st-error { font-size: var(--fs-sm); color: color-mix(in oklab, var(--danger) 70%, var(--ink)); font-weight: 600; }
.st-error:empty, .st-file-name:empty, .st-progress:empty, .st-result:empty { display: none; }
.st-file { position: relative; cursor: pointer; }
.st-file:focus-within { outline: 3px solid var(--ovulation); outline-offset: 2px; }
.st-file-name { font-size: var(--fs-sm); color: var(--text-2); overflow-wrap: anywhere; }
.st-time {
  appearance: none; border: 0; background: var(--surface-3); color: var(--text);
  font: inherit; font-variant-numeric: tabular-nums; min-height: 36px; padding: 0 var(--s-3); border-radius: var(--r-sm);
}

/* import panel */
.st-import { display: grid; gap: var(--s-5); width: 100%; }
.st-howto { border-radius: var(--r-md); background: var(--surface-2); padding: 0 var(--s-4); }
.st-howto summary {
  min-height: 48px; display: flex; align-items: center; gap: var(--s-2); cursor: pointer;
  font-weight: 600; color: var(--menstrual-ink); list-style: none;
}
.st-howto summary::-webkit-details-marker { display: none; }
.st-howto summary::before {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--t-fast);
}
.st-howto[open] summary::before { transform: rotate(45deg); }
.st-howto ol { margin: 0; padding: 0 0 var(--s-4) var(--s-5); display: grid; gap: var(--s-2); line-height: 1.4; }
.st-progress { display: grid; gap: var(--s-2); color: var(--text-2); font-size: var(--fs-sm); }
.st-bar { width: 100%; height: 6px; accent-color: var(--accent); }
.st-result { display: grid; gap: var(--s-4); }
.st-done {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); border-radius: var(--r-lg);
  background: var(--surface-2); box-shadow: inset 4px 0 0 var(--ok);
}
.st-done-mark { flex: none; display: inline-flex; color: var(--ok); margin-top: 2px; }
.st-done h2 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.st-done ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.4; }

/* restore sheet */
.st-restore { display: grid; gap: var(--s-5); }
.st-choice { display: grid; gap: var(--s-2); }
.btn.st-danger-text { color: color-mix(in oklab, var(--danger) 70%, var(--ink)); }

/* categories: switch row + move buttons */
.st-cats > li { display: flex; align-items: center; }
.st-cat-label { flex: 1; min-width: 0; padding-right: var(--s-2); overflow-wrap: anywhere; hyphens: auto; }
.st-move { flex: none; display: inline-flex; padding-right: var(--s-1); }
/* cycles left out by the model itself: the switch shows it (on, locked), the date stays readable */
.ls-toggle.st-auto.disabled { opacity: 1; cursor: default; }
.ls-toggle.st-auto.disabled:not(.no-switch) input, .ls-toggle.st-auto.disabled .track { opacity: .45; }
.st-move button {
  appearance: none; border: 0; background: none; color: var(--ink); cursor: pointer;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm);
}
.st-move button svg { transform: rotate(90deg); }
.st-move button:active:not(:disabled) { background: var(--surface-3); }
.st-move button:disabled { color: var(--text-3); opacity: .35; cursor: default; }

/* tags */
.st-tags { display: grid; gap: var(--s-6); }
.st-tag-edit { display: grid; gap: var(--s-5); }
.st-colors { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.st-color {
  appearance: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%; background: var(--dot);
  box-shadow: 2px 2px 0 color-mix(in oklab, var(--dot) 40%, transparent);
  transition: box-shadow var(--t-fast);
}
.st-color[aria-checked="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5.5px var(--ink); }

/* about */
.st-about-head { display: flex; align-items: center; gap: var(--s-4); }
.st-about-head .mascot { flex: none; }
.st-prose { display: grid; gap: var(--s-2); max-width: 62ch; }
.st-prose h2 { font-size: var(--fs-lg); }
.st-prose p { line-height: 1.5; }

/* disabled buttons inside these pages (components.css has no :disabled look) */
.st-page .btn:disabled, .ob .btn:disabled { opacity: .38; cursor: default; transform: none; }
/* .btn sets display, which would beat the [hidden] attribute */
.st-page [hidden], .ob [hidden], .st-tag-edit [hidden] { display: none; }
/* rows that wrap a visually hidden file input show the keyboard focus on the row */
.ls-row:has(input[type="file"]:focus-visible) { outline: 3px solid var(--ovulation); outline-offset: -3px; border-radius: var(--r-lg); }