/*
 * app.css: the page frame. Masthead (brand, demo marker, language, persona
 * switcher), role menu, main column, footer, and the landing page.
 * Mobile first; wider layouts from 48em.
 */
@layer app {
  /* Masthead: the one distinctive element. The serrated lower edge is the
     theme's edge.svg used as a mask, so it takes the persona bar's colour in
     every scheme. -webkit-mask-* is kept for Safari versions before 15.4. */
  .masthead { background: var(--color-masthead); color: var(--color-masthead-ink); position: relative; }
  .masthead::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    block-size: 0.6rem;
    background: var(--color-masthead-2);
    -webkit-mask-image: var(--masthead-edge);
    mask-image: var(--masthead-edge);
    -webkit-mask-size: var(--masthead-edge-size);
    mask-size: var(--masthead-edge-size);
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    pointer-events: none;
  }
  .masthead--plain::after { background: var(--color-masthead); }
  .masthead__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    max-inline-size: var(--page-max);
    margin-inline: auto;
    padding: var(--space-3) var(--space-4);
  }
  .brand { display: flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; }
  .brand__mark { inline-size: 2.75rem; block-size: 2.75rem; flex: none; }
  .brand__text { display: grid; line-height: var(--leading-tight); }
  .brand__name { font-weight: 600; font-size: var(--text-1); }
  .brand__product { color: var(--color-masthead-muted); font-size: var(--text-sm); }
  .masthead__tools { display: flex; align-items: center; gap: var(--space-4); }
  .demo-badge {
    padding: 0.15rem var(--space-2);
    border: 1px dashed var(--color-masthead-muted);
    border-radius: var(--radius-1);
    font-size: var(--text-sm);
    color: var(--color-masthead-ink);
  }
  .lang-switch { color: var(--color-masthead-ink); font-weight: 600; min-block-size: var(--tap); display: inline-flex; align-items: center; }
  .masthead a:focus-visible, .masthead select:focus-visible, .masthead button:focus-visible { outline-color: var(--color-masthead-ink); }

  .masthead__persona { background: var(--color-masthead-2); }
  .persona-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); inline-size: 100%; }
  .persona-switch__current { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
  .persona-switch__label { color: var(--color-masthead-muted); font-size: var(--text-sm); }
  .persona-switch__name { font-weight: 600; }
  .persona-switch__role { color: var(--color-masthead-muted); font-size: var(--text-sm); }
  .persona-switch__control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-inline-size: 0; max-inline-size: 100%; }
  .persona-switch__control label { font-size: var(--text-sm); color: var(--color-masthead-muted); }
  /* A select is as wide as its longest option unless told otherwise; let it shrink. */
  .persona-switch select {
    flex: 1 1 14rem;
    min-inline-size: 0;
    inline-size: 100%;
    max-inline-size: 26rem;
    min-block-size: var(--tap);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-masthead-muted);
    border-radius: var(--radius-1);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: max(1rem, 16px);
  }

  /* Role menu: current page marked by weight and an underline bar, not colour alone. */
  .role-nav { background: var(--color-surface); border-block-end: 1px solid var(--color-border); padding-block-start: 0.6rem; }
  .role-nav__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); max-inline-size: var(--page-max); margin-inline: auto; padding-inline: var(--space-4); }
  .role-nav__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap);
    color: var(--color-text);
    text-decoration: none;
    border-block-end: 3px solid transparent;
  }
  .role-nav__link:hover { border-block-end-color: var(--color-border-strong); }
  .role-nav__link[aria-current="page"] { font-weight: 600; border-block-end-color: var(--color-accent); }

  /* Main column. */
  .page { flex: 1 0 auto; inline-size: 100%; max-inline-size: var(--page-max); margin-inline: auto; padding: var(--space-10) var(--space-4) var(--space-12); }
  .page:focus { outline: none; }

  /* Landing page. */
  .intro { margin-block-end: var(--space-12); max-inline-size: 52rem; }
  .intro__title { font-size: var(--text-4); margin-block-end: var(--space-4); }
  .intro__lead { font-size: var(--text-1); color: var(--color-text-muted); }
  .area-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-8) var(--space-6); }
  .area-list__item { padding-block-start: var(--space-4); border-block-start: 3px solid var(--color-accent); }
  .area-list__item p { margin: 0; color: var(--color-text-muted); }
  .area-list__name { margin-block-end: var(--space-2); }

  /* Footer. */
  .site-footer { background: var(--color-surface); border-block-start: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); }
  .site-footer__inner { max-inline-size: var(--page-max); margin-inline: auto; padding: var(--space-8) var(--space-4); }
  .site-footer__brand { color: var(--color-text); font-weight: 600; }
  .site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
  .site-footer__links a { display: inline-flex; align-items: center; min-block-size: var(--tap); }

  @media (min-width: 48em) {
    .masthead__inner, .role-nav__list, .page, .site-footer__inner { padding-inline: var(--space-8); }
  }
}