/* Work Sans, the same two cuts and the same files waltersbacher.com serves.
   Self-hosted rather than pulled from Google. */
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/work-sans-v18-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/work-sans-v18-latin-600.woff2") format("woff2");
}

/* Brand tokens from waltersbacher.com. A :root brand override is the one place
   Web Awesome allows a literal colour: webawesome.com/docs/themes */
:root {
  --wa-color-brand-fill-loud: #055093;
  --wa-color-brand-fill-normal: #1b6cb4;
  --wa-color-brand-fill-quiet: #e4eef7;
  --wa-color-brand-border-loud: #043f73;
  --wa-color-brand-border-normal: #055093;
  --wa-color-brand-border-quiet: #b9d2e8;
  --wa-color-brand-on-loud: #ffffff;
  --wa-color-brand-on-normal: #ffffff;
  --wa-color-brand-on-quiet: #043f73;

  --wa-font-family-body: "Work Sans", sans-serif;
  --wa-font-family-heading: "Work Sans", sans-serif;
  --wa-font-family-longform: "Work Sans", sans-serif;
}

/* Components have no size until their JavaScript upgrades them, so a half-upgraded
   page shows gaps and stray parts. The header is plain markup and shows at once,
   the rest holds until its components are there, two seconds at the most. */
main:has(:not(:defined)),
.app-tabbar:has(:not(:defined)) {
  animation: var(--app-cloak-limit) step-end app-cloak;
}

@keyframes app-cloak {
  from {
    visibility: hidden;
  }
}

wa-page:not(:defined) [slot="skip-to-content"] {
  display: none;
}

wa-icon:not(:defined) {
  display: inline-block;
  inline-size: 1.25em;
  block-size: 1em;
}

wa-page {
  --main-width: 32rem;
}

/* One gutter for the whole app, so the header, the text and the cards
   start on the same line. wa-page's own main padding is 48px, far too
   much on a phone. */
:root {
  --app-gutter: var(--wa-space-m);
  --app-header-reserve: 4.5rem;
  --app-tabbar-reserve: 4.75rem;
  --app-cloak-limit: 2s;

  scroll-padding-block: var(--app-header-reserve) calc(var(--app-tabbar-reserve) + env(safe-area-inset-bottom));
}

wa-page > main {
  padding-block: var(--wa-space-l) calc(var(--app-tabbar-reserve) + env(safe-area-inset-bottom) + var(--app-gutter));
  padding-inline: var(--app-gutter);
  overflow-wrap: anywhere;
}

wa-card {
  --spacing: var(--app-gutter);
}

wa-page::part(skip-to-content) {
  position: fixed;
  z-index: 20;
  margin: var(--wa-space-2xs);
  padding: var(--wa-space-2xs) var(--wa-space-s);
  border-radius: var(--wa-border-radius-m);
  background-color: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
  font-size: var(--wa-font-size-s);
  text-decoration: none;
}

.app-header {
  background-color: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
  padding: var(--wa-space-m) var(--app-gutter);
}

.app-header-link {
  color: inherit;
  text-decoration: none;
  border-radius: var(--wa-border-radius-s);
}

.app-settings {
  display: grid;
  justify-items: center;
  gap: var(--wa-space-2xs);
}

.app-settings__label {
  font-size: var(--wa-font-size-2xs);
  line-height: var(--wa-line-height-condensed);
}

.app-title,
.app-row__title {
  hyphens: auto;
}

.app-title {
  margin: 0;
  font-size: var(--wa-font-size-xl);
  font-weight: var(--wa-font-weight-heading);
  line-height: var(--wa-line-height-condensed);
}

/* The logo is white on transparent, made for the brand bar. */
.app-logo {
  display: block;
  block-size: var(--wa-font-size-2xl);
  inline-size: auto;
  max-inline-size: 100%;
  object-fit: contain;
  object-position: left;
}

/* The scroller would clip the focus ring, so the row inside gets room on every side. */
.app-filter {
  --focus-ring-room: calc(var(--wa-focus-ring-width) + var(--wa-focus-ring-offset));

  margin: calc(var(--focus-ring-room) * -1);

  &::part(content) {
    padding: var(--focus-ring-room);
  }
}

.app-filter wa-button {
  flex: none;
}

.app-post {
  --spacing: var(--app-gutter);
  --show-duration: 0s;
  --hide-duration: 0s;

  @media (prefers-reduced-motion: no-preference) {
    --show-duration: var(--wa-transition-normal);
    --hide-duration: var(--wa-transition-normal);
  }

  &::part(icon) {
    display: none;
  }

  &::part(content) {
    padding-block-start: 0;
  }

}

.app-post__text > :first-child {
  margin-block-start: 0;
}

.app-post__text :is(h1, h2, h3, h4, h5, h6) {
  margin-block: var(--wa-space-m) var(--wa-space-2xs);
  font-size: var(--wa-font-size-m);
  font-weight: var(--wa-font-weight-heading);
  line-height: var(--wa-line-height-condensed);
}

.app-post__summary {
  flex: 1;
  min-inline-size: 0;
}

.app-post__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-s);
}

.app-post__chevron {
  flex: none;
  color: var(--wa-color-text-quiet);

  @media (prefers-reduced-motion: no-preference) {
    transition: rotate var(--wa-transition-normal) var(--wa-transition-easing);
  }

  .app-post[open] & {
    rotate: 90deg;
  }
}

.app-post__cover {
  display: block;
  inline-size: calc(100% + var(--spacing) * 2);
  max-inline-size: none;
  block-size: auto;
  margin: calc(var(--spacing) * -1) calc(var(--spacing) * -1) var(--spacing);
  border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width)) calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width)) 0 0;
}

/* a class with display: flex outranks the browser's own [hidden] rule */
.app-notify[hidden],
.app-push[hidden] {
  display: none;
}

.app-document {
  display: flex;
  margin-block-start: var(--wa-space-m);
  padding: var(--wa-space-s);
  border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  color: inherit;
  text-decoration: none;
}

.app-document__icon {
  font-size: var(--wa-font-size-l);
  color: var(--wa-color-brand-fill-loud);
}

.app-row {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--wa-border-radius-l);
}

.app-row wa-card {
  block-size: 100%;
}

.app-row wa-card::part(card) {
  block-size: 100%;
}

.app-thumbs {
  --min-column-size: 8rem;

  margin-block-start: var(--wa-space-s);
}

.app-tabbar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 10;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background-color: var(--wa-color-surface-raised);
  border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  padding-block-end: env(safe-area-inset-bottom);
}

.app-tabbar__link {
  /* the bar sits on the viewport edges, so the ring has to draw inwards */
  --wa-focus-ring-offset: calc(var(--wa-focus-ring-width) * -1);

  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--wa-space-2xs);
  padding-block: var(--wa-space-s);
  padding-inline: var(--wa-space-2xs);
  text-align: center;
  color: var(--wa-color-text-quiet);
  text-decoration: none;

  &[aria-current] {
    color: var(--wa-color-brand-fill-loud);
    font-weight: var(--wa-font-weight-heading);
  }
}

.app-tabbar__mark {
  display: grid;
  padding: var(--wa-space-3xs);
  border-radius: var(--wa-border-radius-s);

  .app-tabbar__link[aria-current] & {
    background-color: var(--wa-color-brand-fill-loud);
    color: var(--wa-color-brand-on-loud);
  }
}

.app-tabbar__icon {
  font-size: var(--wa-font-size-l);
}

.app-tabbar__label {
  justify-self: stretch;
  overflow-wrap: anywhere;
  font-size: var(--wa-font-size-2xs);
  line-height: var(--wa-line-height-condensed);
}

.app-dropzone__icon {
  font-size: var(--wa-font-size-xl);
}