/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 *
 * Type and color live on CSS custom properties (see tokens.css). Screens and
 * primitives consume those tokens — do not recreate Tailwind utility classes.
 * Named roles in base.css (display, lead, large, small, muted) cover the
 * common shadcn type recipes. For a one-off size, set font-size to a --text-*
 * token on the component.
 */

/* Layer order must be established before any layered stylesheet loads.
 * app_stylesheet_link_tags loads this file first, regardless of the
 * alphabetical order of Propshaft's stylesheet list. */
@layer tokens, reset, base, components;

@layer components {
main.home {
  display: grid;
  grid-template-columns: min(100%, 28rem);
  align-content: center;
  justify-content: center;
  justify-items: center;
  gap: 1.5rem;
  min-block-size: 100dvh;
  padding-inline: 1.5rem;
  padding-block: var(--ruby-native-safe-area-top) var(--ruby-native-safe-area-bottom);
}

main.home h1 {
  text-align: center;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.home-session {
  flex-basis: 100%;
  text-align: center;
}
}

/* Keep Herb's reactive client running, but its desktop tools out of the native UI. */
body.native :is(.herb-floating-menu, .herb-dev-tools-runtime-root) {
  display: none !important;
}

/* Herb's development-only wrappers should animate debug highlights, not theme text. */
body [data-herb-debug-outline-type*="erb-output"] {
  transition-property: background-color, outline-color, outline-offset;
}

/* Native chrome comes from Ruby Native, not a CSS imitation of Liquid Glass.
 * The web view contains one pane and leaves its measured insets to the shell. */
@layer components {
  body.native {
    font-family: system-ui, sans-serif;

    .native-hidden,
    .rail,
    .shell-status,
    .shell-main__header,
    .shell-main__trigger,
    .shell-main__actions,
    .shell-main::before,
    .list-pane__header {
      display: none !important;
    }

    .shell,
    .shell[data-focus="list"] {
      grid-template-areas: "main";
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
      padding-block: var(--ruby-native-safe-area-top) var(--ruby-native-safe-area-bottom);
      background: var(--background);
    }

    .shell .shell-main {
      display: flex;
      flex-direction: column;
      margin: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .shell .shell-main__toolbar {
      margin: 0;
      border: 0;

      &:not(:has(.tabs__bar)) {
        display: none;
      }
    }

    .shell .shell-main__content {
      flex: 1;
      margin: 0;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .shell .shell-sidebar,
    .shell .shell-details {
      display: none;
    }

    .shell[data-focus="list"] {
      grid-template-areas: "sidebar";

      .shell-sidebar {
        display: flex;
      }

      .shell-main {
        display: none;
      }
    }

    .shell .shell-list {
      flex: 1;
      inline-size: 100%;
      visibility: visible;
    }

    .list-pane {
      inline-size: 100%;
    }

    .list-pane__items {
      padding: 0.75rem;
      background: var(--muted);
    }

    .list-item {
      background: var(--background);

      &:first-child {
        border-start-start-radius: var(--radius-xl);
        border-start-end-radius: var(--radius-xl);
      }

      &:last-child {
        border-end-start-radius: var(--radius-xl);
        border-end-end-radius: var(--radius-xl);
        border-block-end: 0;
      }
    }

    .shell[data-sheet] .shell__scrim {
      inset-block-end: 0;
    }

    .shell[data-sheet="details"] .shell-details {
      display: block;
      inset-block: 0;
      inline-size: var(--details-width);
      padding-block: var(--ruby-native-safe-area-top) var(--ruby-native-safe-area-bottom);
      visibility: visible;
    }
  }
}