/* /shared/ui/ui.css
 *
 * ONLY what the shared widgets need: the stepper's structure, the save-state
 * line, the language switcher. Each app styles its own screens — this file is
 * not a design system and must not grow into one (shared-modules.md §4).
 *
 *   <link rel="stylesheet" href="/shared/ui/ui.css">   before the app's own sheet
 *
 * Everything below is overridable: colours come from custom properties, layout
 * is a couple of flex rules, and nothing uses !important except the one rule that
 * keeps a hidden stepper panel hidden. No font is loaded — the system stack is
 * what a rare user recognises (app-ux-guide.md §3).
 */

:root {
  --ui-gap: 0.75rem;
  --ui-radius: 6px;
  --ui-fg: inherit;
  --ui-muted: #4a4a4a;
  --ui-line: #c9c9c9;
  --ui-danger: #b3261e;        /* 6.5:1 on white */
  --ui-focus: #0b57d0;
  --ui-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ui-muted: #c6c6c6;
    --ui-line: #5a5a5a;
    --ui-danger: #ffb4ab;      /* the light-on-dark counterpart */
    --ui-focus: #a8c7fa;
  }
}

.ui-stepper,
.ui-savestate,
.ui-lang {
  font-family: var(--ui-font);
  color: var(--ui-fg);
}

/* Visible focus, everywhere, at the same bar as the admin UI (§7). */
.ui-btn:focus-visible,
.ui-stepper__title:focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 2px;
}

.ui-btn {
  font: inherit;
  padding: 0.5em 1em;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* Touch targets on a finger, per app-ux-guide.md §3. A media query, not JS, so
   plugging in a mouse or resizing the window keeps working. */
@media (pointer: coarse) {
  .ui-btn {
    min-height: 44px;
    min-width: 44px;
  }
  .ui-stepper__actions {
    gap: 1rem;
  }
}

/* ── language switcher ──────────────────────────────────────────────────── */

.ui-lang {
  display: inline-flex;
  gap: 0.25rem;
}

.ui-lang__button[aria-pressed="true"] {
  /* The state is carried by aria-pressed and by the weight, not by colour alone. */
  font-weight: 600;
  border-color: currentColor;
}

/* ── save-state line — app-data-guide.md Rule 6 ─────────────────────────── */

.ui-savestate {
  display: flex;
  align-items: center;
  gap: var(--ui-gap);
  margin: 0;
}

.ui-savestate__text {
  color: var(--ui-muted);
}

.ui-savestate[data-danger="true"] .ui-savestate__text,
.ui-savestate[data-danger="true"] .ui-savestate__icon {
  color: var(--ui-danger);
  font-weight: 600;
}

.ui-savestate__icon {
  /* A shape as well as a colour: no information carried by colour alone (§7). */
  font-size: 1.1em;
  line-height: 1;
}

/* ── stepper ────────────────────────────────────────────────────────────── */

.ui-stepper {
  display: block;
}

.ui-stepper__progress ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0 0 var(--ui-gap);
  padding: 0;
  list-style: none;
}

.ui-stepper__step {
  color: var(--ui-muted);
}

.ui-stepper__step[aria-current="step"] {
  color: inherit;
  font-weight: 600;
}

.ui-stepper__steplink {
  padding: 0.25em 0;
  border: 0;
  text-decoration: underline;
}

.ui-stepper__position {
  margin: 0;
  color: var(--ui-muted);
}

.ui-stepper__title {
  margin: 0.25rem 0 var(--ui-gap);
}

/* The two lines that make "back never loses anything" structural: a panel is
   built once and then hidden, never rebuilt. Nothing may make a hidden one
   visible again by setting display. */
.ui-stepper__panel[hidden] {
  display: none !important;
}

.ui-stepper__error {
  margin: var(--ui-gap) 0;
  color: var(--ui-danger);
  font-weight: 600;
}

.ui-stepper__error[hidden] {
  display: none;
}

.ui-stepper__actions {
  display: flex;
  gap: var(--ui-gap);
  align-items: center;
  margin-top: var(--ui-gap);
}

.ui-stepper__actions .ui-stepper__next {
  order: 2;             /* forward on the right in the reading order of both languages */
  font-weight: 600;
}

.ui-stepper__actions .ui-stepper__back {
  order: 1;
}

.ui-stepper__back[hidden] {
  display: none;
}

/* On a phone the primary action sits in thumb reach and is visible without
   scrolling. Apps that want a different placement override this block. */
@media (pointer: coarse) and (max-width: 720px) {
  .ui-stepper__actions {
    position: sticky;
    bottom: 0;
    padding: var(--ui-gap) 0;
    background: Canvas;
    border-top: 1px solid var(--ui-line);
  }
  .ui-stepper__actions .ui-stepper__next {
    flex: 1 1 auto;
  }
}

/* No animation anywhere in this file, so there is nothing for
   prefers-reduced-motion to switch off. Keep it that way. */

@media print {
  .ui-lang,
  .ui-stepper__actions,
  .ui-stepper__progress,
  .ui-savestate__save {
    display: none;
  }
  .ui-stepper__panel[hidden] {
    /* Printing shows the whole thing, not just the step that happens to be open. */
    display: block !important;
  }
}