/* Generated by design/_tools/make_web_css.py from design/web/tokens.json and component-sizes.json. Do not edit by hand. */

@font-face {
  font-family: "IRANSansXFaNum";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/IRANSansXFaNum-Light.woff2") format("woff2");
}

@font-face {
  font-family: "IRANSansXFaNum";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/IRANSansXFaNum-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "IRANSansXFaNum";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/IRANSansXFaNum-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "IRANSansXFaNum";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/IRANSansXFaNum-DemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "IRANSansXFaNum";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/IRANSansXFaNum-Bold.woff2") format("woff2");
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* The page is the size container that --px is measured against (see tokens.css). */
  container-type: inline-size;
}

#app {
  min-block-size: 100vh;
  background: var(--page-background);
  color: var(--color-gray-20);
  font-family: var(--font-family);
  font-weight: 400;
  line-height: var(--line-height);
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
  padding: 0;
  font: inherit;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

input,
textarea,
select {
  margin: 0;
  font: inherit;
  color: inherit;
}

img,
svg {
  display: block;
}

/* Scrollable areas scroll normally and show no scrollbar (owner's answer 2). They can take keyboard focus. */
.scroll-area {
  overflow: auto;
  scrollbar-width: none;
}

.scroll-area::-webkit-scrollbar {
  display: none;
}

/* A drawing used as a shape: the image is the mask, the colour comes from the component. */
.icon {
  display: block;
  background-color: currentColor;
  mask: var(--icon) center / 100% 100% no-repeat;
  -webkit-mask: var(--icon) center / 100% 100% no-repeat;
}

/* The frame of the design, centred in a band that runs from edge to edge: what is inside is placed from its inline start. */
.design-frame {
  position: relative;
  inline-size: var(--page-design-width);
  margin-inline: auto;
}

/* The frame as tall as the band it stands in, for a band that has a height of its own. */
.design-frame.tall {
  block-size: 100%;
}

/* A text that keeps the line breaks of the design: every line is a box as tall as the line pitch, which the component names. */
.lines > span {
  display: block;
  block-size: var(--line-pitch);
  white-space: pre;
}

/* An element placed by a box of the design; boxes.css names the box (class `box-<component>-<name>`). */
.at {
  position: absolute;
  inset-inline-start: var(--box-start);
  inset-inline-end: var(--box-end);
  inset-block-start: var(--box-top);
  inline-size: var(--box-width);
  block-size: var(--box-height);
}

/* A picture that fills the box of the element around it: a drawing as it is, a photo from its middle (what does not fit is cut off). */
.fill,
.cover {
  inline-size: 100%;
  block-size: 100%;
}

.cover {
  object-fit: cover;
}

/* A box without a fill whose outline throws the shadow, so that the shadow is the one of a ring: the outline lies in a layer
   of its own over the box, and what the box holds is measured from its outer edge. The component names the outline
   (--outline: width, kind and colour) and, where it is not the usual one, what the outline throws (--outline-effect).
   `outlined-on-phone` is the same for a box that has its outline in the mobile design only. */
.outlined::before {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--outline);
  border-radius: inherit;
  filter: var(--outline-effect, drop-shadow(var(--shadow-lg-gray-89)));
  pointer-events: none;
}

/* A radio button or a box to tick of the browser that takes the press over a drawing of the design (ChoiceRing, a drawn
   box): it is there for the keyboard and for screen readers and is not drawn itself. It weighs nothing (`:where`), so a
   component can add to it. */
:where(.drawn-control) {
  margin: 0;
  appearance: none;
  cursor: inherit;
}

/* Shown in one of the two layouts only (a text or a control that differs between the desktop and the mobile design). */
.on-phone {
  display: none;
}

@media (max-width: 767.98px) {
  .mobile .outlined-on-phone::before {
    content: "";
    position: absolute;
    inset: 0;
    border: var(--outline);
    border-radius: inherit;
    filter: var(--outline-effect, drop-shadow(var(--shadow-lg-gray-89)));
    pointer-events: none;
  }

  .mobile .on-desktop {
    display: none;
  }

  .mobile .on-phone {
    display: revert;
  }

  /* A picture is a block in both layouts (the rule above would hand it back to the browser, which sets it in a line of text). */
  .mobile img.on-phone,
  .mobile svg.on-phone {
    display: block;
  }

  /* A control drawn smaller than the minimum touch target keeps its size; the area that reacts grows around it.
     A placed element (`at`) is positioned already and keeps its place, and so does a control that its component
     places itself: the rule weighs no more than one class (`:where`), so the rule of the component wins. Written
     with its full weight (batch 3 to batch 6) it took the logo and the search button of the mobile header out
     of their places, and the logo, a link without a width of its own, did not show. */
  .mobile :where(.touch-target:not(.at)) {
    position: relative;
  }

  /* The heading of a section in the phone layout of what the mobile design does not draw (design/_tools/pages/phone.py):
     it stands in the flow of the page, one distance below what is above it, at the side margin. On the desktop the
     same element is placed by its box. */
  .mobile .phone-heading {
    position: static;
    inline-size: auto;
    block-size: auto;
    padding-block-start: var(--phone-layout-gap);
    padding-inline: var(--phone-layout-margin);
    transform: none;
    white-space: nowrap;
    color: var(--color-gray-20);
  }

  .mobile .touch-target::after {
    content: "";
    position: absolute;
    inset-block: min(0px, calc((100% - var(--page-touch-target-min)) / 2));
    inset-inline: min(0px, calc((100% - var(--page-touch-target-min)) / 2));
  }
}

/* Typography classes: one per text style of the design (size and weight; the family is the same everywhere). */
.text-20-medium {
  font: var(--text-20-medium);
}

.text-17-medium {
  font: var(--text-17-medium);
}

.text-19-medium {
  font: var(--text-19-medium);
}

.text-16-medium {
  font: var(--text-16-medium);
}

.text-14-regular {
  font: var(--text-14-regular);
}

.text-20-regular {
  font: var(--text-20-regular);
}

.text-25-medium {
  font: var(--text-25-medium);
}

.text-17-regular {
  font: var(--text-17-regular);
}

.text-18-medium {
  font: var(--text-18-medium);
}

.text-20-bold {
  font: var(--text-20-bold);
}

.text-15-medium {
  font: var(--text-15-medium);
}

.text-20-demibold {
  font: var(--text-20-demibold);
}

.text-30-medium {
  font: var(--text-30-medium);
}

.text-17-bold {
  font: var(--text-17-bold);
}

.text-30-bold {
  font: var(--text-30-bold);
}

.text-18-regular {
  font: var(--text-18-regular);
}

.text-21-medium {
  font: var(--text-21-medium);
}

.text-22-medium {
  font: var(--text-22-medium);
}

.text-25-bold {
  font: var(--text-25-bold);
}

.text-18-bold {
  font: var(--text-18-bold);
}

.text-19-bold {
  font: var(--text-19-bold);
}

.text-35-medium {
  font: var(--text-35-medium);
}

.text-19-regular {
  font: var(--text-19-regular);
}

.text-14-medium {
  font: var(--text-14-medium);
}

.text-24-bold {
  font: var(--text-24-bold);
}

.text-22-bold {
  font: var(--text-22-bold);
}

.text-25-demibold {
  font: var(--text-25-demibold);
}

.text-24-medium {
  font: var(--text-24-medium);
}

.text-25-regular {
  font: var(--text-25-regular);
}

.text-26-regular {
  font: var(--text-26-regular);
}

.text-13-medium {
  font: var(--text-13-medium);
}

.text-30-demibold {
  font: var(--text-30-demibold);
}

.text-40-medium {
  font: var(--text-40-medium);
}

.text-23-bold {
  font: var(--text-23-bold);
}

.text-35-regular {
  font: var(--text-35-regular);
}

.text-35-demibold {
  font: var(--text-35-demibold);
}

.text-31-medium {
  font: var(--text-31-medium);
}

.text-28-bold {
  font: var(--text-28-bold);
}

.text-15-light {
  font: var(--text-15-light);
}

.text-21-regular {
  font: var(--text-21-regular);
}

.text-23-medium {
  font: var(--text-23-medium);
}

.text-33-bold {
  font: var(--text-33-bold);
}

.text-45-bold {
  font: var(--text-45-bold);
}

.text-40-bold {
  font: var(--text-40-bold);
}

.text-15-bold {
  font: var(--text-15-bold);
}

.text-9-bold {
  font: var(--text-9-bold);
}

.text-11-medium {
  font: var(--text-11-medium);
}

.text-12-regular {
  font: var(--text-12-regular);
}

.text-16-bold {
  font: var(--text-16-bold);
}

.text-21-bold {
  font: var(--text-21-bold);
}

.text-13-regular {
  font: var(--text-13-regular);
}

.text-7-medium {
  font: var(--text-7-medium);
}

.text-8-regular {
  font: var(--text-8-regular);
}

.text-9-regular {
  font: var(--text-9-regular);
}

.text-10-regular {
  font: var(--text-10-regular);
}

.text-10-bold {
  font: var(--text-10-bold);
}

.text-11-regular {
  font: var(--text-11-regular);
}

.text-12-medium {
  font: var(--text-12-medium);
}

.text-12-bold {
  font: var(--text-12-bold);
}

.text-13-bold {
  font: var(--text-13-bold);
}

.text-14-bold {
  font: var(--text-14-bold);
}

.text-15-regular {
  font: var(--text-15-regular);
}

.text-9-medium {
  font: var(--text-9-medium);
}

.text-10-medium {
  font: var(--text-10-medium);
}

.text-6-bold {
  font: var(--text-6-bold);
}

.text-11-bold {
  font: var(--text-11-bold);
}

.text-8-bold {
  font: var(--text-8-bold);
}

.text-8-medium {
  font: var(--text-8-medium);
}

.text-8-light {
  font: var(--text-8-light);
}

/* The style of a text in the mobile design, where it differs from the desktop one: `m-` and the name of the style. */
@media (max-width: 767.98px) {
  .mobile .m-text-20-medium {
    font: var(--text-20-medium);
  }

  .mobile .m-text-17-medium {
    font: var(--text-17-medium);
  }

  .mobile .m-text-19-medium {
    font: var(--text-19-medium);
  }

  .mobile .m-text-16-medium {
    font: var(--text-16-medium);
  }

  .mobile .m-text-14-regular {
    font: var(--text-14-regular);
  }

  .mobile .m-text-20-regular {
    font: var(--text-20-regular);
  }

  .mobile .m-text-25-medium {
    font: var(--text-25-medium);
  }

  .mobile .m-text-17-regular {
    font: var(--text-17-regular);
  }

  .mobile .m-text-18-medium {
    font: var(--text-18-medium);
  }

  .mobile .m-text-20-bold {
    font: var(--text-20-bold);
  }

  .mobile .m-text-15-medium {
    font: var(--text-15-medium);
  }

  .mobile .m-text-20-demibold {
    font: var(--text-20-demibold);
  }

  .mobile .m-text-30-medium {
    font: var(--text-30-medium);
  }

  .mobile .m-text-17-bold {
    font: var(--text-17-bold);
  }

  .mobile .m-text-30-bold {
    font: var(--text-30-bold);
  }

  .mobile .m-text-18-regular {
    font: var(--text-18-regular);
  }

  .mobile .m-text-21-medium {
    font: var(--text-21-medium);
  }

  .mobile .m-text-22-medium {
    font: var(--text-22-medium);
  }

  .mobile .m-text-25-bold {
    font: var(--text-25-bold);
  }

  .mobile .m-text-18-bold {
    font: var(--text-18-bold);
  }

  .mobile .m-text-19-bold {
    font: var(--text-19-bold);
  }

  .mobile .m-text-35-medium {
    font: var(--text-35-medium);
  }

  .mobile .m-text-19-regular {
    font: var(--text-19-regular);
  }

  .mobile .m-text-14-medium {
    font: var(--text-14-medium);
  }

  .mobile .m-text-24-bold {
    font: var(--text-24-bold);
  }

  .mobile .m-text-22-bold {
    font: var(--text-22-bold);
  }

  .mobile .m-text-25-demibold {
    font: var(--text-25-demibold);
  }

  .mobile .m-text-24-medium {
    font: var(--text-24-medium);
  }

  .mobile .m-text-25-regular {
    font: var(--text-25-regular);
  }

  .mobile .m-text-26-regular {
    font: var(--text-26-regular);
  }

  .mobile .m-text-13-medium {
    font: var(--text-13-medium);
  }

  .mobile .m-text-30-demibold {
    font: var(--text-30-demibold);
  }

  .mobile .m-text-40-medium {
    font: var(--text-40-medium);
  }

  .mobile .m-text-23-bold {
    font: var(--text-23-bold);
  }

  .mobile .m-text-35-regular {
    font: var(--text-35-regular);
  }

  .mobile .m-text-35-demibold {
    font: var(--text-35-demibold);
  }

  .mobile .m-text-31-medium {
    font: var(--text-31-medium);
  }

  .mobile .m-text-28-bold {
    font: var(--text-28-bold);
  }

  .mobile .m-text-15-light {
    font: var(--text-15-light);
  }

  .mobile .m-text-21-regular {
    font: var(--text-21-regular);
  }

  .mobile .m-text-23-medium {
    font: var(--text-23-medium);
  }

  .mobile .m-text-33-bold {
    font: var(--text-33-bold);
  }

  .mobile .m-text-45-bold {
    font: var(--text-45-bold);
  }

  .mobile .m-text-40-bold {
    font: var(--text-40-bold);
  }

  .mobile .m-text-15-bold {
    font: var(--text-15-bold);
  }

  .mobile .m-text-9-bold {
    font: var(--text-9-bold);
  }

  .mobile .m-text-11-medium {
    font: var(--text-11-medium);
  }

  .mobile .m-text-12-regular {
    font: var(--text-12-regular);
  }

  .mobile .m-text-16-bold {
    font: var(--text-16-bold);
  }

  .mobile .m-text-21-bold {
    font: var(--text-21-bold);
  }

  .mobile .m-text-13-regular {
    font: var(--text-13-regular);
  }

  .mobile .m-text-7-medium {
    font: var(--text-7-medium);
  }

  .mobile .m-text-8-regular {
    font: var(--text-8-regular);
  }

  .mobile .m-text-9-regular {
    font: var(--text-9-regular);
  }

  .mobile .m-text-10-regular {
    font: var(--text-10-regular);
  }

  .mobile .m-text-10-bold {
    font: var(--text-10-bold);
  }

  .mobile .m-text-11-regular {
    font: var(--text-11-regular);
  }

  .mobile .m-text-12-medium {
    font: var(--text-12-medium);
  }

  .mobile .m-text-12-bold {
    font: var(--text-12-bold);
  }

  .mobile .m-text-13-bold {
    font: var(--text-13-bold);
  }

  .mobile .m-text-14-bold {
    font: var(--text-14-bold);
  }

  .mobile .m-text-15-regular {
    font: var(--text-15-regular);
  }

  .mobile .m-text-9-medium {
    font: var(--text-9-medium);
  }

  .mobile .m-text-10-medium {
    font: var(--text-10-medium);
  }

  .mobile .m-text-6-bold {
    font: var(--text-6-bold);
  }

  .mobile .m-text-11-bold {
    font: var(--text-11-bold);
  }

  .mobile .m-text-8-bold {
    font: var(--text-8-bold);
  }

  .mobile .m-text-8-medium {
    font: var(--text-8-medium);
  }

  .mobile .m-text-8-light {
    font: var(--text-8-light);
  }
}