<script>
  import Header from '$lib/components/Header.svelte';
</script>

<Header />

<main class="container">
  <slot />
</main>

<style>
  :global(*, *::before, *::after) { box-sizing: border-box; }
  :global(html, body) { margin: 0; padding: 0; }
  :global(body) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: #1d2330;
    background: #fbf7f1;       /* warm cream — a slightly Central-Asian palette */
  }
  :global(a) { color: #006a4e; }
  :global(a:hover) { color: #00553e; }
  :global(h1) { font-size: 1.6rem; margin: 0 0 1rem; }
  :global(h2) { font-size: 1.2rem; margin: 1.5rem 0 0.75rem; }

  :global(table) {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  :global(th, td) {
    text-align: left;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #e5e8ee;
    font-size: 0.92rem;
  }
  :global(th) {
    background: #eef1f6;
    font-weight: 600;
    white-space: nowrap;
  }
  :global(tr:hover td) { background: #fafbfd; }
  :global(td.num, th.num) { text-align: right; font-variant-numeric: tabular-nums; }

  :global(form.stack) { display: grid; gap: 0.9rem; max-width: 640px; }
  :global(form.stack label) { display: grid; gap: 0.25rem; font-size: 0.9rem; }
  :global(form.stack .row) { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
  :global(input, select, textarea) {
    font: inherit;
    padding: 0.5rem 0.6rem;
    border: 1px solid #c8cfdc;
    border-radius: 4px;
    background: #fff;
    color: inherit;
  }
  :global(textarea) { min-height: 4.5rem; }
  :global(button) {
    font: inherit;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    background: #006a4e;
    color: #fff;
  }
  :global(button:hover) { background: #00553e; }
  :global(button.secondary) {
    background: #fff;
    color: #1d2330;
    border-color: #c8cfdc;
  }
  :global(button.secondary:hover) { background: #f0f2f6; }
  :global(button.danger) {
    background: #c8102e;
  }
  :global(button.danger:hover) { background: #a30d24; }
  :global(button:disabled) { opacity: 0.6; cursor: not-allowed; }

  :global(.card) {
    background: #fff;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }
  :global(.error) {
    background: #fdecea;
    border: 1px solid #f5c2c0;
    color: #8a1f1b;
    padding: 0.6rem 0.85rem;
    border-radius: 4px;
    margin-bottom: 1rem;
  }
  :global(.muted)  { color: #6b7388; }
  :global(.pill)   {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: #eef1f6;
    font-size: 0.8rem;
  }
  :global(.pill.low)  { background: #fde6e4; color: #8a1f1b; }

  .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
  }

  @keyframes -global-va-fade-out {
    from { opacity: 1; transform: scale(1);    filter: blur(0); }
    to   { opacity: 0; transform: scale(0.97); filter: blur(2px); }
  }
  @keyframes -global-va-wipe-in {
    from { clip-path: polygon(0% 0%, 0% 0%, 0% 0%); }
    to   { clip-path: polygon(0% 0%, 220% 0%, 0% 220%); }
  }
  :global(::view-transition-old(root)) {
    animation: va-fade-out 500ms cubic-bezier(0.4, 0, 1, 1) both;
    transform-origin: 50% 40%;
  }
  :global(::view-transition-new(root)) {
    animation: va-wipe-in 700ms cubic-bezier(0.76, 0, 0.24, 1) both;
    filter:
      drop-shadow(2px 2px 0 #006a4e)
      drop-shadow(10px 8px 26px rgba(0, 106, 78, 0.22));
  }
  @media (prefers-reduced-motion: reduce) {
    :global(::view-transition-old(root)),
    :global(::view-transition-new(root)) {
      animation: none;
      filter: none;
      clip-path: none;
    }
  }
</style>
