/*
  The day-count calculator widget (src/shared/calculators/ui).

  Self-contained so the widget can sit on any page: every rule is scoped to a
  `calc-` class, and every colour reads a `--calc-*` token that falls back to
  the site's content.css token, then to a literal. On immio.app the widget
  follows the light/dark theme through content.css; on another site it uses
  the literals unless the host page sets the `--calc-*` tokens itself.

  Layout is by container query, not viewport: the widget is as wide as the
  column it is put in, which is not the window's business.
*/

.calc-root {
  /* A step title's height plus the gap under it: where a step's first card starts. */
  --calc-step-offset: calc(1.4rem * 1.4 + 0.75rem);
  /* Between steps; cards inside a step sit 0.75rem apart. */
  --calc-step-gap: 2.5rem;
  --calc-bg: var(--content-bg, #ffffff);
  /* The app's timeline page background. */
  --calc-well: var(--content-table-header-bg, #f8f9fb);
  /* Step cards, the tracker card and the calendar: white on a light page. */
  --calc-card: var(--calc-bg);
  /* Inputs, grey tabs and hover circles inside a card. */
  --calc-field: var(--calc-surface);
  --calc-surface: var(--content-surface, #f3f4f6);
  --calc-text: var(--content-text, #1a1a1a);
  --calc-text-muted: var(--content-text-muted, #a5a5a7);
  --calc-text-faint: var(--content-text-faint, #8a8f98);
  /* Hints, details and notes: darker than "faint", which is for labels and placeholders only. */
  --calc-text-secondary: color-mix(in srgb, var(--calc-text) 64%, var(--calc-bg));
  --calc-border: var(--content-border, #e6e6e6);
  --calc-primary: var(--immio-primary, #007aff);
  --calc-primary-container: var(--immio-primary-container, #ebf4fb);
  /* Status colours and gradients from the Immio app's tracker card. */
  --calc-ok: #34c759;
  --calc-ok-gradient: linear-gradient(90deg, #2eef58, #34c759);
  --calc-warning: #ffa41c;
  --calc-warning-gradient: linear-gradient(90deg, #ffd249, #ffa41c);
  --calc-violation: #ff3b30;
  --calc-violation-gradient: linear-gradient(90deg, #fa6f68, #e61004);
  --calc-radius: 20px;
  --calc-radius-small: 12px;
  --calc-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.06);

  container-type: inline-size;
  color: var(--calc-text);
  font-size: 1rem;
  line-height: 1.4;
}

html[data-theme="dark"] .calc-root {
  --calc-shadow: none;
  --calc-well: var(--content-surface, #1e2126);
  /* Dark cards lift off the page in the timeline's colour, so every step reads alike. */
  --calc-card: var(--calc-well);
  --calc-field: color-mix(in srgb, var(--calc-text) 9%, var(--calc-card));
}

.calc-root *,
.calc-root *::before,
.calc-root *::after {
  box-sizing: border-box;
}

.calc-root p,
.calc-root h3,
.calc-root h4,
.calc-root ul {
  margin: 0;
}

.calc-root button {
  font: inherit;
  color: inherit;
}

/*
  Hidden while saved stays are restored into it (CalculatorEmbed.tsx), so
  the empty server state never flashes. Shown anyway after three seconds,
  should the script never run.
*/
.calc-root.is-restoring {
  visibility: hidden;
  animation: calc-reveal 0s 3s forwards;
}

@keyframes calc-reveal {
  to {
    visibility: visible;
  }
}

/* Steps sit a step apart; cards inside a step a card apart. */
.calc {
  display: flex;
  flex-direction: column;
  gap: var(--calc-step-gap);
}

/*
  Narrow: the steps in one column, in their numbered order. The two wrappers
  drop out of the box tree and `order` places the steps, and the results
  panels (in the aside) after the last step — the planner's too, where there
  is one — so every input comes before what it answers.
*/
.calc__main,
.calc__aside {
  display: contents;
}

.calc__standing { order: 1; }
.calc__settings { order: 2; }
.calc__history { order: 3; }
.calc__questions { order: 4; }
.calc__planner { order: 5; }

/* A step: its numbered title, then its cards. */
.calc-step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

/* The size of the page's section headings (.content-article section h2), so the steps read as sections. */
.calc-root .calc-step__title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--calc-text);
}

.calc-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--calc-primary-container);
  color: var(--calc-primary);
  font-size: 0.95rem;
  font-weight: 700;
}

/* "Where you stand": a tracker card per limit, across the column, one under the other. */
.calc-trackers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

/*
  Wide: the steps on the left, "Where you stand" pinned on the right with the
  same small gap the cards have between them. On immio.app the tool page does
  this itself at 1480px and up (tools.css), so the pinned column can run past
  the widget beside the explainer; this is the layout anywhere else.
*/
@container (min-width: 960px) {
  .calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: 0.75rem;
    align-items: start;
  }

  .calc__main,
  .calc__aside {
    display: flex;
    flex-direction: column;
    gap: var(--calc-step-gap);
    min-width: 0;
  }

  /* Level with the tracker cards, below the "Where you stand" title. */
  .calc__aside .calc-aside-footer {
    margin-top: 0;
  }

  .calc__aside .calc-app-promo {
    margin-top: 1rem;
  }

  .calc__aside {
    --calc-slide-from: translateX(-1.5rem);
    gap: 0.75rem;
    position: sticky;
    top: calc(var(--site-header-height, 0px) + 1rem);
    margin-top: var(--calc-step-offset);
  }
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

.calc-card {
  background: var(--calc-card);
  border: 1px solid var(--calc-border);
  border-radius: var(--calc-radius);
  padding: 1rem 1.1rem;
}

.calc-card__header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.4rem;
}

.calc-card__title {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
}

.calc-card__description,
.calc-card__note {
  font-size: 0.88rem;
  color: var(--calc-text-secondary);
}

/* A card's note under its fields ("Only the largest reduction counts"). */
.calc-card__note {
  margin-top: 0.75rem !important;
}

/* ── Setting rows ───────────────────────────────────────────────────────── */

.calc-fields {
  display: flex;
  flex-direction: column;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.calc-fields > .calc-card__header {
  padding-top: 0.6rem;
}

.calc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.65rem 0;
}


.calc-row__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 6rem;
}

.calc-row__label {
  font-size: 1rem;
  font-weight: 500;
}

.calc-row__hint {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--calc-text-secondary);
}

.calc-row__control {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

/* Only a select gives way, truncating its label; dates and numbers keep their size. */
.calc-row__control:has(.calc-select) {
  flex-shrink: 1;
}

/*
  With a hint, the control lines up with the label, not with the label and
  hint together: the label and the control share the first line, the hint
  runs under both, the full width of the card.
*/
.calc-row:not(.calc-row--wide):not(:has(.calc-segmented--compact)):has(.calc-row__hint) {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) minmax(0, max-content);
  align-items: center;
  row-gap: 0.15rem;
}

.calc-row:not(.calc-row--wide):not(:has(.calc-segmented--compact)):has(.calc-row__hint) .calc-row__text {
  display: contents;
}

.calc-row:not(.calc-row--wide):not(:has(.calc-segmented--compact)):has(.calc-row__hint) .calc-row__label {
  grid-row: 1;
  grid-column: 1;
}

.calc-row:not(.calc-row--wide):not(:has(.calc-segmented--compact)):has(.calc-row__hint) .calc-row__hint {
  grid-row: 2;
  grid-column: 1 / -1;
}

.calc-row:not(.calc-row--wide):not(:has(.calc-segmented--compact)):has(.calc-row__hint) .calc-row__control {
  grid-row: 1;
  grid-column: 2;
}

.calc-row--wide {
  flex-direction: column;
  align-items: stretch;
}

.calc-row--wide .calc-row__control {
  justify-content: stretch;
}

@container (min-width: 520px) {
  .calc-row--wide {
    flex-direction: row;
    align-items: center;
  }

  .calc-row--wide .calc-row__control {
    flex: 0 1 50%;
  }
}

/*
  The look every choice control shares — a select, a select's short face, a
  date: the value in the accent colour with an up–down chevron after it, no
  box and no underline. An unset value ("Select a country", "Select a date")
  looks the same, so it reads as the thing to tap.
*/
.calc-picker,
/* On a button (the country setting), over the widget's own button reset. */
.calc-root button.calc-picker {
  display: inline-block;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--calc-primary);
  white-space: nowrap;
  text-decoration: none;
  padding: 0.2rem 1.1rem 0.2rem 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M2 5 5 2l3 3M2 9l3 3 3-3' fill='none' stroke='%23007aff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center / 8px 12px;
}

/* Date: the formatted value on top, the native picker invisibly over it. */

.calc-date {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.calc-date__input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
  font-size: 16px; /* No zoom on focus in iOS Safari. */
}

/* A date range: start and end side by side, wrapping under each other where the row is narrow. */
.calc-date-range {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem 0.5rem;
}

/* In the dates' own accent and weight, so the range reads as one value. */
.calc-date-range__dash {
  font-weight: 600;
  color: var(--calc-primary);
}

/* The select itself, on top of `calc-picker`. */
.calc-select {
  /* As wide as the chosen option, not the longest one, so it sits close to a flag before it. */
  field-sizing: content;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 0;
  text-align: right;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/*
  A select whose chosen option has a short form ("6 April" for "6 April
  (United Kingdom)"): the face shows the short form, styled as a select, and
  the real select lies invisibly over it, so the open list still has the
  full labels.
*/
.calc-select-short {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.calc-select-short .calc-select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
}

/* A country select: the flag of the chosen country before its name. */
/* A country setting: the shared picker face, the flag before the name, the list opening to the right edge. */
/*
  Always as tall as the flag needs, flag or not (box-sizing is border-box, so
  this is the flag plus the picker's padding): picking a country does not make
  the row taller than "Select a country" was.
*/
.calc-root button.calc-country__face {
  min-height: calc(24px + 0.4rem);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 0;
  cursor: pointer;
}

.calc-country__face img {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

/*
  A flex box, not a line of text: on a line the button sits on its baseline,
  which the flag moves down, and the line — and the row — grows to fit.
*/
.calc-country--field {
  display: flex;
  align-items: center;
}

.calc-country--field .calc-country__popover {
  left: auto;
  right: 0;
}

/* No focus mark on a select: browsers draw it on a click as well as from the keyboard. */
.calc-select:focus,
.calc-select:focus-visible {
  outline: none;
  text-decoration: none;
}

.calc-number {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.calc-number__input {
  width: 5.5rem;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: right;
  color: var(--calc-primary);
  background: var(--calc-field);
  border: 1px solid transparent;
  /* Rounded like the tab selector's buttons (.calc-segmented__body). */
  border-radius: 1.5rem;
  padding: 0.35rem 0.8rem;
}

.calc-number__input::placeholder {
  font-weight: 500;
  color: var(--calc-text-faint);
}

.calc-number__input:focus {
  outline: none;
  border-color: var(--calc-primary);
}

/* A currency before the amount, and room for six figures after it. */
.calc-number__prefix {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--calc-text-secondary);
}

.calc-number__prefix + .calc-number__input {
  width: 7.5rem;
}

.calc-number__suffix {
  font-size: 0.9rem;
  color: var(--calc-text-secondary);
}

/*
  The app's TabSelector: one rounded button per option, a small gap apart.
  The chosen one is light blue with blue text and takes more of the width
  (1.2 to 0.8, eased as in the app); the others are grey.
*/
/*
  Never narrower than its labels: the selector holds its own width and the
  row's label gives way instead, so no tab is ever cut short.
*/
.calc-segmented {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  min-width: max-content;
}

/*
  Compact: beside the field's label, or under it when the row is too narrow.
  Every compact tab has one of two fixed widths — the chosen one wider, the
  others all the same — so two selectors one under the other (the SRT's
  arriver / leaver and total / trips) are the same width with their tabs
  aligned. Both widths fit the longest of their labels whole.
*/
.calc-row:has(.calc-segmented--compact) {
  flex-wrap: wrap;
}

.calc-segmented--compact {
  width: auto;
}

.calc-segmented--compact .calc-segmented__option {
  flex: none;
  width: 9rem;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.calc-segmented--compact .calc-segmented__option:has(input:checked) {
  width: 12.5rem;
}

/*
  The row is shared out in proportion — the chosen tab takes one and a half
  parts to each other tab's one — but no tab goes narrower than its label:
  where the row is too tight for the proportion, the labels win and nothing
  is cut short.
*/
.calc-segmented__option {
  position: relative;
  flex: 1 1 0;
  min-width: max-content;
  cursor: pointer;
  transition: flex-grow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.calc-segmented__option:has(input:checked) {
  flex-grow: 1.5;
}

/*
  Where the chosen answer should stand out more (earned settlement's public
  funds, whose labels differ a lot in length): each tab starts at its label's
  width with the spare room shared evenly, and the chosen one gains wide
  padding on both sides. However short its label ("No"), the chosen tab is
  plainly bigger, and the padding eases in and out rather than the widths
  jumping as a share-out held back by the long labels would.
*/
.calc-segmented--emphasis .calc-segmented__option,
.calc-segmented--emphasis .calc-segmented__option:has(input:checked) {
  flex: 1 1 auto;
  /* Never wider than the card: a label too long for a narrow row wraps to a second line instead. */
  min-width: min-content;
}

.calc-segmented--emphasis {
  min-width: 0;
}

.calc-segmented--emphasis .calc-segmented__label {
  white-space: normal;
}


.calc-segmented--emphasis .calc-segmented__body {
  /* Room around the labels of the tabs not chosen too, so they do not look squeezed beside the chosen one. */
  padding-inline: 0.75rem;
  /* A short label ("No") still makes a tab of a fair size. */
  min-width: 4.5rem;
  transition: background-color 0.2s ease, color 0.2s ease, padding 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.calc-segmented--emphasis .calc-segmented__option input:checked + .calc-segmented__body {
  padding-inline: 1.5rem;
}

/*
  Beside the question (a wide enough card), the labels stay on one line: the
  tabs take the width those need rather than half the row — the English ones
  need 345px, the Russian 459 — and the question beside them gives way.
  Narrower, under the question, a label too long for the card still wraps
  rather than overflowing it.
*/
@container (min-width: 520px) {
  .calc-row--wide:has(.calc-segmented--emphasis) .calc-row__control {
    flex: 0 0 auto;
  }

  .calc-segmented--emphasis .calc-segmented__option,
  .calc-segmented--emphasis .calc-segmented__option:has(input:checked) {
    min-width: max-content;
  }

  .calc-segmented--emphasis .calc-segmented__label {
    white-space: nowrap;
  }
}

.calc-segmented__option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.calc-segmented__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 2.625rem;
  height: 100%;
  padding: 0.35rem 0.75rem;
  text-align: center;
  color: var(--calc-text-muted);
  background: var(--calc-field);
  border-radius: 1.5rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.calc-segmented__label {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

.calc-segmented__option input:checked + .calc-segmented__body {
  color: var(--calc-primary);
  background: var(--calc-primary-container);
}

.calc-segmented__option input:focus-visible + .calc-segmented__body {
  outline: 2px solid var(--calc-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .calc-segmented__option,
  .calc-segmented__body {
    transition: none;
  }
}

/* Toggles: the questions of the SRT */

.calc-toggles {
  display: flex;
  flex-direction: column;
  margin-top: 0.25rem;
}

.calc-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 0;
  cursor: pointer;
}

/*
  The checkbox, as the Immio app draws it (AppCheckBox): a 20px circle with a
  1.5px grey border; checked, it fills with the accent and a
  white tick slides in from the left over 200ms, fading out again when
  unchecked. The real checkbox sits invisibly on top of it, so clicks,
  keyboard and screen readers work as with any checkbox.
*/
.calc-toggle {
  position: relative;
}

.calc-check__input {
  position: absolute;
  top: 0.7rem;
  left: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.calc-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.05rem;
  border: 1.5px solid var(--calc-text-faint);
  border-radius: 50%;
  color: #fff;
  background: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.calc-check svg {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 0.2s ease, clip-path 0s linear 0.2s;
}

.calc-check__input:checked + .calc-check {
  background: var(--calc-primary);
  border-color: var(--calc-primary);
}

.calc-check__input:checked + .calc-check svg {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.2s ease-out, opacity 0s;
}

.calc-check__input:focus-visible + .calc-check {
  outline: 2px solid var(--calc-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .calc-check,
  .calc-check svg,
  .calc-check__input:checked + .calc-check svg {
    transition: none;
  }
}

.calc-toggle__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.calc-toggle__label {
  font-size: 1rem;
  font-weight: 500;
}

.calc-toggle__hint {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--calc-text-secondary);
}

/* ── Tracker card (the app's StayTrackerCard) ───────────────────────────── */



.calc-tracker {
  background: var(--calc-card);
  border: 1px solid var(--calc-border);
  border-radius: var(--calc-radius);
  box-shadow: var(--calc-shadow);
  padding: 1.35rem 1.4rem 1.25rem;
}

/* Status colours are per section: a card can hold one limit that is fine and one that is not. */
.calc-tracker__body {
  --status: var(--calc-ok);
  --status-gradient: var(--calc-ok-gradient);
}

.calc-tracker__body.is-warning {
  --status: var(--calc-warning);
  --status-gradient: var(--calc-warning-gradient);
}

.calc-tracker__body.is-violation {
  --status: var(--calc-violation);
  --status-gradient: var(--calc-violation-gradient);
}

.calc-tracker__body.is-none {
  --status: var(--calc-text);
  --status-gradient: var(--calc-text);
}

.calc-tracker__body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.calc-tracker__section {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--calc-text-faint);
}

.calc-tracker__range {
  font-weight: 500;
}

.calc-tracker__count {
  display: flex;
  align-items: baseline;
  gap: 0;
  color: var(--status);
  font-variant-numeric: tabular-nums;
}

/* The count is the size of the limit after the slash, and bold. */
.calc-tracker__value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.calc-tracker__limit {
  font-size: 1.6rem;
  font-weight: 500;
  white-space: pre;
}

.calc-tracker__unit {
  flex: 1;
  font-size: 1.1rem;
}

.calc-tracker__percent {
  font-size: 1.05rem;
}

.calc-tracker__bar {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--status) 14%, transparent);
  overflow: hidden;
}

.calc-tracker__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--status-gradient);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.calc-tracker__goal {
  font-size: 1.05rem;
  color: var(--status);
}

@media (prefers-reduced-motion: reduce) {
  .calc-tracker__fill {
    transition: none;
  }
}

/* ── Calendar and timeline ──────────────────────────────────────────────── */

/* Half the column each, as AtlasDays lays them out; stacked on a phone. Same height. */
.calc-days {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-items: stretch;
  /* Room for the hint under the calendar (.calc-calendar__hint). */
  margin-bottom: 2.75rem;
}

@container (min-width: 560px) {
  .calc-days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
  The scroller is two months tall, sized for months of six week rows, so this
  month and the one before are always in view whole; most months need five,
  which leaves a little of the month before showing under the header.
*/
.calc-calendar {
  --month-title: 2rem;
  --weekdays: 1.6rem;
  --week: 2.75rem;
  --month-gap: 0.35rem;
  --overlay: 2.75rem;
  --hint-space: 0.5rem;
  /* Room above the month before last, so its first week is not tight under the header (HEADER_ROOM in StayCalendar). */
  --header-room: 12px;
  position: relative;
}

.calc-calendar-card {
  padding: 0 0.6rem;
  overflow: hidden;
}

/*
  The header over the top of the calendar, on the app's top-bar gradient:
  solid where the month name sits, easing to clear, so the weeks scrolling
  under it fade out rather than being cut off.
*/
.calc-calendar__top {
  position: absolute;
  z-index: 3;
  inset: 0 -0.6rem auto;
  height: calc(var(--overlay) + 1.75rem);
  padding: 0.75rem 1rem 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--calc-card) 0%,
    color-mix(in srgb, var(--calc-card) 95%, transparent) 20%,
    color-mix(in srgb, var(--calc-card) 85%, transparent) 40%,
    color-mix(in srgb, var(--calc-card) 60%, transparent) 55%,
    color-mix(in srgb, var(--calc-card) 35%, transparent) 70%,
    color-mix(in srgb, var(--calc-card) 15%, transparent) 80%,
    color-mix(in srgb, var(--calc-card) 5%, transparent) 95%,
    transparent 100%
  );
}

.calc-calendar__month {
  font-size: 1.12rem;
  font-weight: 700;
}

/* Opens at the latest week without script: see StayCalendar. */
.calc-calendar__scroller {
  display: flex;
  flex-direction: column-reverse;
  height: calc(2 * (var(--month-title) + var(--weekdays) + 6 * var(--week)) + var(--month-gap) + var(--hint-space) + var(--header-room));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.calc-calendar__scroller::-webkit-scrollbar {
  display: none;
}

/* Room above the earliest month for the header, and below the latest for the hint. */
.calc-calendar__inner {
  padding: var(--overlay) 0 var(--hint-space);
}

.calc-month + .calc-month {
  margin-top: var(--month-gap);
}

.calc-month__title {
  height: var(--month-title);
  padding: 0 0.4rem;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: var(--month-title);
}

/* The app's MonthHeader: light weekday letters under each month's title. */
.calc-month__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  height: var(--weekdays);
  align-items: center;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  color: var(--calc-text-faint);
}

/* As many week rows as the month needs, so there is no empty row between months. */
.calc-month__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: var(--week);
}

/* The blank cells before the 1st and after the last day: banded only when a range runs through them. */
.calc-day--blank {
  cursor: default;
}

.calc-day--blank::after {
  display: none;
}

/*
  The instruction under the calendar — the app's selection hint: a light
  blue pill, centred, springing up each time it changes.
*/
/*
  The calendar keeps its own height (two months); the timeline beside it is
  at least as tall and grows past it as stays are added. The hint hangs under
  the calendar card rather than taking room in its column; .calc-days keeps
  the space below it free.
*/
.calc-calendar-column {
  position: relative;
  align-self: start;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.calc-calendar__hint {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  right: 0;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto !important;
  padding: 0.45rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  color: var(--calc-text-secondary);
  background: var(--calc-well);
  border-radius: 999px;
  transform-origin: 50% 100%;
  animation: calc-hint-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes calc-hint-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .calc-calendar__hint {
    animation: none;
  }
}

/*
  A day, as in the Immio app's calendar (TrackerCalendar): no lines, no
  markers — a stay is a light-blue band behind its days with rounded ends and
  blue numbers; the stay being picked has solid blue ends with white numbers.
*/
.calc-day {
  --band: var(--calc-primary-container);
  --inset: 3px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--week);
  padding: 0;
  font-size: 0.9rem !important;
  font-variant-numeric: tabular-nums;
  color: var(--calc-text);
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.calc-day__number {
  position: relative;
  z-index: 2;
}

.calc-day.is-today {
  font-weight: 700;
  color: var(--calc-primary);
}

/* The band: full width between the ends, half width from an end to the edge. */
.calc-day.is-preview::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--inset);
  bottom: var(--inset);
  left: 0;
  right: 0;
  background: var(--band);
}

.calc-day.is-start::before {
  left: 50%;
}

.calc-day.is-end::before {
  right: 50%;
}

.calc-day.is-start.is-end::before {
  display: none;
}

/* The ends: a circle as tall as the band. */
.calc-day.is-start::after,
.calc-day.is-end::after,
.calc-day.is-handle::after,
.calc-day.is-pending::after,
.calc-day:hover::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: var(--inset);
  bottom: var(--inset);
  left: 50%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--band);
}

.calc-day:not(.is-stay):not(.is-preview):not(.is-pending):hover::after {
  background: var(--calc-field);
}

.calc-day.is-stay,
.calc-day.is-preview {
  color: var(--calc-primary);
}


/*
  A stay's band, one per stay covering the day, the whole length of the stay.
  Alone it is the calendar's light blue. Where stays overlap the shorter one
  lies on top of the longer, its rounded ends over the band beneath, a shade
  darker for each stay under it (--depth, set per stay). The selected stay's
  is darker again.
*/
.calc-band {
  --depth: 0;
  --layer: color-mix(in srgb, var(--calc-primary) calc(var(--depth) * 14%), var(--calc-primary-container));
  position: absolute;
  z-index: 0;
  top: var(--inset);
  bottom: var(--inset);
  left: 0;
  right: 0;
  background: var(--layer);
}

.calc-band.is-selected {
  --layer: color-mix(in srgb, var(--calc-primary) calc(var(--depth) * 14% + 18%), var(--calc-primary-container));
}

/* An end: the band stops at the day's middle, rounded off as a circle as tall as the band. */
.calc-band.is-start {
  left: calc(50% - (var(--week) - 2 * var(--inset)) / 2);
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}

.calc-band.is-end {
  right: calc(50% - (var(--week) - 2 * var(--inset)) / 2);
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

.calc-day.is-preview.is-start,
.calc-day.is-preview.is-end,
.calc-day.is-pending {
  color: #fff;
}

.calc-day.is-preview.is-start::after,
.calc-day.is-preview.is-end::after,
.calc-day.is-pending::after {
  background: var(--calc-primary);
}

/* A selected stay's ends: solid handles, dragged to change its dates. */
.calc-day.is-handle {
  color: #fff;
  cursor: grab;
  touch-action: none;
}

.calc-day.is-handle::after {
  background: var(--calc-primary);
  box-shadow: 0 0 0 3px var(--calc-primary-container), 0 2px 6px rgba(0, 122, 255, 0.35);
}

.calc-calendar.is-dragging,
.calc-calendar.is-dragging .calc-day {
  cursor: grabbing;
  user-select: none;
}

.calc-day:focus-visible {
  outline: none;
}

.calc-day:focus-visible .calc-day__number {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Timeline: the app's timeline page — cards on a light grey well. No inner scroll. */

/*
  Never the browser's scroll anchor. Anchoring keeps the first visible
  element still when the page changes height, and with the calendar half in
  view that is a timeline row: adding a stay moves the rows and "Start over"
  removes them, so the browser scrolled the page — hundreds of pixels — to
  follow a row the visitor was not looking at. Left out, the anchor is the
  calendar they are using, and it stays put.
*/
.calc-timeline {
  overflow-anchor: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.85rem 0.75rem 1rem;
  background: var(--calc-well);
  border-radius: var(--calc-radius);
}

.calc-root .calc-timeline__title {
  padding: 0 0.25rem;
  font-size: 1.12rem;
  font-weight: 700;
}

/* Empty: the placeholder, at the bottom of the block above the add button, so the two read as one group. */
.calc-timeline__empty {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  /* Little below: the add button follows, a list gap and its own margin away. */
  padding: 1.5rem 0.75rem 0.15rem;
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: center;
  color: var(--calc-text-secondary);
}

.calc-timeline__empty-title {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--calc-text);
}

/*
  Above the add button: the title, then the empty placeholder or the stays
  and the form. The same minimum height either way — just over half the
  well, which puts the placeholder and the button together in the middle —
  so the button stays exactly where it was when the first stay replaces the
  placeholder, and only moves once the stays grow past it. Where the well has
  no set height (one column on a phone) the minimum is nothing and the button
  just follows what is above it.
*/
.calc-timeline__top {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: calc(50% + 0.9rem);
}

/* Positioned so a row's offsetTop is within the list: only a row that moved in the list glides (StayTimeline). */
.calc-timeline__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

/*
  Scrolled into view when its stay is picked on the calendar: stop below the
  site's fixed top bar, not under it.
*/
.calc-timeline__item {
  scroll-margin-top: calc(var(--site-header-height, 0px) + 0.75rem);
  scroll-margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.75rem;
  padding: 0.45rem 0.6rem 0.45rem 0.85rem;
  background: var(--calc-bg);
  border: 1px solid color-mix(in srgb, var(--calc-border) 70%, transparent);
  border-radius: var(--calc-radius);
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.04);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

html[data-theme="dark"] .calc-timeline__item {
  box-shadow: none;
}

/*
  A stay just added slides down into place; a deleted one slides down and
  fades (LEAVE_MS in StayTimeline), then the rows below glide up into its place.
*/
.calc-timeline__item.is-entering {
  animation: calc-item-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.calc-timeline__item.is-leaving {
  pointer-events: none;
  animation: calc-item-out 0.22s ease-in forwards;
}

@keyframes calc-item-in {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes calc-item-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .calc-timeline__item.is-entering,
  .calc-timeline__item.is-leaving {
    animation: none;
  }
}

.calc-timeline__item.is-selected {
  border-color: var(--calc-primary);
}

/* Where a stay can have a country, its icon is a button that opens the country list. */
.calc-timeline__icon-button {
  display: inline-flex;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.calc-timeline__icon-button:hover .calc-timeline__icon {
  opacity: 0.8;
}

.calc-timeline__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.calc-timeline__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
}

.calc-timeline__dates {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.86rem;
  color: var(--calc-text);
}

.calc-timeline__planned {
  padding: 0 0.4rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--calc-primary);
  background: var(--calc-primary-container);
  border-radius: 999px;
}

.calc-timeline__days {
  flex-shrink: 0;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--calc-text-secondary);
}

/* A stay in another country, kept in the history but not part of this rule's count. */
.calc-timeline__days.is-not-counted {
  font-weight: 500;
  color: var(--calc-text-faint);
}

/* Delete: a round bin in place of the day count on the selected stay. */
.calc-delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  flex-shrink: 0;
  color: var(--calc-violation) !important;
  background: color-mix(in srgb, var(--calc-violation) 10%, var(--calc-bg));
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.calc-delete-button:hover {
  background: color-mix(in srgb, var(--calc-violation) 18%, var(--calc-bg));
}

/* The app's add button: a light-blue pill with a plus, centred under the list. */
.calc-add-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: center;
  margin-top: 0.15rem;
  padding: 0.55rem 1.3rem 0.55rem 0.8rem;
  font-size: 0.95rem !important;
  font-weight: 500;
  color: var(--calc-primary) !important;
  background: var(--calc-primary-container);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.calc-add-button:hover {
  background: color-mix(in srgb, var(--calc-primary) 16%, var(--calc-bg));
}

/* Country picker */

.calc-country {
  position: relative;
}

.calc-country__button {
  padding: 0;
  white-space: nowrap;
  font-size: 0.95rem !important;
  font-weight: 500;
  color: var(--calc-primary) !important;
  background: none;
  border: 0;
  cursor: pointer;
}

.calc-country__button.has-value {
  font-weight: 600;
  color: var(--calc-text) !important;
}

.calc-country__after-popular {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--calc-border);
}

.calc-country__text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.calc-country__subtitle {
  font-size: 0.8rem;
  color: var(--calc-text-secondary);
}

.calc-country__popover {
  position: absolute;
  z-index: 50;
  top: calc(100% + 0.3rem);
  left: 0;
  width: min(15rem, 70vw);
  padding: 0.4rem;
  background: var(--calc-card);
  border: 1px solid var(--calc-border);
  border-radius: var(--calc-radius-small);
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.16);
}

.calc-country__search {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--calc-text);
  background: var(--calc-field);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.35rem 0.55rem;
}

.calc-country__search:focus {
  outline: none;
  border-color: var(--calc-primary);
}

.calc-country__list {
  max-height: 14rem;
  margin-top: 0.3rem !important;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.calc-country__option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.4rem 0.45rem;
  font-size: 0.86rem !important;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.calc-country__option img {
  border-radius: 50%;
}

.calc-country__option:hover,
.calc-country__option:focus-visible,
.calc-country__option.is-selected {
  outline: none;
  background: var(--calc-primary-container);
}

.calc-country__none {
  padding: 0.5rem;
  font-size: 0.84rem;
  color: var(--calc-text-faint);
}

/*
  Remove: under a light rule from edge to edge of the popover (out through its
  0.4rem padding), straight after the list, bold, on the right. Scoped to beat
  .calc-link's padding and border.
*/
.calc-country__popover .calc-country__clear {
  display: block;
  width: calc(100% + 0.8rem);
  margin: 0 -0.4rem;
  padding: 0.5rem 0.85rem 0.1rem;
  font-weight: 700;
  text-align: right;
  border-top: 1px solid var(--calc-border);
}

/* Manual entry */

.calc-editor {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
  background: var(--calc-bg);
  border: 1px solid color-mix(in srgb, var(--calc-border) 70%, transparent);
  border-radius: var(--calc-radius-small);
}

.calc-editor__dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.calc-editor__field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.calc-editor__label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--calc-text-secondary);
}

.calc-editor__input {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  color: var(--calc-text);
  background: var(--calc-bg);
  border: 1px solid var(--calc-border);
  border-radius: 10px;
  padding: 0.4rem 0.5rem;
}

.calc-editor__input:focus {
  outline: none;
  border-color: var(--calc-primary);
}

.calc-editor__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9rem;
}

.calc-editor__actions .calc-link--danger {
  margin-right: auto;
}

.calc-button {
  padding: 0.45rem 0.95rem;
  font-size: 0.86rem !important;
  font-weight: 600;
  color: #fff !important;
  background: var(--calc-primary);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.calc-button:disabled {
  opacity: 0.45;
  cursor: default;
}

.calc-link {
  padding: 0;
  font-size: 0.84rem !important;
  font-weight: 600;
  color: var(--calc-primary) !important;
  background: none;
  border: 0;
  cursor: pointer;
}

.calc-link--danger {
  color: var(--calc-violation) !important;
}

/* The confirmation's two answers: rounded, on a light wash of their own colour. */
.calc-choice {
  padding: 0.45rem 1.1rem;
  font-size: 0.88rem !important;
  font-weight: 600;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.calc-choice--keep {
  color: var(--calc-primary) !important;
  background: var(--calc-primary-container);
}

.calc-choice--keep:hover {
  background: color-mix(in srgb, var(--calc-primary) 16%, var(--calc-bg));
}

.calc-choice--clear {
  color: var(--calc-violation) !important;
  background: color-mix(in srgb, var(--calc-violation) 10%, var(--calc-bg));
}

.calc-choice--clear:hover {
  background: color-mix(in srgb, var(--calc-violation) 16%, var(--calc-bg));
}


/*
  New dates over a stay in another country: a card over the foot of the
  calendar, where the visitor has just tapped, asking what to do with them.
*/
.calc-conflict {
  position: absolute;
  z-index: 4;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.9rem 1rem;
  background: var(--calc-card);
  border: 1px solid var(--calc-border);
  border-radius: var(--calc-radius);
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.16);
  animation: calc-conflict-in 0.25s ease-out both;
}

.calc-conflict__message {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
}

.calc-conflict__question {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--calc-text-secondary);
}

.calc-conflict__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 0.75rem;
  margin-top: 0.3rem;
}

@keyframes calc-conflict-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .calc-conflict {
    animation: none;
  }
}

/* ── Results panel: the earned settlement result panel (tools.css .tool-result) ── */

.calc-panel {
  display: block;
  padding: 1.25rem;
  /* A word too long for the panel (a headline, a note) breaks rather than running out of it. */
  overflow-wrap: break-word;
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-radius: var(--calc-radius);
}

.calc-panel p {
  margin: 0;
}

/* Same as the tracker card's period line (.calc-tracker__section). */
.calc-panel__label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--calc-text-faint);
}

/* The outcome. Its name is the only coloured text in the panel. */
.calc-panel__outcome {
  --tone: var(--calc-ok);
  margin-top: 0.35rem;
}

.calc-panel__outcome.is-warning {
  --tone: var(--calc-warning);
}

.calc-panel__outcome.is-violation {
  --tone: var(--calc-violation);
}

/* An answer that is neither good nor bad news (earned settlement: no change, or a route that does not settle). */
.calc-panel__outcome.is-neutral {
  --tone: var(--calc-text);
}

.calc-panel__headline {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--tone);
}

.calc-panel__sub {
  margin-top: 0.15rem !important;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--calc-text-secondary);
}

.calc-panel__sentence {
  margin-top: 0.45rem !important;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--calc-text);
}

.calc-panel__sentence strong {
  font-weight: 700;
}

/* The results: after all the steps on a phone, pinned beside them when wide. */
.calc-panel {
  order: 6;
}

.calc-panel--planner {
  order: 7;
}

/* The figures, as the earned settlement breakdown: label left, figure right, a rule between rows. */
.calc-panel__rows {
  margin: 1rem 0 0;
}

.calc-panel__rows--plain {
  margin-top: 0.5rem;
}

/*
  Label and value share a line when both fit whole ("Earliest application"
  and "15 October 2046"); when they don't, the value moves to a line of its
  own, still on the right. Neither is ever wider than the row: a label or
  value longer than the whole row wraps inside it.
*/
.calc-panel__row {
  --tone: var(--calc-ok);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
  row-gap: 0.1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--calc-border);
}

.calc-panel__rows--plain .calc-panel__row {
  border-top: 0;
}

.calc-panel__row dt {
  flex: 1 0 auto;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--calc-text);
}

.calc-panel__row dd {
  margin: 0 0 0 auto;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: right;
  color: var(--calc-text);
}

/* In the narrow pinned column, a touch smaller and less inset, so a label and a long date ("28 September 2036") still share one line. */
@container (max-width: 300px) {
  .calc-panel {
    padding-inline: 1rem;
  }

  .calc-panel__row dt,
  .calc-panel__row dd {
    font-size: 0.9rem;
  }
}

/*
  Which baseline, which reduction, which ties: a smaller grey line under the
  row, across its full width rather than squeezed beside the figure.
*/
.calc-panel__row dd.calc-panel__sublabel {
  flex: 1 0 100%;
  margin-left: 0;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  color: var(--calc-text-secondary);
}

/* Under the figures, after a grey rule: notes on how the result was worked out, warnings first and in the violation colour. */
.calc-panel__footnotes {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--calc-border);
}

/* "Decided by" over what did: a small heading over label–value rows. */
.calc-panel__basis-title {
  margin-bottom: 0 !important;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--calc-text-faint);
}

.calc-panel__basis .calc-panel__rows--plain {
  margin-top: 0;
}

/* Close under the heading: the first row without its usual top padding. */
.calc-panel__basis .calc-panel__row:first-child {
  padding-top: 0.2rem;
}

.calc-panel__basis + .calc-panel__notes,
.calc-panel__notes + .calc-panel__notes {
  margin-top: 0.5rem;
}

.calc-panel__notes {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--calc-text-secondary);
}

.calc-panel__notes.is-warning {
  font-weight: 500;
  color: var(--calc-violation);
}

/*
  A results panel (and the line under them) slides in when it has something
  to show, and back out (SlideIn.tsx): down from above in the one-column
  layout, from the left where the panels sit in their own column.
*/
/* Zero specificity, so the side-column rules above (and in tools.css) win wherever they apply. */
:where(.calc__aside) {
  --calc-slide-from: translateY(-0.75rem);
}

.calc-slide.is-in {
  animation: calc-slide-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.calc-slide.is-out {
  pointer-events: none;
  animation: calc-slide-out 0.22s ease-in forwards;
}

@keyframes calc-slide-in {
  from {
    opacity: 0;
    transform: var(--calc-slide-from);
  }
}

@keyframes calc-slide-out {
  to {
    opacity: 0;
    transform: var(--calc-slide-from);
  }
}

@media (prefers-reduced-motion: reduce) {
  .calc-slide.is-in,
  .calc-slide.is-out {
    animation: none;
  }
}

/* Under the results: where the dates are kept on the left, "Start over" on the right. */
.calc-aside-footer {
  order: 8;
  margin-top: calc(0.75rem - var(--calc-step-gap));
  padding: 0 0.25rem;
}

/*
  The app banner under the results (AppPromo.tsx): the rule pages' blue
  callout, a line on what the app does, and the header's black "Get the app"
  pill (white in dark mode) under it. Last in the column, a little further
  from the results than the line under them.
*/
.calc-app-promo {
  order: 9;
  margin-top: calc(1.75rem - var(--calc-step-gap));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem 1.25rem;
  border-radius: var(--calc-radius);
  background: var(--content-callout-bg, var(--calc-primary-container));
  color: var(--content-callout-text, var(--calc-text));
}

.calc-root .calc-app-promo__text {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.45;
}

.calc-app-promo__text strong {
  font-weight: 650;
}

/* A link to another page instead of the button: blue and bold, as the rule pages' "Get the app →". */
.calc-root a.calc-app-promo__link {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--calc-primary);
  text-decoration: none;
}

.calc-root a.calc-app-promo__link:hover {
  text-decoration: underline;
}

/* The header's "Get the app" (site-header.css), scrolled state. */
.calc-root a.calc-app-promo__button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: 100px;
  background: #111214;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.calc-app-promo__button-icon {
  flex-shrink: 0;
  display: block;
  width: 11px;
  height: 16px;
  transform: rotate(180deg);
}

.calc-root a.calc-app-promo__button:hover,
.calc-root a.calc-app-promo__button:active {
  background: #2c2f35;
  color: #ffffff;
  text-decoration: none;
}

html[data-theme="dark"] .calc-root a.calc-app-promo__button {
  background: #ffffff;
  color: #111214;
}

html[data-theme="dark"] .calc-root a.calc-app-promo__button:hover,
html[data-theme="dark"] .calc-root a.calc-app-promo__button:active {
  background: #dfe2e7;
  color: #111214;
}

/* The in-app WebView hides every app promo (content.css). */
html.is-inapp .calc-app-promo {
  display: none;
}

/* Either state of it — the usual line, or the question before starting over — fading in as it arrives. */
.calc-aside-footer__state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  animation: calc-footer-in 0.28s ease-out both;
}

.calc-aside-footer__state--confirm {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding: 0.25rem 0 0.15rem;
}

.calc-aside-footer__question {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--calc-text-secondary);
}

.calc-aside-footer__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

@keyframes calc-footer-in {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .calc-aside-footer__state {
    animation: none;
  }
}

.calc-reset {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  /* A card gap under the panel above, whatever the gap between steps. */
  margin: 0;
  flex-shrink: 0;
  padding: 0;
  font-size: 0.92rem !important;
  font-weight: 600;
  background: none;
  border: 0;
  cursor: pointer;
}

.calc-reset:hover {
  color: var(--calc-primary) !important;
}

/* Under the calendar and timeline: where the dates are kept. */
.calc-privacy {
  margin: 0;
  font-size: 0.86rem;
  color: var(--calc-text-secondary);
}

.calc-privacy a {
  color: inherit;
}

/* A result that changed: the app's goal-text bounce, up to 1.12 and springing back. */
.calc-bounce {
  display: inline-block;
}

.calc-bounce.is-changed {
  animation: calc-bounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.calc-panel__row .calc-bounce {
  transform-origin: 100% 50%;
}

.calc-panel__headline .calc-bounce,
.calc-panel__sub .calc-bounce {
  transform-origin: 0 50%;
}

/* A figure inside a sentence grows evenly into the space on both sides of it. */
.calc-panel__sentence .calc-bounce {
  transform-origin: 50% 50%;
}

@keyframes calc-bounce {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .calc-bounce.is-changed {
    animation: none;
  }
}