/* Additions to the original screen.css, which is kept exactly as archived.
   Nothing here changes the desktop look except the fine print. */

/* Impact where the device has it; Anton, a near twin, where it does not
   (Android, Linux). local() wins whenever the real font is installed. */
@font-face {
  font-family: Impact;
  src: local("Impact"), local("Impact Regular"), url("/fonts/anton-latin.woff2") format("woff2");
}

/* The footer's fine print */
table.frame td.footer .tribute {
  margin-top: 12px;
  font-size: 11px;
  text-transform: none;
  color: #777;
  font-family: Georgia, "Times New Roman", Times, serif;
}

/* Warnings shown in place of a step (not on the original) */
.tyv-alert p {
  font-size: 18px;
  color: #333;
  text-align: center;
  margin: 10px 0;
}
a.submit {
  display: inline-block;
  text-decoration: none;
}

/* FAQ and details: the archived text predates the current method */
.tyv-notice {
  background: #fff;
  border-left: 5px solid #e8590c;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.45;
  color: #222;
}

/* Privacy page */
.readable ul.tyv-list {
  margin: 0 0 14px 22px;
  padding: 0;
}
.readable ul.tyv-list li {
  margin-bottom: 6px;
}

.result .tyv-rank {
  margin-top: 18px;
}

/* The original always carried a 728px banner on its test pages, which
   stretched the content cell to 808px and the frame to 978px; the frame keeps
   those proportions without the ad. */
@media (min-width: 980px) {
  table.frame td.content {
    width: 728px;
  }
  table.frame td.sidebar {
    width: 120px;
  }
}

/* Phones and small tablets: the original was a fixed 978px table. The cells
   stack, the sidebar's fact goes under the content, the word list takes two
   columns. */
@media (max-width: 979px) {
  table.frame,
  table.frame > tbody,
  table.frame > tbody > tr,
  table.frame > tbody > tr > td {
    display: block;
    width: auto;
  }
  table.frame td.content {
    width: auto;
    /* adjustHeight() sets a height for the desktop layout */
    height: auto !important;
    padding: 20px 16px 30px;
  }
  table.frame td.sidebar {
    width: auto;
    padding: 4px 16px 24px;
  }
  table.frame tr:last-child td.sidebar {
    display: none;
  }
  table.frame td.footer {
    padding: 16px;
    line-height: 26px;
  }
  .fact, .fact a {
    margin-top: 16px;
  }

  .right-area {
    float: none;
    clear: both;
  }
  .right-area h2.subtitle {
    text-align: left;
  }
  .top-loud h2.subtitle,
  .top-quiet h2.subtitle {
    width: auto;
    margin-top: 14px;
  }
  .top-loud h2.subtitle {
    font-size: 28px;
    line-height: 30px;
  }
  .top-loud {
    margin-bottom: 30px;
  }
  .right-area .interface-switch {
    text-align: left;
    margin: 14px 0 0;
  }

  .main-instructions {
    margin: 26px 0;
  }

  .indexcard {
    padding: 14px;
  }
  table.wordlist,
  table.wordlist > tbody,
  table.wordlist > tbody > tr {
    display: block;
  }
  table.wordlist > tbody > tr {
    display: flex;
    flex-wrap: wrap;
  }
  table.wordlist td {
    display: block;
    width: 50%;
    line-height: 34px;
    word-break: break-word;
  }

  .survey,
  .survey > tbody,
  .survey > tbody > tr,
  .survey td,
  .survey td:first-child {
    display: block;
    width: auto;
  }
  .survey td {
    padding: 4px 0;
  }
  .survey td:first-child {
    padding: 14px 0 4px;
  }

  .moneymaker {
    float: none;
    width: auto;
    margin: 0 0 24px;
    padding: 0;
    border: none;
  }

  .readable {
    padding: 20px 16px;
  }
  .readable table {
    margin-left: 0;
    width: 100%;
  }
  .readable > div[id^="chart"],
  .readable div[id^="chart"] {
    overflow-x: auto;
  }
  table.stats {
    width: 100%;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}

/* The stacked front-page title is 100px tall per line; on the narrowest
   phones the dictionary behind it shrinks to fit. */
@media (max-width: 480px) {
  .top-loud {
    background-size: 180px auto;
    background-position: 165px 105px;
  }
  .step-tab {
    font-size: 19px;
  }
}

/* Result page: the share button in the Facebook Like box's place */
button.tyv-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #333;
  color: white;
  border: none;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: bold;
  padding: 7px 14px;
  border-radius: 3px;
  cursor: pointer;
}
button.tyv-share:hover {
  background: #000;
}
button.tyv-share svg {
  fill: currentColor;
}