/*
  SubViewHeader: a floating header line for a sub-view — the way back at the left
  edge, the view's name in the middle, the view's actions at the right edge.
  Loaded by the component itself (@StyleSheet on the class), not by the views,
  because the looks belong to the component wherever it ends up.

  Only the controls wear glass; the bar itself is nothing, and the title is bare
  text, as in iOS's current form language. The dress is what tells the pieces
  apart: a circle of glass says "control", an undecorated word says "name". An
  earlier draft put the arrow and the title in one shared pill, and it read as a
  single button labelled with the name of the view you were already on.

  The glass is Aura's own material with a plain fallback after every token. On
  Aura the circle is the same surface as the theme's popovers — same blur, same
  bright inner rim, same shadow — so it reads as a piece of the theme rather than
  an imitation of iOS pasted onto it. On any other theme the fallbacks make a
  translucent circle and nothing breaks.
*/

header.sub-view-header {
  /*
     Sticky rather than fixed: the bar starts where the layout put it, rides up
     with the page, and stops just short of the edge. The offset is the small
     spacing step so the pieces hover rather than touch — the float the glass
     needs to be seen as a separate object.

     The safe area is part of the offset, and it is load-bearing: as an
     installed PWA the viewport is the whole screen (viewport-fit=cover), so
     "just short of the edge" is otherwise just short of the notch — the bar
     rode up under the Dynamic Island and the way back stopped being tappable.
     In a browser tab the env() is zero and nothing changes.
  */
  --sub-view-header-inset: calc(env(safe-area-inset-top, 0px) + var(--vaadin-padding-s, 0.5rem));
  position: sticky;
  top: var(--sub-view-header-inset);
  /* Above the cards it floats over; overlays live in the top layer regardless. */
  z-index: 10;

  /*
     Three zones. The 1fr flanks are what keep the title on the page's own
     centre line instead of "centred between whatever the sides happen to be" —
     with a back arrow on one side and nothing on the other, flexbox centring
     would sit the title visibly off to the right.
  */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--vaadin-gap-s, 0.5rem);
  width: 100%;
  box-sizing: border-box;

  /*
     Elbow room below, on top of whatever gap the parent layout gives: the veil
     reaches a little past the bar so scrolling content dissolves instead of
     hitting an edge, and without this the page's first line started inside
     that reach — sharp everywhere except its top half, which read as a
     rendering fault. The margin walks the content out of the veil; the veil's
     own bottom (see ::before) is set to end where this puts the first line.
  */
  margin-block-end: 0.5rem;

  /*
     The bar spans the page but is not a thing: a click between the pieces
     belongs to whatever has scrolled underneath them.
  */
  pointer-events: none;
}

header.sub-view-header > * {
  pointer-events: auto;
}

/*
   The veil under the whole bar. The title wears no glass of its own, so what
   keeps it readable over a card is this: a sheet of blur behind the full line,
   faded out at its bottom edge by the mask so it has no edge of its own — the
   content dissolves upwards instead of hitting a border. A breath of the page's
   colour goes with it; blur alone does not buy contrast against a busy card,
   a tint does.

   A pseudo-element rather than a filter on the bar, because a mask on the bar
   would fade the arrow and the title along with the veil. It reaches past the
   bar on every side — up to cover the sticky offset to the screen's edge, out
   past the layout's padding, down to give the fade room — and it is wider than
   its job needs because the page's own padding is not this component's to know.
*/
header.sub-view-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* Up past the sticky offset — safe area included — to the screen's edge. */
  top: calc(-1 * var(--sub-view-header-inset) - 1rem);
  /*
     Down just far enough that the fade finishes where the bar's bottom margin
     puts the first line of content: at rest nothing on the page is blurred,
     and the reach still exists for what scrolls up into it.
  */
  bottom: -1.25rem;
  left: -2.5rem;
  right: -2.5rem;
  background: linear-gradient(to bottom,
      color-mix(in srgb, var(--aura-background-color, canvas) 45%, transparent),
      transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent);
  mask-image: linear-gradient(to bottom, black 55%, transparent);
}

/*
   The title. An h1 for the document outline, not for the type scale: at Aura's
   default h1 size the line would be a banner. This is a label in a bar, so it
   gets a label's size, one line of it, and no decoration at all.
*/
header.sub-view-header h1 {
  margin: 0;
  font-size: var(--aura-font-size-l, 1.25rem);
  line-height: 1.5rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/*
   One dress for every control on the bar. The arrow and whatever the view puts
   at the other end are the same kind of thing — round, glass, an icon — and an
   early version gave the arrow a heavier coat (the popover's bright rim, a
   bigger shadow, the page's text colour) which read as two form languages on
   one line. The button's language won; see the arrow's own rule below.

   The blur is the one thing added on top of the theme's button: these float
   over scrolling content, which a button in a form does not. Borrowing Aura's
   overlay filter token rather than its values also borrows the theme's
   judgement — when the reader has asked the OS for less transparency, Aura
   turns the filter off, and these follow suit.
*/
header.sub-view-header > a,
header.sub-view-header > .sub-view-header-actions > vaadin-button {
  height: 2.5rem;
  -webkit-backdrop-filter: var(--aura-overlay-backdrop-filter, blur(20px) brightness(1.1) saturate(1.2));
  backdrop-filter: var(--aura-overlay-backdrop-filter, blur(20px) brightness(1.1) saturate(1.2));
}

/*
   The way back: Aura's own secondary button, spelled out on an <a>. Same
   accent-tinted surface, same hairline border, same small shadow, same accent
   for the arrow itself — the tokens are the button's, so the circle follows the
   theme and the buttons beside it without a colour of its own. The two surface
   levels are what Aura's button sets; they land because the link carries
   class="aura-surface", without which the inherited surface tokens arrive
   already resolved against the page and these lines would change nothing.

   The size makes the touch target, not the arrow.
*/
header.sub-view-header > a {
  justify-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  border-radius: 50%;

  --aura-surface-level: 4;
  --aura-surface-opacity: 0.5;
  color: var(--aura-accent-text-color, inherit);
  background: var(--aura-accent-surface, rgb(255 255 255 / 0.6)) padding-box;
  border: 1px solid var(--aura-accent-border-color, rgb(128 128 128 / 0.25));
  box-shadow: var(--vaadin-button-shadow, 0 1px 4px -2px rgb(0 0 0 / 0.3));
}

header.sub-view-header > a:hover {
  background: color-mix(in srgb,
      var(--aura-accent-surface, rgb(255 255 255 / 0.6)), currentColor 8%);
}

header.sub-view-header > a:active {
  background: color-mix(in srgb,
      var(--aura-accent-surface, rgb(255 255 255 / 0.6)), currentColor 14%);
}

/*
   An icon-only link still has to show it is focused; the theme's focus ring
   colour on the circle does it without inventing a style of this component's own.
*/
header.sub-view-header > a:focus-visible {
  outline: 2px solid var(--vaadin-focus-ring-color, Highlight);
  outline-offset: 1px;
}

header.sub-view-header > a vaadin-icon {
  width: 1.375rem;
  height: 1.375rem;
}

/*
   The actions, at the right edge. The component owns the zone; what goes in it
   is the view's business. The zone spans its 1fr of the bar so that it can be
   found, but only its children take clicks — see the bar's pointer-events.

   Buttons dropped in here go round: on this bar a control is a circle or a
   pill, and Aura's own button surface already matches the arrow's glass.
*/
header.sub-view-header > .sub-view-header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--vaadin-gap-xs, 0.25rem);
  pointer-events: none;
}

header.sub-view-header > .sub-view-header-actions > * {
  pointer-events: auto;
}

header.sub-view-header > .sub-view-header-actions vaadin-button {
  /* An icon-only button becomes the arrow's circle; one with text, a pill. */
  border-radius: 9999px;
  min-width: 2.5rem;
}