/* The site's own styles: its layout and its own parts. The framework's
   styles (<FrameworkStylesheet />) are in the `hobproj` layer, and these are
   not in a layer, so every rule here wins over the framework's. To change
   its look, set its custom properties on :root here. See "Styles" in the
   framework's README. */

/* <main> is the content column. The body is a size container, so `cqi`
   inside it is the window's width without its scrollbar (`vw` includes an
   always-visible one, as on Windows). */
body {
  container-type: inline-size;
}

main {
  max-inline-size: var(--page-width);
  margin: 0 auto;
  padding: 2rem var(--page-gutter);
}

/* Directly in <main>, on a wide screen, a wide table can reach past the
   column to the right, up to the gutter at the window's edge, before it
   starts to scroll. Only a direct child, since the width assumes the table
   starts at the column's left content edge: (100cqi - page width) / 2 +
   gutter on a wide screen and the gutter on a narrow one, hence the min(). */
main > .scrollable-table {
  max-inline-size: calc(min(100cqi, (100cqi + var(--page-width)) / 2) - 2 * var(--page-gutter));
}

/* The bar at the top of every page (PageHeader): a line under it spans the
   window, and its ends line up with <main>'s content column. */
.page-header {
  display: flex;
  padding-block: 0.75rem;
  padding-inline: var(--full-width-padding);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-block-end: 1px solid alpha(from var(--color-gray) / 25%);
  /* Text color in every link state: it's the site's name, not a link in
     running text. Underlined on hover, like the username. Only the line is
     turned off, not the `text-decoration` shorthand, which would also reset
     the hover underline's color and thickness from `a:hover`. */
  > .site-name,
  > .site-name:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--color-text);
    font-weight: 650;
    text-decoration-line: none;
    white-space: nowrap;
  }
  > .site-name:hover {
    text-decoration-line: underline;
  }
  > .account {
    display: flex;
    min-inline-size: 0;
    align-items: center;
    gap: 0.75em;
  }
  /* The signed-in user's name, a link to their account page. A long name is
     cut short with "…" so the button always fits. Gray, not link blue, in
     every link state; underlined on hover, and in the text color on the
     account page itself. */
  .username,
  .username:visited {
    color: var(--color-text-muted);
    text-overflow: ellipsis;
    text-decoration-line: none;
    white-space: nowrap;
    overflow: hidden;
  }
  .username:hover {
    text-decoration-line: underline;
  }
  .username[aria-current="page"] {
    color: var(--color-text);
  }
  /* The name gives way first (above); the button's label stays on one
     line. */
  button {
    white-space: nowrap;
  }
  /* LogInButton's "JavaScript is required" note, beside the button. */
  noscript {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.875em;
  }
}

/* The top of the signed-out home page: a large heading, a line about the
   site, and "Create an account". Left-aligned, so it lines up with the header like
   every other page. The heading shrinks on a phone so the site name fits. */
.hero {
  padding-block: 2rem 1rem;
  > :is(:heading(1), h1) {
    margin-block-end: 0.3em;
    font-size: clamp(2.25rem, 8vw, 3.5rem);
    letter-spacing: -0.03em;
  }
  > .lead {
    margin-block: 0 2rem;
    color: var(--color-text-muted);
    font-size: 1.25rem;
  }
}

/* The framework's call (calls/): the stage fills the window below the page
   header and the heading. */
.call {
  --call-stage-height: max(15rem, 100dvh - 14rem);
}