@layer reset {
  /*
    Modified CSS reset, originally by Eric A. Meyer
    https://meyerweb.com/eric/tools/css/reset/
  */

  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
  acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong,
  sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
  caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure,
  figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio,
  video, button, input, textarea {
    margin: 0;
    padding: 0;
    border: none;
    border-style: none;
    outline: none;
    font-size: 1rem;
    font: inherit;
    vertical-align: baseline;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    background-color: transparent;
  }

  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
  }

  body {
    line-height: 1;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
}

@layer elements {
  body {
    color: var(--color-foreground);
    background-color: var(--color-background);
    font-family: 'Faculty Glyphic', sans-serif;
  }

  body > div {
    margin: 1.5rem auto;
    width: min(900px, calc(100vw - 3rem));
  }

  ::selection {
    color: var(--color-background);
    background-color: var(--color-accent);
  }

  header, form {
    user-select: none;
  }

  header:not(:first-child),
  main:not(:first-child),
  footer:not(:first-child),
  div:not(:first-child),
  form:not(:first-child),
  nav:not(:first-child) {
    margin-top: 2rem;
  }

  header:not(:last-child),
  main:not(:last-child),
  footer:not(:last-child),
  div:not(:last-child),
  form:not(:last-child),
  nav:not(:last-child) {
    margin-bottom: 2rem;
  }

  p:not(:last-child),
  h1:not(:last-child),
  h2:not(:last-child),
  h3:not(:last-child),
  h4:not(:last-child),
  h5:not(:last-child),
  h6:not(:last-child),
  ol:not(:last-child),
  ul:not(:last-child),
  li:not(:last-child) {
    margin-bottom: 0.75rem;
  }

  li {
    margin-left: calc(1em + 1rem);
  }

  h1 {
    margin-top: 2.25rem;
    font-size: 1.75rem;
  }

  h2 {
    margin-top: 2rem;
    font-size: 1.5rem;
  }

  h3 {
    margin-top: 1.75rem;
    font-size: 1.25rem;
  }

  h4 {
    margin-top: 1.625rem;
    font-size: 1.125rem;
  }

  h1, h2, h3, h4, h5, h6, b, strong {
    font-weight: bold;
  }

  i, em {
    font-style: italic;
  }

  a, button {
    color: var(--color-accent);
    cursor: pointer;
  }

  a:active, a:hover,
  button:active, button:hover {
    color: rgb(from var(--color-accent) r g b / var(--hover-opacity));
  }

  a:focus-visible,
  button:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: var(--border-width);
  }

  input, textarea {
    display: inline-block;
    padding: 8px 10px;
    max-width: 300px;
    border: var(--border-width) solid var(--color-border-hard);
    border-radius: var(--border-radius);
    color: var(--color-foreground);
  }

  input:hover, input:focus-visible,
  textarea:hover, textarea:focus-visible {
    border-color: var(--color-accent);
  }

  .icon, .thumbnail {
    display: inline-block;
    width: var(--icon-size);
    height: var(--icon-size);
  }

  .icon {
    background-color: currentcolor;
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
    -webkit-mask-size: cover;
    mask-size: cover;
  }

  .thumbnail {
    object-fit: contain;
  }

  form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  label {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  thead {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  th, td {
    padding: 0.75rem;
    vertical-align: middle;
    border-bottom: var(--border-width) solid var(--color-border-soft);
  }
}

@layer navigation {
  nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  nav div {
    margin: 0;
  }

  nav div:nth-child(2) {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
}

@layer login {
  .login-error {
    color: var(--color-red);
  }
}

@layer file {
  .file-list {
    user-select: none;
  }

  .file-list th:nth-child(2),
  .file-list td:nth-child(2) {
    text-align: left;
    width: 100%;
  }

  .file-list th:not(:nth-child(2)) {
    text-align: center;
  }

  .file-list td:not(:nth-child(2)) {
    text-align: right;
    text-wrap: nowrap;
  }

  @media screen and (max-width: 550px) {
    .file-list th:nth-child(4),
    .file-list td:nth-child(4) {
      display: none;
    }
  }

  @media screen and (max-width: 650px) {
    .file-list th:nth-child(3),
    .file-list td:nth-child(3) {
      display: none;
    }
  }
}

@layer progress {
  .progress {
    height: 1rem;

    border-radius: var(--border-radius);
    overflow: hidden;

    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    justify-content: start;
  }

  .progress > div {
    margin: 0;
    transition: width 0.1s;
  }

  .progress-none {
    background-color: var(--color-red);
  }

  .progress-sent {
    background-color: var(--color-amber);
  }

  .progress-confirmed {
    background-color: var(--color-green);
  }
}

@layer edit {
  .edit textarea {
    width: 100%;
    max-width: 100%;
  }
}

:root {
  --color-background: #101010;
  --color-border-soft: #202020;
  --color-border-hard: #404040;
  --color-foreground: #ffffff;
  --color-accent: var(--color-red); /* meta theme-color */
  --color-red: #c41717;
  --color-amber: #ca9c1d;
  --color-green: #1a7a06;
  --border-radius: 10px;
  --border-width: 2px;
  --hover-opacity: 0.75;
  --background-opacity: 0.95;
  --icon-size: 24px;
}