/* ttp.css — styling for the #ttp render target and the outline technique. */

@font-face {
  font-family: "Impact";
  src: url("./fonts/Impact.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "AppleColorEmoji";
  src: url("./fonts/AppleColorEmoji.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "NotoColorEmoji";
  src: url("./fonts/NotoColorEmoji.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* The render target. Fixed 512x512, transparent, holds one or two blocks. */
#ttp {
  box-sizing: border-box;
  width: 512px;
  height: 512px;
  position: relative;
  overflow: hidden;
  background: transparent;

  /* Defaults; overwritten by ttp.js via inline custom properties. */
  --size: 60px;
  --stroke: 7.5px;
  --avail: 465px;
  --pad: 8px;
  --pad-top: 24px;
  --pad-bottom: 12px;
  --band: 171px;
  --line-height: 1;
  --fill: #ffffff;
  --stroke-color: #000000;
}

/* An anchored text block. Full box width; vertical region + alignment set by
   the anchor class below. */
.ttp-block {
  position: absolute;
  left: 0;
  width: 512px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

/* center: full box, text centered. */
.ttp-center {
  top: 0;
  height: 512px;
  align-items: center;
}
/* top: a band pinned to the top edge, text aligned to the top. --pad-top is
   calibrated (padding + stroke + ink overhang) so the outline lands at --pad. */
.ttp-top {
  top: 0;
  height: var(--band);
  align-items: flex-start;
  padding-top: var(--pad-top);
}
/* bottom: a band pinned to the bottom edge, text aligned to the bottom. */
.ttp-bottom {
  bottom: 0;
  height: var(--band);
  align-items: flex-end;
  padding-bottom: var(--pad-bottom);
}

/* Width is pinned to the same value Pretext measured against, so the DOM wraps
   exactly where the fit algorithm predicted. No transform — the height fit
   accounts for ink overhang, so flex centering lands the block accurately. */
.ttp-text {
  position: relative;
  width: var(--avail);
}

.ttp-text span {
  display: block;
  width: 100%;
  margin: 0;
  font-family: "Impact", "AppleColorEmoji", "NotoColorEmoji", sans-serif;
  font-weight: 400;
  font-size: var(--size);
  line-height: var(--line-height);
  text-align: center;
  white-space: pre-wrap;
  /* Normally words never break; auto-enabled when an outlier word detected. */
  overflow-wrap: var(--word-break, normal);
  word-break: var(--word-break, normal);
}

/* Front layer: solid fill, in normal flow so it defines the wrapper's height. */
.ttp-fill {
  position: relative;
  color: var(--fill);
}

/* Back layer: outline only, perfectly overlapping the fill. */
.ttp-stroke {
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  -webkit-text-stroke: var(--stroke) var(--stroke-color);
  text-stroke: var(--stroke) var(--stroke-color);
}