/* Screen-only share controls and the printed-on-screen TeleKode code. */
@media screen {
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-sans-3-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/public-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/work-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/roboto-latin.woff2") format("woff2");
}
}
@media screen {
  .telekode-card .location-actions > .location-share,
  .welcome-card > .location-share,
  .public-home-share {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px auto 0;
  }

  .telekode-card .location-actions > .location-share > [data-location-share-button],
  .telekode-card .location-actions > .location-share > [data-location-copy-button],
  .welcome-card > .location-share > [data-location-share-button],
  .welcome-card > .location-share > [data-location-copy-button],
  .public-home-share > [data-location-share-button],
  .public-home-share > [data-location-copy-button],
  .screen-style-preview-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: var(--tk-location-pad-y) var(--tk-location-pad-x);
    border: var(--tk-location-border-width) solid var(--tk-location-border);
    border-radius: var(--tk-location-radius);
    background: var(--tk-location-bg);
    color: var(--tk-location-color);
    box-shadow: var(--tk-location-shadow);
    font-family: var(--tk-location-font) !important;
    font-size: var(--tk-location-size);
    font-weight: var(--tk-location-weight);
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
  }

  .telekode-card .location-actions > .location-share > [data-location-share-button]:hover,
  .telekode-card .location-actions > .location-share > [data-location-copy-button]:hover,
  .welcome-card > .location-share > [data-location-share-button]:hover,
  .welcome-card > .location-share > [data-location-copy-button]:hover,
  .public-home-share > [data-location-share-button]:hover,
  .public-home-share > [data-location-copy-button]:hover,
  .screen-style-preview-button:hover {
    background: var(--tk-location-hover-bg);
    color: var(--tk-location-hover-color);
  }

  .telekode-card .location-actions > .location-share > [data-location-share-button]:focus-visible,
  .telekode-card .location-actions > .location-share > [data-location-copy-button]:focus-visible,
  .welcome-card > .location-share > [data-location-share-button]:focus-visible,
  .welcome-card > .location-share > [data-location-copy-button]:focus-visible,
  .public-home-share > [data-location-share-button]:focus-visible,
  .public-home-share > [data-location-copy-button]:focus-visible,
  .screen-style-preview-button:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
  }

  .telekode-card .location-actions > .location-share[data-width-mode="full"],
  .welcome-card > .location-share[data-width-mode="full"],
  .public-home-share[data-width-mode="full"],
  .screen-style-preview[data-width-mode="full"] {
    width: 100%;
  }
  .telekode-card .location-actions > .location-share[data-width-mode="full"] > [data-location-share-button],
  .telekode-card .location-actions > .location-share[data-width-mode="full"] > [data-location-copy-button],
  .welcome-card > .location-share[data-width-mode="full"] > [data-location-share-button],
  .welcome-card > .location-share[data-width-mode="full"] > [data-location-copy-button],
  .public-home-share[data-width-mode="full"] > [data-location-share-button],
  .public-home-share[data-width-mode="full"] > [data-location-copy-button],
  .screen-style-preview[data-width-mode="full"] > .screen-style-preview-button {
    flex: 1 1 100%;
  }
  .telekode-card .location-actions > .location-share[data-width-mode="fixed"] > [data-location-share-button],
  .telekode-card .location-actions > .location-share[data-width-mode="fixed"] > [data-location-copy-button],
  .welcome-card > .location-share[data-width-mode="fixed"] > [data-location-share-button],
  .welcome-card > .location-share[data-width-mode="fixed"] > [data-location-copy-button],
  .public-home-share[data-width-mode="fixed"] > [data-location-share-button],
  .public-home-share[data-width-mode="fixed"] > [data-location-copy-button],
  .screen-style-preview[data-width-mode="fixed"] > .screen-style-preview-button {
    width: min(var(--tk-location-width), 100%);
  }

  .telekode-card .location-share-status,
  .welcome-card .location-share-status,
  .public-home-share .location-share-status {
    flex-basis: 100%;
    margin: 0;
    overflow-wrap: anywhere;
  }

  .telekode-card .page-heading + .page-lede > span.code,
  .welcome-card > .telekode-code.telekode-public-code,
  .telekode-code-preview {
    font-family: var(--tk-code-font-family) !important;
    font-size: var(--tk-code-font-size);
  }
}

@media screen and (max-width: 600px) {
  .telekode-card .location-actions > .location-share,
  .welcome-card > .location-share,
  .public-home-share {
    width: min(100%, 480px);
  }
  .telekode-card .location-actions > .location-share[data-width-mode="fixed"] > [data-location-share-button],
  .telekode-card .location-actions > .location-share[data-width-mode="fixed"] > [data-location-copy-button],
  .welcome-card > .location-share[data-width-mode="fixed"] > [data-location-share-button],
  .welcome-card > .location-share[data-width-mode="fixed"] > [data-location-copy-button],
  .public-home-share[data-width-mode="fixed"] > [data-location-share-button],
  .public-home-share[data-width-mode="fixed"] > [data-location-copy-button] {
    max-width: 100%;
  }
}