@import url(https://rsms.me/inter/inter.css);

:root {
  font-family: Inter, sans-serif;

  max-width: 70ch;
  margin: auto;

  background: var(--bg1);
  color-scheme: light;

  --accent: lch(from var(--accent-color) 45 100 h);
  --bg1: white;
  --bg2: lch(from var(--accent-color) 92 10 h);
  --bg3: #ddd;
  --fg2: #355;
}

body {
  margin: 0;
  padding: 0;
}

header:has(+ main),
main + footer {
  margin: 3em 0;
}

button,
.\<button\>,
input[type='button'],
input[type='submit'],
input[type='reset'],
::file-selector-button {
  font: inherit;
  font-size: 0.9em;
  font-weight: bold;
  text-decoration: none;

  display: inline-block;
  padding: 0 0.4em;
  vertical-align: middle;
  min-width: auto;

  background: var(--bg2);
  color: var(--accent);
  border: none;
  border-radius: 0.6em;

  &:hover,
  &:focus-visible {
    text-decoration: none;
    background-color: var(--accent);
    color: var(--bg1);
  }

  &:active {
    background-color: var(--accent);
    color: var(--bg2);
  }

  &[aria-pressed=true],
  &:has(:checked) {
    background-color: var(--accent);
    color: var(--bg2);
  }

  &:where(.osd) {
    background: lch(from var(--accent-color) 6 20 h / .6);
    color: lch(from var(--accent-color) 92 10 h);
  }
}

textarea {
  min-height: 4em;
}

a,
.\<a\> {
  color: currentColor;
  text-decoration: 1px dashed var(--accent) underline;

  &:hover,
  &:focus-visible {
    color: var(--accent);
    text-decoration: 2px solid var(--fg2) underline;
  }
}

td,
th {
  border-block-end: 1px solid var(--bg2);
}

.\<small\> {
  color: var(--fg2);
}

.face {
  border-radius: 9999em;
  border: 2px solid var(--bg1);
}

header.h-card {
  .p-name {
    color: var(--accent);
  }

  .u-featured {
    display: block;

    /* full bleed */
    width: 100vw;
    margin-left: calc(50% - 50vw);

    max-width: none;
    max-height: 45vh;
    object-fit: cover;
    margin-block: 0;
  }

  &:has(.u-featured) {
    margin-block-start: 0;
    .u-photo {
      font-size: 10rem;
      margin-block-start: -6rem;
      border: .5rem solid var(--bg1);
    }
  }
}

:host(image-upload) {
  .thumb {
    border-radius: 0.6rem;
    overflow: clip;
  }

  .thumb-action {
    margin: .25rem;
    border-radius: calc(0.6rem - .25rem);
  }
}