/* Global reset + app shell layout grid. Loaded on every page after tokens.css. */

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

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--text-primary);
  background: var(--surface-app-bg);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font-family: inherit;
}

a {
  color: var(--text-link);
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Directional glyphs (back/continue arrows) don't flip on their own under
   dir="rtl" — logical properties reposition elements, but an icon FONT
   GLYPH still points the way it was drawn. Mirror the ones this app uses
   for "back"/"forward" navigation so they still point the right way. */
:root[dir="rtl"] .fa-arrow-right,
:root[dir="rtl"] .fa-arrow-left {
  transform: scaleX(-1);
}

/* Shared "reveal" animation for progressively-disclosed UI (GuidedCard
   bodies, Step 1's conditionally-shown field rows, etc.) — plays whenever
   the element transitions from not-rendered/display:none into view, since
   CSS animations restart once an element re-enters the render tree. */
@keyframes slide-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Shell layout ---- */

.app-shell {
  min-height: 100vh;
}

.app-main {
  margin-inline-start: var(--sidebar-width-collapsed);
  padding-top: var(--header-height);
  min-height: 100vh;
  transition: margin-inline-start var(--transition-shell);
}

.app-shell.sidebar-expanded .app-main {
  margin-inline-start: var(--sidebar-width-expanded);
}

.app-page {
  padding: var(--space-6);
}

/* ---- Placeholder / "coming soon" state ---- */

.placeholder-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
  min-height: calc(100vh - var(--header-height) - var(--space-8));
  padding: var(--space-8);
}

.placeholder-state img {
  width: 220px;
  height: auto;
  margin-bottom: var(--space-2);
}

.placeholder-state h2 {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.placeholder-state p {
  margin: 0;
  max-width: 420px;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
}