/* landing.css — `/`, section 1f of the design: the landing page doing one
 * job. Linked by {{pagestyle "landing"}} AFTER {{stylesheet}}, so every
 * rule here wins over a foundation rule by order rather than by weight.
 *
 * `/` is the manifest's start_url AND its scope, so this is the document
 * an installed application opens to. It is a home screen before it is
 * anything else: the one action above the fold, the privacy promise
 * stated as a fact, and the recent cells underneath. No hero
 * illustration and no marketing, which is the design's own instruction.
 *
 * It also OWNS #sightings. app.css carries a rule for that list marked
 * PROVISIONAL, left there so that the foundations landing alone did not
 * leave this page rendering as disc bullets. The real rule is at the
 * bottom of this file and the provisional one can go — see
 * DESIGN-SIGNIN-SUMMARY.md for the one condition attached to deleting it.
 */

body {
  /* --measure is the PROSE column and this page is not prose: it is a
   * masthead, one action, and a table of records that wants room for a
   * cell id, a status and an age on one line. The two-column layout
   * below needs about 60rem before it is worth having. */
  max-width: 64rem;
}

/* ------------------------------------------------------------- masthead */

.topbar {
  flex-wrap: wrap;
  justify-content: space-between;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink);
  font-size: var(--fs-3);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  text-decoration: none;
}

/* One of pack color's three jobs. No fill attribute on the polygons, so
 * a pack that changes its accent changes the mark. */
.mark-fill {
  fill: var(--pack-accent);
}

.mark-hole {
  fill: var(--paper);
}

/* The masthead holds three things on this page and two on a phone. The
 * wordmark and the identity share the first row; the navigation takes
 * the whole of the second. app.css pushes .wayfinding right with an auto
 * margin, which is correct where it is the last child and wrong here. */
.topbar .wayfinding {
  order: 3;
  flex-basis: 100%;
  margin-left: 0;
}

.topbar #identity {
  order: 2;
}

.topbar #identity {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
}

.topbar form {
  margin: 0;
}

/* Quiet, and deliberately NOT the pack's color. Signing out is not this
 * page's action — reporting is — and app.css paints every submit button
 * in --pack-accent-firm, which put a solid accent block in the masthead
 * beside the accent block that matters. Seen in the browser. */
.topbar button[type="submit"] {
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-3);
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-1);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- hero
 * Two columns from 60rem: the ask on the left, the live cells on the
 * right, both above the fold on a laptop. One column below that, and the
 * order is the order of the markup — the action first, because on a
 * phone this is the home screen of an installed application and the
 * whole point of opening it is to report something.
 */

.landing {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}

/* A grid item's automatic minimum size is its MIN-CONTENT size, not zero,
 * and one row of the list below is a cell id, a status chip that may not
 * wrap, and an age. Without this the column cannot shrink past that sum,
 * the grid grows wider than the viewport, and every line of prose on the
 * page runs off the right edge — a whole-page defect caused by one row.
 * Measured at 390px: 390 laid out, 390 scrollWidth, with a cell id of 15
 * characters. It holds today and it is one string length from not
 * holding, so the floor is set here rather than relied upon. */
.landing > * {
  min-width: 0;
}

@media (min-width: 60rem) {
  .landing {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7);
  }
}

.hero h1 {
  margin-bottom: var(--sp-4);
}

.hero-lede {
  max-width: 34rem;
  color: var(--ink-2);
  font-size: var(--fs-3);
  line-height: var(--lh-3);
}

/* The privacy promise is a fact in the middle of the sentence, not a
 * footnote under it. */
.hero-lede strong {
  color: var(--ink);
  font-weight: var(--weight-bold);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 14rem;
  min-height: var(--tap-primary);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-3);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.action:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

/* The second of pack color's three jobs. --pack-accent-ink is derived
 * server-side to clear 4.5:1 against it. */
.action-primary {
  border-color: transparent;
  background: var(--pack-accent-firm);
  color: var(--pack-accent-ink);
}

.action-primary:hover {
  border-color: transparent;
  color: var(--pack-accent-ink);
}

/* --------------------------------------------------------- recent cells */

.cells h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: 0;
  font-size: var(--fs-3);
  line-height: var(--lh-3);
  letter-spacing: normal;
}

.cells h2 a {
  font-size: var(--fs-1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* THE REPLACEMENT for app.css's provisional rule. These are records, not
 * prose: one row per cell that has had a report, drawn as a card so the
 * list reads as a surface rather than as an indented paragraph. */
#sightings {
  margin: 0 0 var(--sp-5);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
  list-style: none;
}

#sightings li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}

#sightings li:first-child {
  border-top: 0;
}

/* The hexagon is the brand because the hexagon is the privacy promise:
 * one per row, the shape of the area actually published. --r-hex is a
 * clip-path, so it needs a box with a size to clip. */
.cell-mark {
  flex: none;
  width: 16px;
  height: 18px;
  clip-path: var(--r-hex);
  background: var(--pack-accent);
}

.cell-id {
  flex: 1 1 8rem;
  color: var(--ink);
}

/* Pushed to the end of the row, so that when a phone-width row wraps the
 * age lands under the status it belongs to rather than hanging off the
 * left margin as an orphan. */
.cell-age {
  margin-left: auto;
  color: var(--ink-3);
  font-size: var(--fs-1);
  line-height: var(--lh-1);
}

#sightings .status {
  /* The word is in the markup, which is what a screen reader announces
   * and what survives a sheet that failed to load. This only changes how
   * it is drawn. */
  text-transform: capitalize;
}

/* An empty pack is not a broken page. It is the one place on this
 * document where being first is the invitation. */
#sightings .cells-empty {
  display: block;
  color: var(--ink-3);
}

.cells-note {
  color: var(--ink-3);
  font-size: var(--fs-1);
  line-height: var(--lh-1);
}

footer {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}