:root,
:host {
    --pico-font-size: 1em;
    --pico-nav-breadcrumb-divider: '→';
}

button[type=submit] {
  width: unset;
}

table {
  & [type=button],
  & [type=reset],
  & [type=submit],
  & [role=group] {
    margin-bottom: 0;
  }
}

footer {
  & small {
    color: var(--pico-muted-color);
  }
}

/* button utility class */

.destroy {
    --pico-primary-background: #D45846;
    --pico-primary-border: var(--pico-primary-background);
    --pico-primary-hover-background: oklch(from var(--pico-primary-background) calc(l - .05) c h);
    --pico-primary-hover-border:  oklch(from var(--pico-primary-background) calc(l - .05) c h);
}

/* Hamburger toggle — hidden on desktop */
#nav-toggle-li { display: none; }

#nav-toggle {
  /* background: none;
  border: var(--pico-border-width) solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  padding: 0.3rem;
  color: inherit; */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  margin: 0;
}

#nav-toggle [data-icon="close"] { display: none; }
#nav-toggle[aria-expanded="true"] [data-icon="hamburger"] { display: none; }
#nav-toggle[aria-expanded="true"] [data-icon="close"] { display: block; }

@media (max-width: 768px) {
  header > nav {
    flex-wrap: wrap;
  }
  #logo-nav {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  #nav-toggle-li {
    display: block;
  }
  #main-nav {
    display: none;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: flex-start;
    /* gap: calc(var(--pico-spacing) / 4); */
    gap: 0;
    /* padding-block: calc(var(--pico-spacing) / 2); */
    padding: 0;
    border-top: var(--pico-border-width) solid var(--pico-muted-border-color);
    margin: 0;
    & li:not(:has(details)) {
        display: block;
    }
    & a {
        display: block;
    }
  }
  #main-nav.open {
    display: block;
  }
}

/* avatar */

.character-avatar,
.writer-avatar {
  display: block;
  text-align: center;
  align-content: center;
  width: 200px;
  height: 200px;
  & img {
    max-width: 200px;
    max-height: 200px;
  }
}
.character-avatar--placeholder,
.writer-avatar--placeholder {
    background-color: var(--pico-muted-border-color);
    color: var(--pico-muted-color);
    border-radius: 9999px;
    font-size: 4rem;
    font-weight: 900;
}

/* group/_form */
.color-contrast {
  align-content: center;
  margin-bottom: var(--pico-spacing);
}

/* thread/show */
.post {
  display: grid;
  grid-template-columns: calc(200px + (2 * var(--pico-block-spacing-horizontal))) 1fr;
  padding: 0;
}

.post-header {
  display: grid;
  grid-template-columns: 100%;
  gap: var(--pico-block-spacing-vertical);
  align-items: start;
  margin: 0;
  text-align: center;
  & .character-avatar,
  & .character-avatar--placeholder,
  & .writer-avatar, 
  & .writer-avatar--placeholder {
    margin-bottom: var(--pico-block-spacing-vertical);
  }
}

.post-header,
.post-content {
  padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
}

.post-meta {
  color: var(--pico-muted-color);
}