/*
  Styles for /tools and the calculator pages, loaded only by those pages (see
  `stylesheets` in pageShell.ts). Colours come from content.css tokens, so
  both themes follow automatically.

  The calculator sits outside `.content-article` on purpose: that class
  styles running prose and mutes it in dark mode, and a calculator's labels
  and figures are neither. Its own styles are calculator.css.
*/

/* ── /tools index: AtlasDays' calculator list ─────────────────────────── */

.tools-index__group:first-of-type {
  margin-top: 1.5rem;
}

.tools-index__group + .tools-index__group {
  margin-top: 2rem;
}

.tools-index__label {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--content-text-faint);
}

.tools-index__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .tools-index__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tools-index__grid > li {
  display: flex;
}

/* A card: the flag, centred beside the title over a one-sentence description. */
.tools-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 4.25rem;
  padding: 0.85rem 0.6rem 0.85rem 0.75rem;
  color: var(--content-text);
  text-decoration: none;
  background: var(--content-bg);
  border: 1px solid var(--content-border);
  border-radius: 16px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Hover lifts the card, not the text: no link colour, no underline. */
.tools-card:hover,
.tools-card:focus-visible {
  color: var(--content-text);
  text-decoration: none;
  border-color: var(--content-text-faint);
  background: var(--content-surface);
}

.tools-card:hover * {
  text-decoration: none;
}

.tools-card__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.tools-card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.tools-card__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.tools-card__description {
  font-size: 0.9rem;
  line-height: 1.5;
  /* A step toward the text colour from muted, so the short line reads easily in both themes. */
  color: color-mix(in srgb, var(--content-text-muted) 80%, var(--content-text));
}

/* ── Page grid ─────────────────────────────────────────────────────────── */

.tool-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "intro"
    "widget"
    "prose";
  row-gap: 1.5rem;
  max-width: var(--content-article-width);
  margin: 0 auto;
}

.tool-page__intro { grid-area: intro; }
.tool-page__prose { grid-area: prose; }
/* The FAQ onwards: a second grid, so nothing pinned in the first runs beside it. */
.tool-page--after,
.tool-page--after.tool-page--calculator {
  grid-template-areas: "more";
}

.tool-page__more { grid-area: more; }

/*
  The explainer's last section keeps its bottom margin, which is the gap
  between sections; the FAQ after it, in the second grid, adds none of its own
  (margins don't collapse across the two grids).
*/
.tool-page__more > section:first-child {
  margin-top: 0;
}

.tool-page__intro .content-callout {
  margin-bottom: 0;
}

.tool-page__prose > section:first-child {
  margin-top: 2rem;
}

/*
  The main column always sits exactly where a rule page puts its article:
  same width, same position (`.content-main--rule` + `.content-layout` in
  content.css). The results only move beside it once a 300px column genuinely
  fits in the right-hand space (1480px, below); until then they stack under
  the steps, and the column does not move either way.
*/
@media (min-width: 1320px) {
  .tool-page {
    max-width: var(--content-article-width);
    margin: 0 0 0 calc((100% - var(--content-article-width)) / 2);
  }
}

/*
  Every calculator is one widget that holds both the inputs and the results,
  so on narrower screens it takes one grid area and lays itself out
  (calculator.css: results after the steps, or beside them when the widget is
  wide enough).
*/
.tool-page__widget {
  grid-area: widget;
  min-width: 0;
}

/*
  Wide: the results take a 300px column a card gap from the steps, and stay
  pinned beside them and the explainer until the FAQ. The steps and the article keep the full article
  width, so they line up with a rule page's column.

  The widget's results live inside it, and a sticky element cannot outlast its
  container, so on this page only its wrappers step out of the box tree and
  its two columns become items of this grid. Each is made a container so the
  widget's own container queries (calendar beside timeline) still have one.
*/
@media (min-width: 1480px) {
  .tool-page--calculator {
    grid-template-columns: var(--content-article-width) 300px;
    /* The same small gap the widget's cards have between them. */
    column-gap: 0.75rem;
    /* The results column hangs into the right-hand space, as a rule page's TOC does. */
    max-width: none;
    width: calc(var(--content-article-width) + 0.75rem + 300px);
    grid-template-areas:
      "intro .    "
      "main  aside"
      "prose aside";
  }

  .tool-page--after,
  .tool-page--after.tool-page--calculator {
    grid-template-areas: "more .";
  }

  .tool-page--calculator .tool-page__widget,
  .tool-page--calculator .calc-root,
  .tool-page--calculator .calc {
    display: contents;
  }

  .tool-page--calculator .calc__main,
  .tool-page--calculator .calc__aside {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--calc-step-gap);
    min-width: 0;
  }

  .tool-page--calculator .calc__main {
    grid-area: main;
  }

  .tool-page--calculator .calc__aside {
    --calc-slide-from: translateX(-1.5rem);
    grid-area: aside;
    align-self: start;
    position: sticky;
    top: calc(var(--site-header-height) + 1rem);
    /* Level with the first cards, below the first step's title. */
    margin-top: var(--calc-step-offset);
    gap: 0.75rem;
  }

  .tool-page--calculator .calc__aside .calc-aside-footer {
    margin-top: 0;
  }

  /* Under the 0.75rem gap: a little further from the results than the line under them. */
  .tool-page--calculator .calc__aside .calc-app-promo {
    margin-top: 1rem;
  }
}

/* A section's closing "Learn more →" link sits close under the paragraph it follows. */
.content-article p.tool-page__section-link {
  margin-top: -0.5rem;
}