@font-face {
  font-family: "NotoSans";
  src: url("/assets/NotoSans-Regular-88793d4c.ttf") format("truetype"), url("/assets/NotoSans-Italic-916abfe0.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "MaterialSymbolsOutlined";
  src: url("/assets/MaterialSymbolsOutlined-Regular-b9efe045.ttf") format("truetype");
  font-display: swap;
}
.material-symbols-outlined {
  font-family: MaterialSymbolsOutlined;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* Text */
.text-xx-small {
  font-size: var(--font-size-xxs);
}

.text-x-small {
  font-size: var(--font-size-xs);
}

.text-small {
  font-size: var(--font-size-s);
}

.text-x-large {
  font-size: var(--font-size-xl);
}

.text-align-center {
  text-align: center;
}

.text-balance {
  text-wrap: balance;
}

.text-create {
  color: var(--color-create);
}

.text-currency {
  color: var(--color-currency);
}

.text-destroy {
  color: var(--color-destroy);
}

/* Flexbox and Grid */
.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-self-end {
  justify-self: flex-end;
}

.align-items-center {
  align-items: center;
}

.align-items-baseline {
  align-items: baseline;
}

.align-self-end {
  align-self: end;
}

.place-content-center {
  place-content: center;
}

.place-items-center {
  place-items: center;
}

.place-self-center {
  place-self: center;
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-item-grow {
  flex-grow: 1;
}

.gap {
  column-gap: var(--space-m);
  row-gap: var(--space-m);
}

.gap-half {
  column-gap: var(--space-xs);
  row-gap: var(--space-xs);
}

/* Overflow */
.overflow-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Padding */
.pad {
  padding: var(--space-m) var(--space-xs);
}

/* Border radius */
.border-radius {
  border-radius: var(--border-radius-m);
}

/* Custom colors */
.color--normal {
  color: var(--color-base-variant);
}

.color--holofoil {
  color: var(--color-holofoil-variant);
}

.color--reverse-holofoil {
  color: var(--color-parallel-variant);
}

.color--energy-reverse-holofoil {
  color: var(--color-parallel-variant);
}

.color--pokeball-reverse-holofoil {
  color: var(--color-pokeball-variant);
}

.color--masterball-reverse-holofoil {
  color: var(--color-masterball-variant);
}

.color--friendball-reverse-holofoil {
  color: var(--color-pokeball-variant);
}

.color--loveball-reverse-holofoil {
  color: var(--color-pokeball-variant);
}

.color--quickball-reverse-holofoil {
  color: var(--color-pokeball-variant);
}

.color--rocket-reverse-holofoil {
  color: var(--color-pokeball-variant);
}

.color--duskball-reverse-holofoil {
  color: var(--color-pokeball-variant);
}

/* Uncategorised */
.aspect-trading-card {
  aspect-ratio: var(--aspect-trading-card);
}

@media (pointer: coarse) {
  .hide-on-touch {
    display: none;
  }
}

.pile {
  display: grid;
  grid: [stack] 1fr/[stack] 1fr;
}
.pile > * {
  grid-area: stack;
}

.m-auto {
  margin: auto;
}

.screen-reader-only {
  position: absolute;
  top: -40px;
  left: 1rem;
  background: var(--color-canvas);
  color: var(--color-ink);
  padding: 0.5em 1.1em;
  z-index: 100;
  transition: top 0.3s;
}
.screen-reader-only:focus {
  top: 1rem;
}

:root {
  --font-family-sans: NotoSans;
  --font-family-mono: ui-monospace, monospace;
  --line-height-headers: 1.1;
  --line-height-body: 1.5;
  --font-size-xxs: 0.55rem;
  --font-size-xs: 0.75rem;
  --font-size-s: 0.875rem;
  --font-size-m: 1rem;
  --font-size-l: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-xxl: 1.5rem;
  --font-size-xxxl: 2rem;
  --font-size-xxxxl: 2.5rem;
  --space-xxxs: 0.25rem;
  --space-xxs: 0.375rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 2.5rem;
  --space-xxxl: 3rem;
  --space-xxxxl: 4rem;
  --aspect-trading-card: 63 / 88;
  --color-canvas: hsl(213 18% 10%);
  --color-ink: hsl(198 100% 96%);
  --color-ink-rotate: hsl(198 100% 90%);
  --color-ink-muted: hsl(0 0% 70%);
  --color-primary: oklch(0.33 0.02 251.87);
  --color-primary-rotate: oklch(25.33% 0.016 252.42);
  --color-secondary: oklch(48% 0.233 277.117);
  --color-create: oklch(76% 0.177 163.223);
  --color-currency: oklch(76% 0.177 163.223);
  --color-destroy: oklch(71% 0.194 13.428);
  --color-base-variant: oklch(76.8% 0.233 130.85);
  --color-holofoil-variant: oklch(69.6% 0.17 162.48);
  --color-parallel-variant: oklch(68.5% 0.169 237.323);
  --color-pokeball-variant: oklch(70.4% 0.191 22.216);
  --color-masterball-variant: oklch(66.7% 0.295 322.15);
  --color-colorless-type: #D2D0CF;
  --color-darkness-type: #2E7077;
  --color-dragon-type: #948F31;
  --color-fairy-type: #D6457E;
  --color-fighting-type: #B16232;
  --color-fire-type: #D8223B;
  --color-grass-type: #19A648;
  --color-lightning-type: #FCD021;
  --color-metal-type: #9B9E8C;
  --color-psychic-type: #957DAB;
  --color-water-type: #05A8D9;
  --border-radius-s: 0.25rem;
  --border-radius-m: 0.375rem;
  --border-radius-l: 0.5rem;
  --border-radius-xl: 0.75rem;
  --border-radius-xxl: 1rem;
  --border-radius-xxxl: 2rem;
  --shadow-l: 2px 4px 10px hsl(0 0% 0% / 0.1);
  --shadow-s: 1px 3px 6px hsl(0 0% 0% / 0.1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
dialog,
fieldset,
figure,
p {
  margin: 0;
  padding: 0;
}

html {
  overflow-y: scroll;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background-color: var(--color-canvas);
  color: var(--color-ink);
  line-height: var(--line-height-body);
  font-family: var(--font-family-sans);
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-ink);
  line-height: var(--line-height-headers);
}

h1 {
  font-size: var(--font-size-xxxl);
}

h2 {
  font-size: var(--font-size-xxl);
}

h3 {
  font-size: var(--font-size-xl);
}

h4 {
  font-size: var(--font-size-l);
}

hr {
  border-color: var(--color-primary);
}

a {
  color: var(--color-ink);
  text-decoration: none;
  transition: color 200ms;
}
a:hover, a:focus, a:focus-within, a:active {
  color: var(--color-ink-rotate);
}

dialog, fieldset {
  border: none;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  * {
    scrollbar-color: #C1C1C1 transparent;
    scrollbar-width: thin;
  }
}
.avatar {
  --avatar-size: 128px;
  border-radius: 50%;
  box-shadow: var(--shadow-l);
  font-size: var(--font-size-xl);
  height: var(--avatar-size);
  width: var(--avatar-size);
}
.avatar--letter {
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar--s {
  --avatar-size: 64px;
  font-size: var(--font-size-m);
}
.avatar--l {
  --avatar-size: 256px;
  font-size: var(--font-size-xxxl);
}

.btn {
  align-items: center;
  display: inline-flex;
  gap: var(--space-xxs);
  padding: var(--space-xxs) var(--space-m);
  border-radius: var(--border-radius-m);
  background-origin: border-box;
  background-color: transparent;
  border: solid 2px transparent;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: filter 200ms, color 200ms;
}
.btn:hover, .btn:focus, .btn:focus-within, .btn:active {
  transition: filter 250ms, color 200ms;
}
.btn--primary {
  color: var(--color-ink);
  background-color: var(--color-primary);
}
.btn--secondary {
  color: var(--color-ink);
  background-color: var(--color-secondary);
}
.btn--link {
  color: var(--color-ink);
  white-space: nowrap;
}
.btn--menu {
  color: var(--color-ink);
  padding: var(--space-m);
}
.btn--menu:hover, .btn--menu:focus, .btn--menu:focus-within, .btn--menu:active {
  background-color: var(--color-primary);
}
.btn--circle {
  padding: var(--space-xs);
  border-radius: var(--border-radius-xxxl);
}

.card-variant-manager {
  display: flex;
  flex-direction: column;
}
.card-variant-manager--other {
  margin-top: var(--space-s);
}
.card-variant-manager__variant {
  background-color: var(--color-primary-rotate);
  padding: var(--space-m);
  display: grid;
  column-gap: var(--space-m);
  place-items: start;
}
.card-variant-manager__variant-name {
  font-size: var(--font-size-s);
  font-weight: bold;
}
.card-variant-manager__variant-description {
  color: var(--color-ink-muted);
  font-size: var(--font-size-xxs);
}
.card-variant-manager__variant-price {
  color: var(--color-currency);
  font-size: var(--font-size-xxs);
  font-weight: bold;
}
.card-variant-manager__variant-controls {
  font-size: var(--font-size-s);
  grid-row: 1/span 3;
  grid-column-start: 2;
  place-self: center flex-end;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.custom-list-empty-card {
  padding: var(--space-m);
}
.custom-list-empty-card__heading {
  margin-bottom: var(--space-s);
}
.expansion-symbol {
  height: var(--space-l);
}
.expansion-symbol--shortcode {
  background-color: var(--color-canvas);
  font-family: var(--font-family-mono);
  border: var(--space-xxxs) double var(--color-primary);
  border-radius: var(--border-radius-s);
  display: flex;
  align-items: center;
  font-size: var(--font-size-xs);
  padding: 0 var(--space-xxxs);
}

.filter__heading {
  font-size: var(--font-size-l);
  font-weight: bold;
}

.quick-filter:has(input[type=checkbox]:checked) label:has(+ input[type=checkbox]:not(:checked)), .quick-filter:has(input[type=radio]:checked) label:has(+ input[type=radio]:not(:checked)) {
  background-color: var(--color-canvas);
}
.quick-filter:has(input[type=checkbox]:checked) label:has(+ input[type=checkbox]:not(:checked)) .btn--primary, .quick-filter:has(input[type=radio]:checked) label:has(+ input[type=radio]:not(:checked)) .btn--primary {
  background-color: var(--color-canvas);
}

body:has(dialog:modal) {
  overflow: hidden;
}

.modal {
  background-color: var(--color-canvas);
  border-radius: 0 0 var(--border-radius-l) var(--border-radius-l);
  box-shadow: var(--shadow-l);
  color: var(--color-ink);
  min-width: calc(100vw - 2rem);
  padding: var(--space-m);
  place-self: start center;
}
@media (min-width: 50rem) {
  .modal {
    min-width: 40rem;
  }
}
.modal::backdrop {
  background-color: rgba(0, 0, 0, 0.66);
}

.input {
  accent-color: var(--color-ink);
  background-color: transparent;
  border-radius: var(--border-radius-m);
  border: 1px solid var(--color-primary);
  color: var(--color-ink);
  padding: var(--input-padding, var(--space-s) var(--space-m));
  resize: none;
}
.input--select {
  --input-padding: var(--space-s) var(--space-xl) var(--space-s) var(--space-s);
  --caret-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--caret-icon);
  background-size: 0.5em;
  background-position: center right 0.9em;
  background-repeat: no-repeat;
  text-align: start;
}
.input--select option {
  background-color: var(--color-canvas);
  color: var(--color-ink);
}

.input-group {
  display: inline-flex;
  gap: 1rem;
}

label.pile {
  --input-padding: var(--space-s) var(--space-m) var(--space-s) var(--space-xxxl);
}
label.pile .material-symbols-outlined {
  align-self: center;
  margin-left: 1rem;
  width: fit-content;
}
label.pile {
  margin-bottom: unset;
}

/* Checkboxes */
.checkbox {
  appearance: none;
  background-color: var(--color-canvas);
  block-size: 1.25em;
  border: 2px solid color-mix(in oklch, var(--checkbox-color, var(--color-canvas)), black 25%);
  border-radius: 0.33em;
  color: currentColor;
  cursor: pointer;
  display: grid;
  font: inherit;
  inline-size: 1.25em;
  margin: 0;
  place-content: center;
  transform: translateY(0.1em);
}
.checkbox::before {
  background-color: CanvasText;
  block-size: 0.65em;
  box-shadow: inset 1em 1em currentColor;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  content: "";
  inline-size: 0.65em;
  transform: scale(0);
  transform-origin: center;
  transition: transform 200ms ease-in-out;
}
.checkbox:checked::before {
  transform: scale(1) rotate(10deg);
}
.checkbox:checked {
  border-width: 1px;
  background-color: var(--checkbox-color, var(--color-canvas));
}
.checkbox:where([disabled]):not(:hover):not(:active) {
  filter: none;
  opacity: 0.75;
}

.my-menu {
  display: flex;
  justify-content: center;
}
.my-menu__logo {
  display: flex;
  align-items: center;
}
.my-menu__logo-image {
  aspect-ratio: 1.2/1;
  stroke: var(--color-ink);
  height: 2.5rem;
}
.my-menu__logo-tcg {
  font-size: var(--font-size-xl);
  font-weight: bold;
}
.my-menu__logo-tracker {
  font-size: var(--font-size-xs);
}
.my-menu__details {
  cursor: pointer;
  grid-column: span 3/span 3;
}
.my-menu__details-heading {
  display: flex;
  justify-content: space-between;
  padding: var(--space-m);
}
.my-menu__details-heading:hover {
  background-color: var(--color-primary);
}
.my-menu__details-list {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: var(--space-m);
}
.my-menu__details-list a {
  width: 100%;
}

.expansion-tile--with-banner .expansion-tile__figure, .trading-card__image-container {
  display: grid;
  grid: [stack] 1fr/[stack] 1fr;
}
.expansion-tile--with-banner .expansion-tile__figure > *, .trading-card__image-container > * {
  grid-area: stack;
}

.trading-card {
  place-self: center;
  max-width: 300px;
  width: 100%;
}
.trading-card__image {
  aspect-ratio: var(--aspect-trading-card);
  border-radius: var(--border-radius-m);
  width: 100%;
}
.trading-card__quick-add-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxxs);
  padding: var(--space-xs);
}

.trading-card-variant__name {
  font-size: var(--font-size-xs);
}
.trading-card-variant__description {
  font-size: var(--font-size-xxs);
}

.checkbox--normal {
  --checkbox-color: var(--color-base-variant);
}

.checkbox--holofoil {
  --checkbox-color: var(--color-holofoil-variant) ;
}

.checkbox--reverse-holofoil {
  --checkbox-color: var(--color-parallel-variant) ;
}

.checkbox--energy-reverse-holofoil {
  --checkbox-color: var(--color-parallel-variant) ;
}

.checkbox--pokeball-reverse-holofoil {
  --checkbox-color: var(--color-pokeball-variant) ;
}

.checkbox--masterball-reverse-holofoil {
  --checkbox-color: var(--color-masterball-variant) ;
}

.checkbox--friendball-reverse-holofoil {
  --checkbox-color: var(--color-pokeball-variant) ;
}

.checkbox--loveball-reverse-holofoil {
  --checkbox-color: var(--color-pokeball-variant) ;
}

.checkbox--quickball-reverse-holofoil {
  --checkbox-color: var(--color-pokeball-variant) ;
}

.checkbox--rocket-reverse-holofoil {
  --checkbox-color: var(--color-pokeball-variant) ;
}

.checkbox--duskball-reverse-holofoil {
  --checkbox-color: var(--color-pokeball-variant) ;
}

[popover] {
  background-color: var(--color-canvas);
  border-radius: var(--border-radius-l) var(--border-radius-l) 0 0;
  color: var(--color-ink);
  max-height: calc(100vh - 15rem);
  min-width: 100%;
  padding: var(--space-m);
  place-self: end center;
}
@media (min-width: 50rem) {
  [popover] {
    border-radius: var(--border-radius-m);
    min-width: 40rem;
    place-self: center;
    box-shadow: var(--shadow-l);
  }
}
[popover]::backdrop {
  background-color: rgba(0, 0, 0, 0.66);
}

.price-history-chart {
  height: 25rem;
  width: stretch;
}
.price-history-chart__fieldset {
  background-color: var(--color-primary-rotate);
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(2, 1fr);
  max-width: 20rem;
  padding: var(--space-xs);
}

:root {
  --color-progress-base: oklch(0.48 0.233 277.117);
  --color-progress-reverse: oklch(0.65 0.241 354.308);
  --color-progress-reverse-alt: oklch(0.74 0.16 232.661);
  --color-progress-complete: oklch(0.76 0.177 163.223);
}

.progress {
  display: flex;
  align-items: center;
}
.progress__bar::-webkit-progress-bar {
  background-color: color-mix(in oklab, currentcolor 20%, transparent);
}
.progress__bar::-moz-progress-bar {
  background-color: currentcolor;
}
.progress__bar::-webkit-progress-value {
  background-color: currentcolor;
}
.progress__bar {
  appearance: none;
  border-radius: var(--border-radius-s);
  flex-grow: 1;
  overflow: hidden;
  position: relative;
  height: var(--space-xs);
}
.progress__bar--s {
  height: var(--space-xxxs);
}
.progress__bar--l {
  height: var(--space-m);
}
.progress__bar--base {
  color: var(--color-progress-base);
}
.progress__bar--reverse {
  color: var(--color-progress-reverse);
}
.progress__bar--reverse-alt {
  color: var(--color-progress-reverse-alt);
}
.progress__bar--complete {
  color: var(--color-progress-complete);
}
.progress__percent-complete {
  font-size: var(--font-size-xs);
  text-align: end;
  width: var(--space-xl);
}

.skip-link {
  position: absolute;
  top: -40px;
  left: var(--space-m);
  background: var(--color-canvas);
  color: var(--color-ink);
  padding: var(--space-xs) var(--space-m);
  z-index: 100;
  transition: top 0.3s;
}
.skip-link:focus {
  top: var(--space-m);
}

.stat {
  background-color: var(--color-primary-rotate);
  padding: var(--space-m);
  display: inline-grid;
  place-items: start;
}
.stat--centered {
  place-items: center;
}
.stat__title {
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
}
.stat__value {
  font-weight: bold;
}
.stat__figures {
  display: inline-flex;
  gap: var(--space-xxxs);
  grid-row: 1/span 3;
  grid-column-start: 2;
  place-self: center flex-end;
}

[role=tablist] {
  color: var(--color-ink);
}

[role=tab][aria-selected=true] {
  text-decoration: underline;
}

a .tile:hover, a .session-tile:hover, a .series-tile:hover, a .menu-tile:hover, a .friend-tile:hover, a .expansion-tile:hover, a .custom-list-tile:hover, a .tile:focus, a .session-tile:focus, a .series-tile:focus, a .menu-tile:focus, a .friend-tile:focus, a .expansion-tile:focus, a .custom-list-tile:focus, a .tile:focus-within, a .session-tile:focus-within, a .series-tile:focus-within, a .menu-tile:focus-within, a .friend-tile:focus-within, a .expansion-tile:focus-within, a .custom-list-tile:focus-within, a .tile:active, a .session-tile:active, a .series-tile:active, a .menu-tile:active, a .friend-tile:active, a .expansion-tile:active, a .custom-list-tile:active {
  background-color: var(--color-primary);
}

.tile, .session-tile, .series-tile, .menu-tile, .friend-tile, .expansion-tile, .custom-list-tile {
  background-color: var(--color-primary-rotate);
  border-radius: var(--border-radius-m);
}

.custom-list-tile {
  display: flex;
  flex-direction: column;
  height: stretch;
  padding: var(--space-s);
  border-radius: 0;
}
@media (min-width: 50rem) {
  .custom-list-tile {
    border-radius: var(--border-radius-m);
  }
}
.custom-list-tile__figure {
  display: flex;
  gap: var(--space-xs);
}
.custom-list-tile__figure-caption {
  font-weight: bold;
}
.custom-list-tile__description {
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
}
.custom-list-tile__card-count {
  display: flex;
  flex-grow: 1;
  align-items: end;
  font-size: var(--font-size-xs);
  font-style: italic;
  margin-top: var(--space-xs);
}

.expansion-tile {
  padding: var(--space-s);
  display: grid;
  height: 100%;
  column-gap: var(--space-xs);
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "figure details" "progression progression";
}
.expansion-tile--with-banner {
  padding: 0;
  column-gap: 0;
  grid-template-areas: "figure details" "figure progression";
}
.expansion-tile--with-banner .expansion-tile__figure {
  aspect-ratio: 1.5/2;
  height: calc(10rem + var(--space-s));
}
.expansion-tile--with-banner .expansion-tile__figure-banner {
  border-radius: var(--border-radius-m);
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
}
.expansion-tile--with-banner .expansion-tile__figure-logo {
  opacity: 1;
  place-self: end center;
  z-index: 1;
}
.expansion-tile--with-banner .expansion-tile__details {
  padding: var(--space-s);
}
.expansion-tile--with-banner .expansion-tile__progression {
  padding: var(--space-s);
}
.expansion-tile__figure {
  grid-area: figure;
}
.expansion-tile__figure-logo {
  width: 100px;
  height: 65px;
  object-fit: scale-down;
}
.expansion-tile__details {
  grid-area: details;
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs);
}
.expansion-tile__name {
  font-weight: bold;
}
.expansion-tile__release-date {
  font-size: var(--font-size-xs);
  font-style: italic;
}
.expansion-tile__coming-soon {
  place-self: end start;
  padding: var(--space-s);
}
.expansion-tile__progression {
  grid-area: progression;
}
.expansion-tile__progression--none {
  color: var(--color-ink-muted);
}

.friend-tile {
  display: flex;
  flex-direction: column;
  padding: var(--space-s);
  border-radius: 0;
}
@media (min-width: 50rem) {
  .friend-tile {
    border-radius: var(--border-radius-m);
  }
}
.friend-tile__figure {
  display: flex;
  gap: var(--space-xs);
}
.friend-tile__figure-caption {
  font-weight: bold;
}
.friend-tile__ctas {
  align-self: end;
  display: flex;
  gap: var(--space-xs);
}

.menu-tile {
  padding: var(--space-s) var(--space-m);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.series-tile {
  padding: var(--space-s);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.series-tile__release-date {
  font-size: var(--font-size-xs);
  font-style: italic;
}
.series-tile__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.series-tile__figure-caption {
  font-weight: bold;
}
.series-tile__figure-image {
  aspect-ratio: 1.6/1;
  object-fit: scale-down;
  height: 80px;
}

.session-tile {
  border-radius: 0;
  padding: var(--space-l);
}
@media (min-width: 50rem) {
  .session-tile {
    max-width: 50rem;
    margin: 0 auto;
    border-radius: var(--border-radius-m);
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.container {
  width: 100%;
}
@media (min-width: 50rem) {
  .container {
    max-width: 50rem;
  }
}
@media (min-width: 75rem) {
  .container {
    max-width: 75rem;
  }
}

.header-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-m);
}

.header {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "actions-start actions-end" "hgroup hgroup";
}
@media (min-width: 50rem) {
  .header {
    grid-template-columns: 80px auto 80px;
    grid-template-areas: "actions-start hgroup actions-end";
    margin: 0 auto;
  }
}
.header__heading-group {
  grid-area: hgroup;
  text-align: center;
}
.header__action {
  place-content: center;
  grid-area: actions-start;
  justify-self: flex-start;
}
.header__action--end {
  grid-area: actions-end;
  justify-self: flex-end;
}

.grid {
  display: grid;
  gap: var(--space-xs);
}
.grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--card-stats {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  padding: var(--space-xs);
}
@media (min-width: 50rem) {
  .grid--card-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 75rem) {
  .grid--card-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.grid--cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: var(--space-xs);
}
@media (min-width: 50rem) {
  .grid--cards {
    gap: var(--space-m);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 75rem) {
  .grid--cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.grid--custom-lists {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 50rem) {
  .grid--custom-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-xs);
  }
}
@media (min-width: 75rem) {
  .grid--custom-lists {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.grid--expansions {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  padding: var(--space-xs);
}
@media (min-width: 50rem) {
  .grid--expansions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 75rem) {
  .grid--expansions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.grid--friends {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 50rem) {
  .grid--friends {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-xs);
  }
}
@media (min-width: 75rem) {
  .grid--friends {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.grid--series {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  padding: var(--space-xs);
}
@media (min-width: 50rem) {
  .grid--series {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 75rem) {
  .grid--series {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/*# sourceMappingURL=/assets/application-9b3ef0ac.css.map */