/* The eclipse pages — /eclipse, /eclipse/YYYY-MM-DD and its cities.
 *
 * Its own stylesheet, next to the app's, for the same reason the download page
 * has one: somebody arriving from a search result should not have to download
 * the eclipse engine and a map library to read a table of contact times. These
 * documents carry no JavaScript at all, so everything here is the whole of
 * their behaviour.
 *
 * Variables, the topbar and the footer come from styles.css, which is loaded
 * first; nothing is redefined here that it already defines.
 */

.ec-page { min-height: 100%; }

.ec-wrap { padding: 28px 0 70px; max-width: 920px; }

/* ------------------------------------------------------------ the lede --- */

.ec-crumbs {
  font-size: .82rem; color: var(--dim); margin-bottom: 22px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
}
.ec-crumbs a { color: var(--muted); text-decoration: none; }
.ec-crumbs a:hover { color: var(--text); }
.ec-crumbs i { color: var(--line); font-style: normal; }

.ec-wrap h1 {
  font-size: clamp(1.55rem, 4.2vw, 2.3rem); line-height: 1.22;
  letter-spacing: -.02em; margin: 0 0 16px;
}

.ec-lede {
  color: var(--text); font-size: 1.06rem; line-height: 1.62;
  margin: 0 0 24px; max-width: 62ch;
}

/* The one thing a reader is most likely to want next: the eclipse they just
 * read about, in the tracker, where they can move the pin. */
.ec-cta { margin: 0 0 28px; display: flex; flex-direction: column; gap: 9px; }
/* .ec-wrap a sets the link colour for the whole page and comes later in this
 * file, so the button has to say which element it is to keep its own: a gold
 * label on a gold button is unreadable, and it was. */
.ec-wrap a.ec-button {
  align-self: flex-start;
  display: inline-block; padding: 12px 20px; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--corona), var(--corona-2));
  color: #1a1203; font-weight: 650; text-decoration: none; font-size: .96rem;
  box-shadow: 0 10px 30px -14px rgba(255, 159, 67, .8);
}
.ec-wrap a.ec-button:hover { filter: brightness(1.07); }
.ec-cta-note { color: var(--dim); font-size: .85rem; max-width: 58ch; }

.ec-figure { margin: 0 0 34px; }
.ec-figure img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2);
}

.ec-wrap section { margin: 0 0 36px; }
.ec-wrap h2 {
  font-size: 1.12rem; margin: 0 0 14px; letter-spacing: -.01em;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.ec-wrap p { line-height: 1.65; max-width: 68ch; }
.ec-wrap a { color: var(--corona); }

.ec-note { color: var(--dim); font-size: .86rem; max-width: 64ch; }

/* ----------------------------------------------------------- the facts --- */

/* A definition list rather than a table: one subject with a dozen properties,
 * not rows of comparable things. The grid is what makes it read as a table
 * anyway, which is what the properties deserve. */
.ec-facts {
  display: grid; gap: 1px; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.ec-facts > div { background: var(--panel); padding: 13px 16px; }
.ec-facts dt { color: var(--dim); font-size: .78rem; text-transform: uppercase;
               letter-spacing: .06em; margin-bottom: 4px; }
.ec-facts dd { margin: 0; font-size: .97rem; font-variant-numeric: tabular-nums; }

/* The countries, in the order the shadow reaches them — numbered, because the
 * order is the information. */
.ec-countries {
  list-style: none; counter-reset: country; padding: 0; margin: 16px 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ec-countries li {
  counter-increment: country;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px 6px 10px; font-size: .9rem;
}
.ec-countries li::before {
  content: counter(country); color: var(--corona); font-size: .74rem;
  font-variant-numeric: tabular-nums; margin-right: 7px;
}

/* ----------------------------------------------------------- the times --- */

/* Contact times are the reason the page exists, so they get a real table. It
 * scrolls sideways on a phone rather than wrapping: a time cut in half is
 * worse than a table you have to push. */
.ec-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ec-table {
  width: 100%; border-collapse: collapse; font-size: .93rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  /* Narrower than this and a phone breaks "First contact" over three lines and
   * still clips the UTC column. Pushing the table sideways is the better of
   * the two bad options. */
  min-width: 430px;
}
.ec-table th, .ec-table td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.ec-table thead th {
  color: var(--dim); font-size: .76rem; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600; background: var(--panel);
  white-space: nowrap;
}
.ec-table tbody tr:last-child th, .ec-table tbody tr:last-child td { border-bottom: 0; }
.ec-table tbody th { font-weight: 600; }
.ec-table tbody td { color: var(--muted); }

/* A row where the Sun goes out entirely is not the same news as 97% covered. */
.ec-table tr.ec-central th a { color: var(--total); }
.ec-table tr.ec-central td:last-child { color: var(--text); }

.ec-when { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ec-when-note {
  display: block; color: var(--dim); font-size: .78rem; font-weight: 400;
  margin-top: 3px; max-width: 34ch;
}
.ec-contacts tbody th { white-space: normal; }

/* --------------------------------------------------------- the listings --- */

.ec-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.ec-list-item a {
  display: grid; gap: 4px 14px; align-items: baseline;
  grid-template-columns: minmax(9.5em, auto) 5.5em 5.5em 1fr;
  padding: 13px 16px; text-decoration: none; color: var(--text);
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: var(--radius-sm);
}
.ec-list-item a:hover { background: var(--panel-hi); }
.ec-list-item strong { font-weight: 600; font-size: .98rem; }
.ec-list-type, .ec-list-figure { font-size: .86rem; color: var(--muted);
                                 font-variant-numeric: tabular-nums; }
.ec-list-where { font-size: .86rem; color: var(--dim); }

/* The type as a colour, the same four the app uses. */
.ec-type-total a { border-left-color: var(--total); }
.ec-type-annular a { border-left-color: var(--annular); }
.ec-type-partial a { border-left-color: var(--partial); }
.ec-type-hybrid a { border-left-color: var(--hybrid); }

.ec-city-links { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 7px;
                 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ec-city-links li {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 14px;
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.ec-city-links span { color: var(--dim); font-size: .82rem; white-space: nowrap; }

/* ------------------------------------------------------------- the foot --- */

.ec-app { border: 1px solid var(--line); border-radius: var(--radius);
          background: var(--panel); padding: 22px 24px; }
.ec-app h2 { border-bottom: 0; padding-bottom: 0; }
.ec-app p { color: var(--muted); font-size: .94rem; }
.ec-badge { margin: 14px 0 0; }
.ec-badge .appbadge img { width: 156px; height: 52px; }

.ec-prevnext {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  margin-top: 30px;
}
.ec-prevnext a {
  flex: 1 1 240px; padding: 12px 16px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--text); font-size: .92rem;
}
.ec-prevnext a:hover { background: var(--panel-hi); }
.ec-prevnext .ec-next { text-align: right; }
.ec-prevnext span { display: block; color: var(--dim); font-size: .76rem;
                    text-transform: uppercase; letter-spacing: .06em; }

@media (max-width: 620px) {
  /* Four columns of eclipse become two lines of one: the date and what it is,
   * then where it goes. */
  .ec-list-item a { grid-template-columns: 1fr auto; }
  .ec-list-where { grid-column: 1 / -1; }
}