/* ============================================================================
   @timeslider/styles - base.css
   ----------------------------------------------------------------------------
   Layer 2 of three. Reset, typography, focus. Uses the semantic layer only.

   NOTHING HERE IS GLOBAL, and that is deliberate. This file is loaded on every
   view - including the Identity, Billing and mobile pages that have not been
   migrated - so that the design tokens are available everywhere and the
   migration does not read as a weeks-long visual break. But those pages have
   their own stylesheets and their own box model: none of them sets a global
   `* { box-sizing: border-box }`, so declaring one here would silently re-lay-out
   pages this refactoring never touched.

   Everything is therefore scoped to `.ts-scope`, the class that opts a subtree
   into the design system. The Angular settings shell sets it on its host, the
   settings dialogs set it on their root; an MVC view that gets migrated sets it
   on the wrapper it wants restyled.
   ============================================================================ */

.ts-scope,
.ts-scope *,
.ts-scope *::before,
.ts-scope *::after {
  box-sizing: border-box;
}

.ts-scope {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================================
   .ts-legacy - eine NICHT migrierte Komponente, die innerhalb von .ts-scope
   gehostet wird, bekommt ihr eigenes Box-Modell und ihre eigene Typografie
   zurueck.

   Der Grund ist derselbe, aus dem oben nichts global gilt: die App laeuft auf
   `box-sizing: revert`, also content-box (app.component.scss), und ihre alten
   Komponenten rechnen damit - `height` und `padding` addieren sich dort. Der
   Reset oben trifft mit `.ts-scope *` aber ALLES im Teilbaum, auch eine
   eingebettete Altkomponente, und macht sie um ihr Padding flacher: der
   Schlagwort-Chip im tagGroupTree war in den Einstellungen 20px hoch statt 28px,
   weil `height: 20px` plus `padding: 4px 0` dort nicht mehr addiert wurde.
   `line-height: 1.5` verschiebt zusaetzlich jede Textzeile darin.

   Auf die gehostete Komponente gesetzt, sieht sie wieder genauso aus wie an
   ihrem eigenen Platz in der App - was der Sinn davon ist, dieselbe Komponente
   zu verwenden und keine zweite zu bauen. Die Farben bleiben unberuehrt: die
   kommen aus den --ts-* Variablen und sollen dem Theme folgen.

   Migrierte Komponenten bekommen die Klasse NICHT - fuer sie ist border-box
   richtig.
   ============================================================================ */
.ts-scope .ts-legacy,
.ts-scope .ts-legacy * {
  box-sizing: content-box;
  line-height: normal;
}

/* Visible focus, in the accent colour of the active theme. A keyboard user has to
   be able to see where they are; :focus-visible keeps the ring off mouse clicks. */
.ts-scope :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ts-scope h1,
.ts-scope h2,
.ts-scope h3,
.ts-scope h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ts-scope p {
  margin: 0;
}

.ts-scope button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

.ts-scope input,
.ts-scope select,
.ts-scope textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.ts-scope a {
  color: var(--accent-text);
}

/* Nothing in the design system animates for a reader who asked for less motion.
   Component transitions are all declared as `transition`, so one rule covers them. */
@media (prefers-reduced-motion: reduce) {
  .ts-scope *,
  .ts-scope *::before,
  .ts-scope *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}