/* Swell ---------------------------------------------------------------------
   The project page. Builds on styles.css: same tokens, same type. Here Sodium
   marks the one line a month comes down to: the settlement. */

.sw h3 {
  margin: 0;
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.3;
}

/* Hero ---------------------------------------------------------------------- */

.sw-hero {
  padding-block: clamp(2rem, 6cqw, 5rem) clamp(3rem, 6cqw, 5rem);
}

.sw-trail {
  margin: 0 0 clamp(1.5rem, 3cqw, 2.5rem);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-stretch: 100%;
  color: var(--dust);
}

.sw-trail a {
  text-decoration: underline;
  text-decoration-color: rgb(166 158 145 / 0.5);
  text-underline-offset: 0.2em;
  transition: color 150ms ease;
}

.sw-trail a:hover {
  color: var(--regolith);
}

/* The project lockup: a glass with the tide coming in. */
.sw-product {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 clamp(1.25rem, 2.5cqw, 2rem);
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.2rem + 1cqw, 2rem);
  font-weight: 640;
  line-height: 1;
}

.sw-mark {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

.sw-mark-glass {
  fill: none;
  stroke: var(--regolith);
  stroke-opacity: 0.45;
  stroke-width: 1.25;
}

.sw-mark-tide {
  fill: var(--regolith);
}

.sw-headline {
  font-size: clamp(3rem, 0.6rem + 6.8cqw, 8.25rem);
  line-height: 0.92;
  text-wrap: balance;
}

.sw-headline span {
  display: block;
}

.sw-lede {
  display: grid;
  justify-items: start;
  gap: 2rem;
  margin-top: clamp(1.75rem, 3cqw, 2.75rem);
}

.sw-lede .intro {
  margin: 0;
}

.sw-status {
  margin: -0.75rem 0 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-stretch: 100%;
  color: var(--dust);
}

/* The month, as a pipeline ------------------------------------------------- */

.sw-flow {
  padding-bottom: clamp(4rem, 9cqw, 8rem);
}

.sw-flow-title {
  margin: 0 0 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 400;
  font-stretch: 100%;
  color: var(--dust);
}

/* The sources column is wider; the inbox lines up under import, sort and split. */
.flow-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(6, minmax(0, 1fr));
  gap: 2rem clamp(0.75rem, 1.6cqw, 1.5rem);
}

.flow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

/* Each step is a length of rail with an arrowhead pointing at the next. */
.flow-step {
  --rail-color: var(--regolith);
  position: relative;
  padding-top: 1rem;
  background: linear-gradient(var(--rail-color), var(--rail-color)) 0 0 / 100% 1.5px no-repeat;
  counter-increment: step;
}

.flow-step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-stretch: 100%;
  color: var(--dust);
}

.flow-step::after {
  content: "";
  position: absolute;
  top: -3.25px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--rail-color);
  border-right: 1.5px solid var(--rail-color);
  rotate: 45deg;
}

/* The last step ends the line instead of pointing on. */
.flow-close::after {
  top: -6px;
  right: 0;
  width: 0;
  height: 13.5px;
  border-top: 0;
  rotate: none;
}

.flow-settle {
  --rail-color: var(--sodium);
}

.sw .flow-step h3 {
  font-family: var(--display);
  font-size: clamp(1.25rem, 0.9rem + 0.8cqw, 1.625rem);
  font-weight: 640;
  line-height: 1.05;
}

.sw .flow-settle h3 {
  color: var(--sodium);
}

.flow-step p {
  margin: 0.5rem 0 0;
  padding-right: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--dust);
  text-wrap: pretty;
}

.flow-sources {
  margin: 0.75rem 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-stretch: 100%;
  line-height: 1.35;
  color: var(--dust);
}

.flow-sources li {
  padding-block: 0.375rem;
  border-bottom: 1px solid var(--hairline);
}

.flow-inbox {
  grid-column: 2 / 5;
  margin: 0;
  padding: 1rem 1.25rem 1.125rem;
  border: 1px dashed rgb(166 158 145 / 0.6);
  border-radius: 16px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--dust);
  text-wrap: pretty;
}

.flow-inbox strong {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
  color: var(--regolith);
}

/* Sections ------------------------------------------------------------------ */

.sw-section {
  padding-block: clamp(3.5rem, 8cqw, 7rem);
  border-top: 1px solid var(--hairline);
}

.sw-section-head {
  display: grid;
  gap: 1rem;
  max-width: 50rem;
  margin-bottom: clamp(2.5rem, 5cqw, 4rem);
}

.sw-section-head p {
  max-width: 52ch;
  margin: 0;
  font-size: 1.1875rem;
  color: var(--dust);
  text-wrap: pretty;
}

.sw-h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 1rem + 3.2cqw, 3.75rem);
  font-weight: 640;
  letter-spacing: -0.01em;
  line-height: 1;
  text-wrap: balance;
}

/* The problem --------------------------------------------------------------- */

.problem {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 2rem clamp(2rem, 6cqw, 6rem);
  align-items: start;
}

.problem .sw-section-head {
  margin-bottom: 0;
}

.problem-copy p {
  max-width: 52ch;
  margin: 0 0 1.25rem;
  font-size: 1.1875rem;
  text-wrap: pretty;
}

/* What it does ------------------------------------------------------------ */

.does {
  border-top: 1px solid var(--hairline);
}

.does-group {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 1rem clamp(1.5rem, 4cqw, 4rem);
  padding-block: 2rem 1.25rem;
  border-bottom: 1px solid var(--hairline);
}

.does-group:last-child {
  border-bottom: 0;
}

.sw .does-head h3 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.1rem + 1.2cqw, 2rem);
  font-weight: 640;
  line-height: 1.05;
}

.does-head p {
  max-width: 28ch;
  margin: 0.625rem 0 0;
  color: var(--dust);
  text-wrap: pretty;
}

.does-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: clamp(1.5rem, 3cqw, 3rem);
}

.does-group li {
  position: relative;
  padding: 0 0 1rem 1.25rem;
  break-inside: avoid;
  text-wrap: pretty;
}

.does-group li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 0.5rem;
  height: 1.5px;
  background: var(--dust);
}

/* The month-end audit ----------------------------------------------------- */

.audit {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.5rem clamp(2rem, 5cqw, 5rem);
  align-items: start;
  max-width: 76rem;
}

.ledger {
  padding: clamp(1.5rem, 3cqw, 2.5rem);
  border: 1px solid rgb(217 138 67 / 0.55);
  border-radius: 22px 22px 22px 6px;
  background: #221f1c;
  box-shadow: inset 3px 0 0 var(--sodium);
}

.ledger p {
  margin: 0;
}

.ledger-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3cqw, 2.5rem) !important;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-stretch: 100%;
  color: var(--dust);
}

.ledger-meta span:first-child {
  color: var(--sodium);
}

/* Set in the text cut: it has the euro sign, the display cut doesn't. */
.ledger-line {
  font-size: clamp(1.75rem, 1rem + 2.4cqw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.ledger-line strong {
  font-weight: 500;
  color: var(--sodium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ledger-sum {
  margin: clamp(1.75rem, 3cqw, 2.5rem) 0 0;
  border-top: 1px solid var(--hairline);
}

.ledger-sum div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.625rem;
  border-bottom: 1px solid var(--hairline);
}

.ledger-sum dt {
  color: var(--dust);
}

.ledger-sum dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.ledger-sum .ledger-total {
  border-top: 1px solid rgb(236 229 216 / 0.5);
  border-bottom: 0;
}

.ledger-total dt,
.ledger-total dd {
  color: var(--regolith);
  font-weight: 500;
}

.sw .checks-title {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 400;
  font-stretch: 100%;
  color: var(--dust);
}

.checklist {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.checklist li {
  position: relative;
  padding: 0.75rem 0 0.75rem 2rem;
  border-bottom: 1px solid var(--hairline);
  text-wrap: pretty;
}

.check-ok::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 1.125rem;
  width: 0.75rem;
  height: 0.375rem;
  border-left: 1.5px solid var(--regolith);
  border-bottom: 1.5px solid var(--regolith);
  rotate: -45deg;
}

.check-flag {
  color: var(--dust);
}

.check-flag::before {
  content: "";
  position: absolute;
  left: 0.1875rem;
  top: 1.0625rem;
  width: 0.875rem;
  height: 0.875rem;
  border: 1.5px dashed var(--dust);
  border-radius: 50%;
}

.checks-result {
  margin: 1.25rem 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-stretch: 100%;
  color: var(--dust);
}

/* Early access: the one light panel on the page, so the ask can't be missed. */

.sw-soon {
  padding-block: clamp(4rem, 9cqw, 8rem);
  background: var(--regolith);
  color: var(--basalt);
}

.sw-soon ::selection {
  background: var(--basalt);
  color: var(--regolith);
}

.sw-soon :focus-visible {
  outline-color: var(--basalt);
}

.sw-soon-head {
  display: grid;
  gap: 1.25rem;
  max-width: 48rem;
}

.sw-soon-head p {
  max-width: 48ch;
  margin: 0;
  font-size: 1.1875rem;
  color: #5d574e; /* Dust, darkened for the light panel: 6.3:1 on Regolith */
  text-wrap: pretty;
}

.sw-soon .contact {
  margin-top: clamp(2rem, 4cqw, 3rem);
}

.sw-soon .button {
  background: var(--basalt);
  color: var(--regolith);
}

.sw-soon .button:hover {
  background: #33302b;
}

.sw-soon .address {
  color: #5d574e;
}

/* Smaller screens ------------------------------------------------------------ */

@media (max-width: 1023px) {
  /* The pipeline turns vertical: the rail runs down the left edge. */
  .flow-wrap,
  .flow {
    grid-template-columns: minmax(0, 1fr);
  }

  .flow {
    gap: 0.5rem;
  }

  .flow-step {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    padding: 0 0 1.75rem 1.25rem;
    background-size: 1.5px 100%;
  }

  .flow-step > * {
    grid-column: 2;
  }

  .flow-step::before {
    grid-row: 1;
    margin: 0;
    line-height: 2.1;
  }

  .flow-step::after {
    top: auto;
    bottom: 2px;
    right: auto;
    left: -3.25px;
    rotate: 135deg;
  }

  .flow-close::after {
    bottom: 0;
    left: -6px;
    width: 13.5px;
    height: 0;
    border-right: 0;
    border-bottom: 1.5px solid var(--rail-color);
    rotate: none;
  }

  .flow-sources {
    max-width: 22rem;
  }

  .flow-inbox {
    grid-column: 1;
    max-width: 34rem;
  }

  .problem,
  .audit {
    grid-template-columns: minmax(0, 1fr);
  }

  .audit {
    max-width: 44rem;
  }

  .does-group {
    grid-template-columns: minmax(0, 1fr);
  }

  .does-head p {
    max-width: 48ch;
  }
}

@media (max-width: 719px) {
  .does-group ul {
    columns: 1;
  }

  .ledger-meta {
    flex-direction: column;
    gap: 0.25rem;
  }
}

@media (max-width: 480px) {
  .sw-headline {
    font-stretch: 88%;
    font-size: clamp(2.75rem, 1rem + 9cqw, 3.5rem);
  }

  .sw-lede .button,
  .sw-soon .button {
    width: 100%;
  }
}

/* Motion: the month runs once along the rail, ending at the closed books. --- */

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .flow-step {
    animation: sw-rail 600ms var(--ease) both;
  }

  .flow-step::after {
    animation: sw-fade 250ms ease both;
  }

  .flow-step:nth-child(1) { animation-delay: 200ms; }
  .flow-step:nth-child(2) { animation-delay: 350ms; }
  .flow-step:nth-child(3) { animation-delay: 500ms; }
  .flow-step:nth-child(4) { animation-delay: 650ms; }
  .flow-step:nth-child(5) { animation-delay: 800ms; }
  .flow-step:nth-child(6) { animation-delay: 950ms; }
  .flow-step:nth-child(7) { animation-delay: 1100ms; }
  .flow-step:nth-child(1)::after { animation-delay: 650ms; }
  .flow-step:nth-child(2)::after { animation-delay: 800ms; }
  .flow-step:nth-child(3)::after { animation-delay: 950ms; }
  .flow-step:nth-child(4)::after { animation-delay: 1100ms; }
  .flow-step:nth-child(5)::after { animation-delay: 1250ms; }
  .flow-step:nth-child(6)::after { animation-delay: 1400ms; }
  .flow-step:nth-child(7)::after { animation-delay: 1550ms; }
}

@keyframes sw-rail {
  from { background-size: 0 1.5px; }
}

@keyframes sw-fade {
  from { opacity: 0; }
}

/* Windows high contrast and other forced palettes. */

@media (forced-colors: active) {
  .flow-step { --rail-color: CanvasText; }
  .flow-settle { --rail-color: Highlight; }
  .sw-mark-glass { stroke: CanvasText; }
  .sw-mark-tide { fill: CanvasText; }
  .check-flag::before { border-color: CanvasText; }
  .check-ok::before { border-color: CanvasText; }
  .sw-soon .button { border: 2px solid ButtonText; }
}