/*
 * What sits inside the sidebar and the drawer (shared/_sidebar and the panels
 * it renders): the signed-in account hub and its sections, the saved
 * screeners, the watchlist, the company links and export.
 *
 *   .sidebar-brand        the logo row, shown below 1024px, where the navbar
 *                         hides its own
 *   .sidebar-content      the scrolling column of sections
 *   .sidebar-section      one titled block, a hairline under each
 *   .sidebar-links        a stacked list of links
 *   .sidebar-note         a line of help or refusal text
 *   .saved-screener       one saved screen: its name, then its icon buttons
 *   .watchlist-entry      one watched company: its prices, then remove
 */
@layer components {
  .sidebar-brand {
    display: flex;
    flex: none;
    align-items: center;
    block-size: var(--navbar-height);
    padding-inline: var(--space-lg);
    border-block-end: var(--rule-width) solid var(--color-rule);

    @media (width >= 1024px) {
      display: none;
    }
  }

  .sidebar-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-lg);
    overflow-y: auto;
    padding: var(--space-lg);
  }

  .sidebar-section {
    display: grid;
    gap: var(--space-xs);
    padding-block-end: var(--space-lg);
    border-block-end: var(--rule-width) solid var(--color-rule);

    & > .heading {
      margin-block-end: var(--space-2xs);
    }
  }

  .sidebar-links {
    display: grid;
    font-size: var(--text-ui);

    & > a {
      display: flex;
      align-items: center;
      min-block-size: 2.25rem;

      @media (pointer: coarse) {
        min-block-size: var(--target-min);
      }
    }
  }

  /* The company tabs, repeated here for the widths where the tab bar at the
     top of the page is hidden. */
  .sidebar-links--company {
    @media (width >= 1024px) {
      display: none;
    }
  }

  .sidebar-note {
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
    line-height: 1.5;
  }

  .saved-screener {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-ui);
  }

  .saved-screener__name {
    flex: 1;
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .saved-screener__actions {
    display: flex;
    align-items: center;
  }

  .saved-screener__edit {
    flex-basis: 100%;
    padding-block: var(--space-xs) var(--space-sm);
  }

  .watchlist-entry {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);

    & > .price-change {
      flex: 1;
    }
  }

  /* A small form's own row of actions: "Save or cancel". */
  .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }
}