/*
 * The shell: top bar, wordmark, navigation, flash.
 *
 * Mobile is the design, not the fallback. Below 48rem the navigation is a fixed bottom tab bar,
 * because that is where a thumb is and because the expedientes were previously reachable only from
 * a link below the fold of the conversation. Above 48rem the same element sits in the top bar.
 * One nav in the DOM, two positions.
 */

.app-shell {
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
}

.app-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem var(--pad-x);
  border-block-end: 1px solid var(--color-border-light);
}

/*
 * The blur lives on a pseudo-element, not on .app-bar itself, and that is load-bearing rather than
 * stylistic. backdrop-filter makes an element a containing block for any position:fixed descendant,
 * so with the filter on the bar the nav below resolved its `bottom: 0` against the 53px bar instead
 * of the viewport and rendered on top of the wordmark. The pseudo-element is not an ancestor of the
 * nav, so it blurs without capturing it.
 */
.app-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Cinzel, wide-tracked, with the gold tick from the site's own header. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: .3em;
  font-size: .95rem;
  color: var(--color-text);
  text-decoration: none;
}

.brand__tick {
  inline-size: 4px;
  block-size: 1.05em;
  border-radius: 1px;
  background: var(--accent);
}

.app-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  justify-content: space-around;
  gap: .25rem;
  padding: .5rem max(.5rem, env(safe-area-inset-left)) max(.5rem, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-block-start: 1px solid var(--color-border-light);
}

.app-nav__link {
  flex: 1;
  min-inline-size: 0;
  padding: .5rem .3rem;
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  color: var(--color-text-subtle);
  /* The labels are full sentences ("Tus expedientes") because the system specs click them by that
     text. On a 360px screen four of those do not fit, so they truncate rather than wrap to two
     lines and shove the bar over the content. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}

.app-nav__link:hover {
  color: var(--color-text);
}

.app-nav__link[aria-current="page"] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* The bottom bar is fixed, so the last of the content would otherwise sit underneath it. */
.app-main {
  flex: 1;
  padding-block: 1.25rem;
  padding-block-end: calc(4.5rem + env(safe-area-inset-bottom));
  padding-inline: var(--pad-x);
}

@media (width >= 48rem) {
  .app-nav {
    position: static;
    justify-content: flex-end;
    gap: clamp(.5rem, 2vw, 1.75rem);
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
  }

  .app-nav__link {
    flex: none;
    font-family: var(--sans);
    font-size: var(--step--1);
  }

  .app-nav__link[aria-current="page"] {
    background: none;
  }

  .app-main {
    padding-block: 2rem;
  }
}

/* No :empty rule here on purpose: the ERB always leaves a whitespace text node inside #flash, so
   :empty can never match it, which is the same trap conversations/_activity documents and works
   around with a Ruby-decided class. Nothing needs the rule anyway: gap only applies between items,
   so an empty stack is already zero-height. */
.flash-stack {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-inline-size: var(--maxw);
  margin-inline: auto;
}

.flash-note {
  padding: .75rem 1rem;
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  margin-block-end: 1rem;
}

.flash-note--notice {
  color: var(--color-positive);
  border-color: color-mix(in srgb, var(--color-positive) 40%, transparent);
  background: color-mix(in srgb, var(--color-positive) 10%, transparent);
}

.flash-note--alert {
  color: var(--color-negative);
  border-color: color-mix(in srgb, var(--color-negative) 40%, transparent);
  background: color-mix(in srgb, var(--color-negative) 10%, transparent);
}