/* Layouts that belong to one page. */

/* --- overview ------------------------------------------------------------------- */

.overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

.status {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  margin-bottom: 18px;
  border-radius: var(--radius);
  background: var(--brand-tint);
  color: var(--brand-deep);
  border: 1px solid #c6dccb;
}

.status.is-late {
  background: var(--late-tint);
  border-color: #eec8bc;
  color: #6f2615;
}

.status-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
  flex: none;
}

.status.is-late .status-mark {
  background: var(--late);
}

.status-text {
  font: 600 18px/1.25 var(--display);
  font-stretch: 92%;
}

.status-sub {
  font-size: 13px;
  opacity: 0.85;
  margin-top: 2px;
}

.status .btn {
  margin-left: auto;
}

.setup {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.setup li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}

.setup li:first-child {
  border-top: 0;
}

.setup-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
  font: 600 13px/1 var(--display);
  color: var(--ink-2);
  flex: none;
}

.setup li.is-done .setup-num {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.setup li.is-done .setup-label {
  color: var(--ink-3);
  text-decoration: line-through;
}

.setup .btn {
  margin-left: auto;
}

/* --- the loading gauge -------------------------------------------------------- */

.figure {
  font: 600 34px/1 var(--display);
  font-stretch: 88%;
  letter-spacing: -0.01em;
}

.figure small {
  font: 600 14px/1 var(--display);
  color: var(--ink-2);
  margin-left: 4px;
}

.gauge {
  position: relative;
  height: 12px;
  margin: 16px 0 26px;
  border-radius: 6px;
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.gauge-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 6px;
  background: var(--brand);
}

.gauge.is-over .gauge-fill {
  background: var(--late);
}

.gauge-limit {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  background: var(--ink);
}

.gauge-limit span {
  position: absolute;
  top: 24px;
  transform: translateX(-50%);
  font: 600 11px/1 var(--display);
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--ink-2);
}

.facts {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 12px;
  margin: 0;
  font-size: 13px;
}

.facts dt {
  color: var(--ink-2);
}

.facts dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

.card-actions .btn {
  flex: 1;
  justify-content: center;
}

/* --- lists with filters --------------------------------------------------------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.toolbar .select {
  width: 200px;
  margin-left: auto;
}

.month {
  padding: 16px 22px 6px;
  font: 600 11px/1 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-top: 1px solid var(--line-soft);
}

.card-flush > .month:first-child {
  border-top: 0;
}

/* --- fields ------------------------------------------------------------------ */

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.field-card {
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--line-soft);
  transition: border-color 120ms, transform 120ms;
}

.field-card:hover {
  border-color: var(--brand);
}

.field-name {
  font: 600 18px/1.2 var(--display);
  font-stretch: 92%;
  margin-bottom: 2px;
}

.field-area {
  font: 600 13px/1.2 var(--display);
  color: var(--brand);
  margin-bottom: 14px;
}

.field-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.tag {
  padding: 3px 9px;
  border-radius: 12px;
  background: var(--sunk);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}

.field-last {
  font-size: 12px;
  color: var(--ink-3);
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

/* The page of a module this farm has not taken: what it does on the left, what it costs
   and the one button on the right. */
.module-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 28px;
  align-items: start;
}

.module-what p {
  margin: 0 0 12px;
  max-width: 62ch;
}

.module-take {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.module-price {
  margin-bottom: 12px;
  font: 600 15px/1.35 var(--display);
}

.module-take .btn {
  width: 100%;
  justify-content: center;
}

.module-take .hint {
  margin-top: 10px;
}

@media (max-width: 900px) {
  .module-offer {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The free year, said once at the top of a module's pages: small, quiet, and not a bar
   the farmer has to dismiss. Bordeaux rather than the late red, which means something. */
.trial {
  max-width: 1080px;
  /* It sits in the gap the page already has above its eyebrow and adds no height of its
     own: -21 + 17 + 4 = 0, so nothing below it moves when the line appears. */
  height: 17px;
  margin: -21px auto 4px;
  color: var(--trial);
  font: 500 12px/17px var(--display);
  letter-spacing: 0.01em;
}

/* A module saying what it needs from the farm, without offering to do the farm's job. */
.needs {
  max-width: 1080px;
  margin: 0 auto 18px;
  color: var(--ink-2);
  font-size: 14px;
}

/* Taking a module off is quiet: it is rare, and it is the only thing in the program that
   removes something from the screen. */
.module-remove {
  width: 100%;
  justify-content: center;
  color: var(--late);
  border-color: rgba(176, 65, 42, 0.35);
}

.module-remove:hover {
  background: rgba(176, 65, 42, 0.08);
}

.module-pages {
  margin-top: 14px;
  color: var(--ink-3);
  font-size: 13px;
}