/* The field tiles and the site logos, shared by the /sites/ index and the section about it on
   the live page and the domain pages. The logos are the one loud thing here on purpose; the rest
   stays quiet. */

/* A logo: the first letter until the site's icon has loaded, and for good if it never does. */
.sx-icon { position: relative; display: grid; place-items: center; flex: none; overflow: hidden; background: #f1f5f3;
           color: #56715f; font-weight: 800; }
.sx-icon img { position: absolute; inset: 0; margin: auto; opacity: 0; object-fit: contain; }
.sx-icon.has-icon img { opacity: 1; }
.sx-icon.has-icon .sx-letter { visibility: hidden; }

/* The fields: what most visitors reach for first, with the logos saying what each holds. */
.sx-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sx-field, .sx-field:hover { text-decoration: none; }
.sx-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; min-height: 66px;
            padding: 10px 12px 10px 16px; border: 1px solid #e2e9e4; border-radius: 14px; background: #fff;
            transition: border-color .15s, box-shadow .15s, background-color .15s; }
.sx-field:hover { border-color: #b9d3c5; box-shadow: 0 8px 20px -12px rgba(15, 32, 25, .25); }
/* keep-all holds Korean words together; overflow-wrap lets a long name with no break points (Japanese) wrap instead of
   running under the logos. */
.sx-field b { min-width: 0; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.35px; color: #0f2019;
              word-break: keep-all; overflow-wrap: anywhere; }
.sx-field[aria-current] { background: #0f2019; border-color: #0f2019; }
.sx-field[aria-current] b { color: #fff; }
.sx-stack { display: inline-flex; flex: none; padding-left: 8px; }
.sx-stack .sx-icon { width: 30px; height: 30px; margin-left: -8px; border-radius: 50%; background: #fff; border: 1px solid #e2e9e4;
                     box-shadow: 0 0 0 2px #fff; font-size: 12px; }
.sx-stack .sx-icon img { width: 18px; height: 18px; }
.sx-field[aria-current] .sx-icon { border-color: transparent; box-shadow: 0 0 0 2px #0f2019; }

/* Four to a row need about 190px each for a name beside three logos: below that, on a tablet, a name breaks
   mid-word ("Comer-cio"). */
@media (max-width: 900px) {
  .sx-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .sx-fields { gap: 8px; }
  .sx-field { min-height: 58px; padding: 8px 10px 8px 13px; border-radius: 13px; }
  .sx-field b { font-size: 15px; }
  .sx-stack .sx-icon { width: 26px; height: 26px; }
  .sx-stack .sx-icon img { width: 16px; height: 16px; }
  .sx-stack .sx-icon:nth-child(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sx-field { transition: none; } }

/* The section about the index (stats/_sites_intro.html). */
.sx-intro { margin-top: 24px; padding: 40px 28px; background: #fff; border: 1px solid #e0e7e1; border-radius: 12px; text-align: center; }
.sx-intro h2 { margin: 0; font-family: inherit !important; font-size: 28px; font-weight: 750; line-height: 1.35; letter-spacing: -.6px;
               color: #203b2d; word-break: keep-all; overflow-wrap: anywhere; }
.sx-intro h2 span { display: inline-block; }
.sx-intro p { margin: 8px 0 0; color: #647269; font-size: 16px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.sx-intro .sx-fields { max-width: 904px; margin: 24px auto 0; text-align: left; }
.sx-intro-go { display: inline-block; margin-top: 22px; padding: 10px 26px; border: 1px solid #cfdcd4; border-radius: 999px; background: #fff;
               color: #203b2d; font-size: 15px; font-weight: 700; text-decoration: none; }
.sx-intro-go:hover { border-color: #00633e; color: #203b2d; }
@media (max-width: 575px) {
  .sx-intro { margin-top: 16px; padding: 28px 16px; }
  .sx-intro h2 { font-size: 23px; }
  .sx-intro p { font-size: 15px; }
}
/* keep-all above is for Korean; Japanese and Chinese break between characters under strict rules (as homepage.css does). */
:is(.sx-field b, .sx-intro h2, .sx-intro p):lang(ja), :is(.sx-field b, .sx-intro h2, .sx-intro p):lang(zh) { word-break: normal; line-break: strict; }

/* A local database's example sites (stats/_sites_sample_note.html, DEBUG only): one short line in a corner of the section
   or the index, off the layout, so the design looks as it will on production; the details are on hover. */
.sx-intro.is-sample, .sx.is-sample { position: relative; }
.sx-sample { position: absolute; top: 6px; right: 8px; z-index: 1; padding: 2px 8px; border-radius: 6px; background: #fff1c2;
             color: #6a4f00; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0; white-space: nowrap; cursor: help; }
/* Phones have 28px above the heading; the label keeps clear of it. */
@media (max-width: 575px) { .sx-sample { top: 4px; right: 6px; padding: 1px 6px; font-size: 11px; line-height: 14px; } }