/* Final English-only +2px typography layer for PawCream Atelier. */

/* English message board. */
html body div[role="dialog"][aria-modal="true"][aria-label="PawCream Message Board"] > section header strong {
  font-size: 33px !important;
}

html body div[role="dialog"][aria-modal="true"][aria-label="PawCream Message Board"] > section header p {
  font-size: 21px !important;
}

html body div[role="dialog"][aria-modal="true"][aria-label="PawCream Message Board"] > section textarea {
  font-size: 24px !important;
}

html body div[role="dialog"][aria-modal="true"][aria-label="PawCream Message Board"] > section button:not([aria-label]) {
  font-size: 24px !important;
}

html body div[role="dialog"][aria-modal="true"][aria-label="PawCream Message Board"] > section span {
  font-size: 19px !important;
}

html body div[role="dialog"][aria-modal="true"][aria-label="PawCream Message Board"] > section article p {
  font-size: 24px !important;
}

html body div[role="dialog"][aria-modal="true"][aria-label="PawCream Message Board"] > section article time {
  font-size: 19px !important;
}

/* Instax UI is English in both language modes. */
html body section[role="dialog"][aria-label="Pick an Instax frame"] > div:first-of-type {
  font-size: 37px !important;
}

html body section[role="dialog"][aria-label="Pick an Instax frame"] .pawcream-instax-ok,
html body section[role="dialog"][aria-label="Pick an Instax frame"] .pawcream-instax-file {
  font-size: 25px !important;
}

html body section[role="dialog"][aria-label="Pick an Instax frame"] p,
html body section[role="dialog"][aria-label="Pick an Instax frame"] label,
html body section[role="dialog"][aria-label="Pick an Instax frame"] span:not([aria-hidden="true"]) {
  font-size: 20px !important;
}

html body section[role="dialog"][aria-label="Pick an Instax frame"] div[style*="dashed"] * {
  font-size: 23px !important;
}

html body section[role="dialog"][aria-label="Pick an Instax frame"]
  > div:has(> img[alt^="Instax frame"]) + div {
  font-size: 18px !important;
}

html body section[role="dialog"][aria-label="Pick an Instax frame"] div[style*="font-variant-numeric"] {
  font-size: 18px !important;
}

/* English toolbar and English hover/click hints. */
html.pawcream-lang-en body nav[aria-label="PawCream Atelier toolbar"] *,
html.pawcream-lang-en body nav[aria-label="PawCream Atelier toolbar"] button {
  font-size: 19px !important;
}

html.pawcream-lang-en body section[aria-label^="PawCream Atelier Room"] span[style*="pointer-events: none"] {
  font-size: 19px !important;
}

/* PawCream brand word remains English even while Chinese UI is selected. */
html body nav[aria-label="PawCream Atelier toolbar"] > strong {
  font-size: 19px !important;
}

/* English sign-in notice. */
html.pawcream-lang-en body div[role="dialog"][aria-label="Sign in"] strong {
  font-size: 15px !important;
}

html.pawcream-lang-en body div[role="dialog"][aria-label="Sign in"] p,
html.pawcream-lang-en body div[role="dialog"][aria-label="Sign in"] button {
  font-size: 13px !important;
}

/* English Letter brand introduction. */
html body section[role="dialog"][aria-label="About PawCream"] h2 {
  font-size: 35px !important;
}

html body section[role="dialog"][aria-label="About PawCream"] p {
  font-size: 21px !important;
}

html body section[role="dialog"][aria-label="About PawCream"] > div > div > div {
  font-size: 17px !important;
}

/* The English tagline is also present in the Chinese Letter. */
html body section[role="dialog"][aria-label="关于 PawCream"] > div > div > div {
  font-size: 15px !important;
}

/* Note prompt floats directly on the paper: no chip/card around it. */
html body section[aria-label^="PawCream Atelier Room"]
  div:has(> img[alt="Note"]) > span[style*="top: 50%"] {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* English Note prompt: exactly three lines and +3px from the current size. */
html.pawcream-lang-en body section[aria-label^="PawCream Atelier Room"]
  div:has(> img[alt="Note"]) > span[style*="top: 50%"] {
  color: transparent !important;
  font-size: 0 !important;
  width: 68% !important;
  max-width: none !important;
  white-space: pre-line !important;
  line-height: 1.35 !important;
}

html.pawcream-lang-en body section[aria-label^="PawCream Atelier Room"]
  div:has(> img[alt="Note"]) > span[style*="top: 50%"]::after {
  content: "Leave a little\A note for\A PawCream";
  display: block;
  color: #66869d;
  font-size: 22px;
  line-height: 1.35;
  text-align: center;
  white-space: pre-line;
}

@media (max-width: 600px) {
  html body div[role="dialog"][aria-modal="true"][aria-label="PawCream Message Board"] > section header strong {
    font-size: 29px !important;
  }

  html body div[role="dialog"][aria-modal="true"][aria-label="PawCream Message Board"] > section header p {
    font-size: 19px !important;
  }

  html body div[role="dialog"][aria-modal="true"][aria-label="PawCream Message Board"] > section textarea,
  html body div[role="dialog"][aria-modal="true"][aria-label="PawCream Message Board"] > section article p {
    font-size: 22px !important;
  }

  html body div[role="dialog"][aria-modal="true"][aria-label="PawCream Message Board"] > section button:not([aria-label]) {
    font-size: 22px !important;
  }

  html body div[role="dialog"][aria-modal="true"][aria-label="PawCream Message Board"] > section span,
  html body div[role="dialog"][aria-modal="true"][aria-label="PawCream Message Board"] > section article time {
    font-size: 18px !important;
  }

  html body section[role="dialog"][aria-label="Pick an Instax frame"] > div:first-of-type {
    font-size: 33px !important;
  }

  html body section[role="dialog"][aria-label="Pick an Instax frame"] .pawcream-instax-ok,
  html body section[role="dialog"][aria-label="Pick an Instax frame"] .pawcream-instax-file {
    font-size: 22px !important;
  }

  html body section[role="dialog"][aria-label="Pick an Instax frame"] p,
  html body section[role="dialog"][aria-label="Pick an Instax frame"] label,
  html body section[role="dialog"][aria-label="Pick an Instax frame"] span:not([aria-hidden="true"]) {
    font-size: 20px !important;
  }

  html body section[role="dialog"][aria-label="Pick an Instax frame"] div[style*="dashed"] * {
    font-size: 19px !important;
  }

  html body section[role="dialog"][aria-label="Pick an Instax frame"]
    > div:has(> img[alt^="Instax frame"]) + div,
  html body section[role="dialog"][aria-label="Pick an Instax frame"] div[style*="font-variant-numeric"] {
    font-size: 16px !important;
  }

  html.pawcream-lang-en body nav[aria-label="PawCream Atelier toolbar"] *,
  html.pawcream-lang-en body nav[aria-label="PawCream Atelier toolbar"] button {
    font-size: 15px !important;
  }

  html.pawcream-lang-en body section[aria-label^="PawCream Atelier Room"] span[style*="pointer-events: none"] {
    font-size: 16px !important;
  }

  html body nav[aria-label="PawCream Atelier toolbar"] > strong {
    font-size: 15px !important;
  }

  html body section[role="dialog"][aria-label="About PawCream"] h2 {
    font-size: 25px !important;
  }

  html body section[role="dialog"][aria-label="About PawCream"] p {
    font-size: 16px !important;
  }

  html body section[role="dialog"][aria-label="About PawCream"] > div > div > div,
  html body section[role="dialog"][aria-label="关于 PawCream"] > div > div > div {
    font-size: 13px !important;
  }

  html.pawcream-lang-en body section[aria-label^="PawCream Atelier Room"]
    div:has(> img[alt="Note"]) > span[style*="top: 50%"]::after {
    font-size: 19px;
  }
}