/* MARK: LAYOUT
*/
@layer layout {
  html,
  body {
    display: grid;
    overflow: hidden;
  }

  app-container {
    display: grid;
    overflow: hidden;
    grid-template-rows:
      auto
      auto
      auto
      minmax(0, 1fr)
      auto
      auto
      auto;
    grid-auto-rows: auto;
    height: 100dvb;
    /* grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto; */
    /* --min-row-size: 1rem;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--min-row-size), 100%), 1fr)
  ); */

    app-banner {
      display: grid;
      justify-items: center;
    }

    header {
      display: grid;
      grid-column: 1 / -1;
      grid-auto-flow: column;
      justify-content: space-between;

      app-logo,
      app-user {
        padding-block: 0.5rem;
        padding-inline: 1rem;
      }
    }

    nav {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: max-content;
      justify-content: end;
      gap: 0.5rem;

      label {
        display: grid;
        position: relative;
        /* place-items: center;
       min-block-size: 2.75rem; */
        padding-block: 0.5rem;
        padding-inline: 1rem;
        cursor: pointer;

        > input {
          position: absolute;
          z-index: 1;
          inset: 0;

          inline-size: 100%;
          block-size: 100%;

          opacity: 0;
          cursor: inherit;
        }
      }

      /* NOTE (known, pre-token): nav state still uses a neutral color-mix, not
         the accent tokens. The data rows below DO use --bg-hover/--bg-selected.
         Migrate nav to the tokens when this rule is next touched. */
      label:is(:hover, :focus-within, :has(> input:checked)) {
        background: color-mix(in srgb, currentColor 10%, Canvas);
        outline: 0.0625rem solid currentColor;
        outline-offset: -0.0625rem;
      }

      /* Vertical styles */
      &:has(> label:last-child > input[type="checkbox"]:checked) {
        grid-auto-flow: row;
        grid-template-columns: minmax(0, 1fr);

        justify-content: stretch;
        justify-items: stretch;
        align-content: start;
      }
    }

    main {
      display: grid;
      overflow: hidden;
      grid-template-rows: minmax(0, 1fr);

      article {
        display: grid;
        /* Make scrollable */
        overflow-y: auto;
        align-content: start;

        section {
          display: grid;
          margin-block: 1rem;
        }

        /* Route-clear parity (with oninput.js): each route wipes stale leaf text
           in the content region, so whatever the new route doesn't fill stays
           :empty. Hide those so no blank gaps or shell placeholders remain.
           Scoped to `section` — the data table (direct child of article) manages
           its own visibility via the ul[aria-hidden] rules below. */
        section :is(h1, h2, h3, h4, p, blockquote, li, dt, dd, summary):empty {
          display: none;
        }
        section ul:not(:has(:not(:empty))) {
          display: none;
        }
        section details:not(:has(summary:not(:empty))) {
          display: none;
        }
        section:not(:has(:not(:empty))) {
          display: none;
        }

        h1,
        h2,
        h3 {
          margin-inline: 1rem;
          padding-block: 1rem;
        }

        p {
          margin-inline: 1rem;
          padding-block-end: 1rem;
        }

        ul,
        li {
          display: grid;
          list-style-type: none;
          padding-inline: 1rem;
          padding-block-end: 1rem;
        }

        /* Data table — two separate <ul>s. HEAD (aria-hidden) carries the column
           labels; BODY follows it, one <li> per record. Cells lay out as equal
           columns. Row hover + the selected record (its list-item radio :checked)
           paint from the SAME theme tokens the color-scheme control uses
           (--bg-hover / --bg-selected / --fg-emphasis), so light/dark,
           forced-colors and reduced-transparency all track for free. */
        ul[aria-hidden="true"] {
          align-content: start;

          > li {
            grid-auto-flow: column;
            grid-auto-columns: minmax(0, 1fr);
            gap: 1rem;
          }
        }

        ul[aria-hidden="true"] + ul {
          align-content: start;

          > li {
            cursor: pointer;

            > label {
              display: grid;
              grid-auto-flow: column;
              grid-auto-columns: minmax(0, 1fr);
              gap: 1rem;
              align-items: center;
              cursor: pointer;

              > * {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }

            &:hover {
              background-color: var(--bg-hover);
              color: var(--fg-emphasis);
            }

            /* Selected record */
            &:has(input:checked) {
              background-color: var(--bg-selected);
              color: var(--fg-emphasis);
            }
          }
        }
      }
    }

    aside {
      display: grid;
      /* Hide by default. */
      display: none;

      /* Reveal only when a row is selected — i.e. the edit form's fieldset has
         been populated from the selected record. */
      &:has(form fieldset:not(:empty)) {
        display: grid;
      }

      p {
        margin-inline: 1rem;
        padding-block-end: 1rem;
      }
    }

    footer {
      display: grid;
      grid-column: 1 / -1;
      grid-auto-flow: column;
      justify-content: space-between;

      app-legal,
      app-version {
        padding-block: 0.5rem;
        padding-inline: 1rem;
      }
    }
  }

  /* AUTO-GRID */
  app-cards {
    --min-row-size: 1rem;
    --min-col-size: 10rem;

    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(var(--min-row-size), 100%), 1fr)
    );
  }
}