/* =============================================================
   app.css: loaded after sqlpage.css and open-props.min.css
   (order set in www/shell.sql).

   Who owns what:
   - Colour, surfaces, text, borders → Tabler vars (--tblr-*), so
     SQLPage's dark mode (data-bs-theme on <body>) just works.
   - Spacing, radii, shadows, easing, font sizes, font weights
     → Open Props vars.
   Ref: https://open-props.style/
   Ref: https://docs.tabler.io/ui/getting-started/customize
   Uses native CSS nesting (`&`).
   Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting
   ============================================================= */

/* ---------- 1. Re-skin Tabler with Open Props tokens ----------
   The selector includes [data-bs-theme] so these overrides still apply
   when the shell sets a theme (SQLPage puts data-bs-theme on <body>). */
:root,
[data-bs-theme] {
  --tblr-border-radius: var(--radius-2);
  /* DM Sans is loaded by shell.sql; Open Props' system stack is the fallback. */
  --tblr-font-sans-serif: 'DM Sans', var(--font-sans);
  /* Brand green. Change both lines together.
     --green-10 is #237032 → 35, 112, 50 */
  --tblr-primary: var(--green-10);
  --tblr-primary-rgb: 35, 112, 50;
}

/* ---------- 2. Page frame ----------
   shell.sql sets layout 'fluid', which drops the 'boxed' layout's dark
   frame and body padding. This removes the rest of SQLPage's gap round
   <main>: Tabler's .page-body margins plus the px-md-5 / mt-3 utility
   classes on it. Bootstrap utilities are !important, so this is too.
   Ref: https://getbootstrap.com/docs/5.3/utilities/api/#importance */
#sqlpage_main_wrapper {
  margin-block: 0 !important;
  padding-inline: var(--size-3) !important;
}

/* Keep the "Built with SQLPage" footer, with room to breathe. */
#sqlpage_footer {
  padding-block: var(--size-5);
}

/* ---------- 3. Custom components ----------
   One block per component, named after the component. */

/* profile */
/* A profile page is one column: hide SQLPage's top bar there. */
body:has(.profile) .navbar { display: none; }

.profile {
  --profile-avatar-size: calc(var(--size-10) + var(--size-3));
  --profile-soft: color-mix(in srgb, var(--tblr-primary) 12%, transparent);

  max-width: var(--size-content-3);
  margin-inline: auto;
  padding-block-start: var(--size-8);
  text-align: center;

  & .profile-avatar {
    inline-size: var(--profile-avatar-size);
    block-size: var(--profile-avatar-size);
    border-radius: var(--radius-round);
    object-fit: cover;
    /* Two rings: a gap in the surface colour, then a hairline. */
    box-shadow:
      0 0 0 var(--size-1) var(--tblr-bg-surface),
      0 0 0 calc(var(--size-1) + var(--border-size-1)) var(--tblr-border-color);
  }
  & .profile-name {
    margin: var(--size-3) 0 var(--size-1);
    color: inherit;
    font-size: var(--font-size-5);
    font-weight: var(--font-weight-7);
  }
  & .profile-tagline {
    max-width: var(--size-content-2);
    margin: 0 auto;
    color: var(--tblr-secondary);
    font-size: var(--font-size-2);
  }
  & .profile-location {
    display: inline-flex;
    align-items: center;
    gap: var(--size-1);
    margin-block: var(--size-3) 0;
    padding: var(--size-1) var(--size-3);
    border-radius: var(--radius-round);
    background: var(--profile-soft);
    color: var(--tblr-primary);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-6);
  }
  & .profile-links {
    display: grid;
    /* minmax(0, …): rows may shrink below the label width (it truncates). */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--size-2);
    margin: var(--size-7) 0 0;
    padding: 0;
    list-style: none;
  }
  & .profile-link {
    display: flex;
    align-items: center;
    gap: var(--size-3);
    padding: var(--size-3) var(--size-4);
    border: var(--border-size-1) solid var(--tblr-border-color);
    border-radius: var(--radius-3);
    background: var(--tblr-bg-surface);
    color: var(--tblr-body-color);
    text-align: start;
    text-decoration: none;
    box-shadow: var(--shadow-2);
    transition:
      transform .2s var(--ease-out-3),
      border-color .2s var(--ease-out-3),
      background-color .2s var(--ease-out-3);

    &:hover,
    &:focus-visible {
      transform: translateY(calc(-1 * var(--size-1)));
      border-color: var(--tblr-primary);
      color: var(--tblr-body-color);
    }
  }
  & .profile-link-icon {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: var(--size-7);
    block-size: var(--size-7);
    border-radius: var(--radius-2);
    background: var(--profile-soft);
    color: var(--tblr-primary);
  }
  & .profile-link-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0; /* lets the long URL truncate instead of overflow */

    & small {
      overflow: hidden;
      color: var(--tblr-secondary);
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  & .profile-link-arrow { color: var(--tblr-secondary); }
  & .profile-link:hover .profile-link-arrow { color: var(--tblr-primary); }
}

/* projects */
.projects {
  --projects-soft: color-mix(in srgb, var(--tblr-primary) 12%, transparent);

  max-width: var(--size-content-3);
  margin-inline: auto;
  padding-block: var(--size-8) var(--size-3);

  & .projects-title {
    margin: 0 0 var(--size-3);
    color: var(--tblr-secondary);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-6);
    letter-spacing: var(--font-letterspacing-3);
    text-transform: uppercase;
  }
  /* auto-fit + minmax: 2 columns on wide screens, 1 on phones.
     Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/repeat#auto-fit */
  & .projects-grid {
    display: grid;
    gap: var(--size-3);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
  & .projects-item {
    display: flex;
    flex-direction: column;
    gap: var(--size-1);
    padding: var(--size-4);
    border: var(--border-size-1) solid var(--tblr-border-color);
    border-radius: var(--radius-3);
    background: var(--tblr-bg-surface);
    color: var(--tblr-body-color);
    text-decoration: none;
    box-shadow: var(--shadow-2);
    transition:
      transform .2s var(--ease-out-3),
      border-color .2s var(--ease-out-3),
      background-color .2s var(--ease-out-3);

    &:hover,
    &:focus-visible {
      transform: translateY(calc(-1 * var(--size-1)));
      border-color: var(--tblr-primary);
      color: var(--tblr-body-color);
    }
  }
  & .projects-item-icon {
    display: grid;
    place-items: center;
    inline-size: var(--size-7);
    block-size: var(--size-7);
    border-radius: var(--radius-2);
    background: var(--projects-soft);
    color: var(--tblr-primary);
  }
  & .projects-item-name {
    margin: var(--size-2) 0 0;
    color: inherit;
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-7);
  }
  & .projects-item-blurb {
    flex: 1;
    margin: 0;
    color: var(--tblr-secondary);
    font-size: var(--font-size-1);
  }
  & .projects-item-host {
    margin-block-start: var(--size-2);
    color: var(--tblr-primary);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-6);
  }
}

/* stat_tiles (reference component: copy this pattern) */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--size-3);
  margin-block: var(--size-3);

  & .stat-tile {
    background: var(--tblr-bg-surface);
    border: var(--border-size-1) solid var(--tblr-border-color);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-2);
    padding: var(--size-4);
    transition: transform .2s var(--ease-out-3);
    &:hover { transform: translateY(calc(-1 * var(--size-1))); }
  }
  & .stat-title { color: var(--tblr-secondary); font-size: var(--font-size-0); }
  & .stat-value { font-size: var(--font-size-5); font-weight: var(--font-weight-7); }
  & .stat-value[data-trend="up"]   { color: var(--tblr-success); }
  & .stat-value[data-trend="down"] { color: var(--tblr-danger); }
  & .stat-desc { color: var(--tblr-secondary); font-size: var(--font-size-0); margin-top: var(--size-1); }
}

/* ---------- 4. Design variants ----------
   Each design under /designs/<slug> has its own stylesheet,
   www/assets/designs/<slug>.css, loaded by shell.sql's `design` param.
   That keeps this file, which every page loads, small. */

/* ---------- 5. Motion ----------
   Turn off hover lifts and the blinking cursor for people who ask
   their OS for less motion. !important beats the more specific
   per-variant hover rules above.
   Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  :is(.profile-link, .projects-item, .stat-tile) {
    transition: none !important;
    &:is(:hover, :focus-visible) { transform: none !important; }
  }
  .profile-name::after { animation: none !important; }
}