@font-face {
  font-family: "Bricolage Grotesque";
  src: url('/fonts/BricolageGrotesque[opsz,wdth,wght].woff2') format('woff2');
}

:root {
  --font-main: semi-condensed 1em "Bricolage Grotesque", sans-serif;
  --font-logo: expanded 1em "Bricolage Grotesque", sans-serif;
  
  --color-fg: white;
  --color-bg-accent: indianred;
  --color-bg-logo: black;
  --color-fg-logo: #14f796;
  --color-fg-cash: yellowgreen;
  
  font: var(--font-main);
  
  font-size-adjust: .5;
}

.v-hide {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.x-container {
  max-width: min(70em, calc(100% - 2em));
  margin: auto;
}

.site-header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  margin-block-end: 2em;
  
  .title {
    display: contents;
    font-weight: 400;
    
    .username {
      img {
        vertical-align: middle;
      }
    }
  }
}

.site-logo {
  display: inline-block;
  
  font: var(--font-logo);
  font-weight: 900;
  line-height: 1;
  
  background: var(--color-bg-logo);
  color: var(--color-fg-logo);
}

.social-links {
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
  a {
    color: var(--color-fg);
  }
  a:not(:hover, :focus-visible) {
    text-decoration: none;
  }
}

.site-footer {
  margin-block: 6em;
  color: lch(from var(--color-fg) l c h / 50%);
  a {color: lch(from var(--color-fg) l c h / 80%);}
}

.switcher-buttons {
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
  
  .button {
    font-size: 1.2em;
    font-stretch: expanded;
    padding: .2em .4em;
    color: var(--color-fg);
    &:not(:hover, :focus-visible) { text-decoration: none; }

    &[aria-current] {
      background: lch(from var(--color-bg-accent) 50 c h / 50%);
    }
  }
}

.main-table {
  width: 100%;
  font-size: 1.3em;
  border-collapse: collapse;
  
  :where(th) {
    text-align: start;
    font-stretch: condensed;
    font-weight: 500;
  }
  
  th, td {
    padding-block: 1em;
  }
  
  td {
    border-block: 1px solid #fffa;
  }
}

.item-price {
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-cash);
}

.item-code {
  display: inline-block;
  word-break: break-all;
  font-size: .8em;
  
  background: lch(from var(--color-bg-accent) l c h / 30%);
  padding: .2em .4em;
  border-radius: .2em;
  text-align: start;
  
  position: relative;
  
  &:not(:hover) .copy {
    display: none;
  }
  
  .copy {
    background: var(--color-fg);
    color: var(--color-bg-accent);
    font-weight: bold;
    border: none;
    border-radius: inherit;

    position: absolute;
    right: .2em; bottom: .2em;
    
    font-family: inherit;
    
    transition: background 1s ease;
    
    &:active {
      background: lch(from var(--color-bg-accent) 90 c h);
      transition: none;
    }
  }
}

.row-title {
  font-weight: bold;
  font-stretch: expanded;
  font-size: 1.1em;
}

.help-dialog {
  box-shadow: 0 .5em 2em #000a;
  border: 1px solid #fff5;
  border-radius: .6em;
  padding: 1em 2em;
  overflow: visible;
  
  font-size: 1rem;
  text-align: start;
  font-weight: 400;
  font-stretch: normal;
  
  h2 {
    margin-block-start: 1rem;
  }
  
  .close {
    position: absolute;
    top: -2em;
    right: 0;
    
    border: none;
    background: #fff2;
    border-radius: 999em;
    
    font-family: inherit;
    font-weight: bold;
    font-stretch: expanded;
    
    &:hover, &:focus-visible {
      background: #fff5;
    }
  }
  
  &::backdrop {
    background: #000a;
  }
}

.text-align\:end {text-align:end}