.calculation-history-page {
  display: grid;
  gap: var(--space-4);
  width: min(100% - 1.5rem, 70rem);
  margin: 0 auto;
  padding: var(--space-4) 0 var(--space-6);
}

.calculation-history-hero,
.calculation-history-panel,
.calculation-history-card,
.calculation-history-filter,
.calculation-history-empty,
.calculation-history-danger {
  padding: clamp(1rem, 3vw, 1.5rem);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.calculation-history-hero,
.calculation-history-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.calculation-history-page h1,
.calculation-history-page h2,
.calculation-history-page p {
  overflow-wrap: anywhere;
}

.calculation-history-page h1 {
  margin: .2rem 0;
}

.calculation-history-page h2 {
  margin: .2rem 0 var(--space-3);
  font-size: 1.05rem;
}

.calculation-history-eyebrow {
  margin: 0;
  color: var(--accent-2);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.calculation-history-actions,
.calculation-history-filter > div,
.calculation-history-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.calculation-history-actions form {
  margin: 0;
}

.calculation-history-filter label {
  display: block;
  margin-bottom: .45rem;
  font-weight: 700;
}

.calculation-history-filter select {
  min-width: min(100%, 18rem);
}

.calculation-history-list {
  display: grid;
  gap: var(--space-3);
}

.calculation-history-card dl {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

.calculation-history-card dl div {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.calculation-history-card dt {
  font-weight: 700;
}

.calculation-history-card dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.calculation-history-feedback:not(:empty) {
  padding: var(--space-3);
  border-radius: .6rem;
  background: color-mix(in srgb, var(--accent-2) 8%, var(--surface));
}

.calculation-history-danger summary {
  cursor: pointer;
  font-weight: 700;
}

.calculation-history-delete {
  background: var(--danger);
}

.calculation-history-sync-notice {
  position: relative;
  z-index: 2;
  width: min(100% - 1.5rem, 70rem);
  margin: var(--space-4) auto;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 2px solid var(--accent-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.calculation-history-sync-notice h2 {
  margin: 0 0 var(--space-2);
  font-size: 1.15rem;
}

.calculation-history-sync-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (max-width: 20rem) {
  .calculation-history-page {
    width: min(100% - .75rem, 70rem);
  }

  .calculation-history-hero,
  .calculation-history-card {
    display: grid;
  }

  .calculation-history-actions,
  .calculation-history-filter > div,
  .calculation-history-pagination,
  .calculation-history-sync-notice__actions {
    display: grid;
    width: 100%;
  }

  .calculation-history-actions > *,
  .calculation-history-actions button,
  .calculation-history-actions a,
  .calculation-history-filter button,
  .calculation-history-filter select {
    width: 100%;
    min-width: 0;
  }

  .calculation-history-sync-notice {
    width: min(100% - .75rem, 70rem);
  }

  .calculation-history-sync-notice__actions button {
    width: 100%;
  }
}

/* Historico em cartoes (01/10/2026). Usado no painel de cada calculadora e na
   pagina "Meus calculos salvos"; so tokens da plataforma, para os temas. */
.history-toolbar {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.history-toolbar input[type="search"] {
  flex: 1 1 14rem;
  min-width: 0;
}

/* Tablet e notebook (09/10/2026): sem base propria, a ordenacao (convertida em
   .oa-lookup) pegava a largura do conteudo e empurrava "Comparar" para outra
   linha em 1024 px, enquanto em 768 px a busca encolhia ate cortar o texto. */
@media (min-width: 47.5625rem) {
  .history-toolbar > .oa-lookup,
  .history-toolbar > select {
    flex: 0 1 11rem;
    min-width: 9rem;
  }

  .history-toolbar > button {
    flex: 0 0 auto;
  }
}

/* Cartao em uma linha (02/10/2026): valor principal, variacao para o calculo
   anterior, PDF e "mais acoes". O resto (entradas, diferenca, nota e linhas do
   resultado) so aparece ao tocar na linha. */
.history-card {
  display: grid;
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.history-card.is-pinned {
  border-color: color-mix(in srgb, var(--accent-2) 55%, var(--line));
}

.history-card.is-shown {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2) 30%, transparent);
}

.history-card__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
}

.history-card__select {
  width: var(--icon-md);
  height: var(--icon-md);
  margin: 0;
}

.history-card__summary {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
  padding: var(--space-1) 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.history-card__summary:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.history-card__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  min-width: 0;
}

.history-card__label {
  color: var(--muted);
  font-size: var(--font-size-sm);
}

.history-card__value {
  font-size: var(--font-size-md);
  font-weight: 600;
  white-space: nowrap;
}

.history-card__delta {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.history-card__delta [data-icon],
.history-card__delta svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: currentColor;
}

.history-card__delta.is-up { color: var(--success); }
.history-card__delta.is-down { color: var(--danger); }

.history-card__meta {
  display: flex;
  min-width: 0;
  color: var(--muted);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.history-card__context {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-card__flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: 0.125rem;
}

.history-card__more {
  display: inline-grid;
  place-items: center;
  width: var(--control-sm);
  min-width: var(--control-sm);
  height: var(--control-sm);
  padding: 0;
}

.history-card__more [data-icon],
.history-card__more svg {
  width: var(--icon-md);
  height: var(--icon-md);
  fill: currentColor;
}

.history-card__more[aria-expanded="true"] {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.history-card__body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: var(--border-width) solid var(--line);
  background: var(--surface-muted);
  cursor: pointer;
}

.calculation-history-meta {
  color: var(--muted);
  font-size: var(--font-size-sm);
}

.history-card__badge {
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: var(--surface-muted);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

.history-card__badge.is-accent { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, var(--surface)); }
.history-card__badge.is-success { color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
.history-card__badge.is-warning { color: var(--ink); background: color-mix(in srgb, var(--warning) 22%, var(--surface)); }

.history-card__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--space-2);
}

.history-card__metric {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}

.history-card__metric span {
  color: var(--muted);
  font-size: var(--font-size-xs);
}

.history-card__metric strong {
  overflow-wrap: anywhere;
  font-size: var(--font-size-md);
}

.history-card__metric.is-main strong {
  font-size: var(--font-size-lg);
}

.history-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-card__chips li {
  max-width: 100%;
  padding: 0.125rem var(--space-2);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}

.history-card__diff,
.history-card__note {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.history-card__diff {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent-2) 10%, var(--surface));
}

.history-card__note {
  color: var(--muted);
  background: var(--surface-muted);
}

.history-card__rows {
  display: grid;
  gap: 0;
  margin: 0;
}

/* No cartao aberto as linhas do resultado vao em duas colunas quando cabem. */
.history-card__body .history-card__rows {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  column-gap: var(--space-6);
}

.history-card__body .history-card__rows .is-total {
  grid-column: 1 / -1;
  border-bottom: 0;
}

.history-card__rows div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border-bottom: var(--border-width) dashed var(--line);
  font-size: var(--font-size-sm);
}

.history-card__rows dt { color: var(--muted); }
.history-card__rows dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.history-card__rows .is-total dt,
.history-card__rows .is-total dd { color: var(--ink); font-weight: 600; }

.history-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* Menu "mais acoes": camada acima da tela, no padrao do menu da conta. */
.history-menu {
  position: fixed;
  z-index: var(--layer-popover);
  width: max-content;
  min-width: 13.5rem;
  max-width: min(18rem, calc(100vw - 1rem));
  overflow: hidden;
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform-origin: top right;
  animation: accountMenuIn var(--motion-fast) ease both;
}

.history-menu.is-above { transform-origin: bottom right; }

.history-menu__handle,
.history-menu__head { display: none; }

.history-menu__item {
  width: 100%;
  min-height: var(--control-md);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--space-4);
  border: 0;
  border-bottom: var(--border-width) solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.history-menu__item:last-child { border-bottom: 0; }
.history-menu__item:hover,
.history-menu__item:focus-visible { background: var(--surface-muted); outline: none; }
.history-menu__item:disabled { color: var(--muted); cursor: not-allowed; }
.history-menu__item.is-danger { color: var(--danger); }

.history-menu__item [data-icon],
.history-menu__item svg,
.history-menu__close [data-icon],
.history-menu__close svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex: 0 0 var(--icon-sm);
  fill: currentColor;
}

.history-compare {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) dashed color-mix(in srgb, var(--accent-2) 55%, var(--line));
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.history-compare__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: center;
}

.history-compare__wrap {
  overflow-x: auto;
}

.history-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.history-compare__table th,
.history-compare__table td {
  padding: var(--space-1) var(--space-2);
  border-bottom: var(--border-width) solid var(--line);
  text-align: left;
  vertical-align: top;
}

.history-compare__table .is-section th {
  color: var(--muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
}

.history-compare__empty {
  margin: 0;
  color: var(--muted);
}

.calculation-history-card__body {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  flex: 1 1 auto;
}

.calculation-history-card__rows summary {
  cursor: pointer;
  font-size: var(--font-size-sm);
}

.calculation-history-meta {
  margin: 0;
}

@media (max-width: 47.5rem) {
  .history-card__row {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  }

  .history-card__label { display: none; }

  /* Referencia e data em linhas proprias: lado a lado, "Salario bruto"
     era cortado a 375 px. */
  .history-card__meta { flex-direction: column; }
  .history-card__sep { display: none; }

  /* No celular o PDF fica so com o icone; o nome vai no aria-label. */
  .history-card__pdf {
    width: var(--control-sm);
    min-width: var(--control-sm);
    padding: 0;
    justify-content: center;
  }

  .history-card__pdf > span:not([data-icon]) { display: none; }

  .history-card__body { padding: var(--space-3); }
  .history-card__actions > button { flex: 1 1 calc(50% - var(--space-2)); }

  /* Folha inferior de borda a borda, igual ao menu da conta na barra do
     celular: ao alcance do polegar, com a alca como pista visual. */
  .history-menu.is-sheet {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: min(85vh, 36rem);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow: auto;
    overscroll-behavior: contain;
    border-width: var(--border-width) 0 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -16px 40px rgb(0 0 0 / .22);
    transform-origin: bottom center;
    animation: accountSheetIn var(--motion-normal) ease both;
  }

  .history-menu.is-sheet .history-menu__handle {
    display: block;
    width: 2.25rem;
    height: 0.25rem;
    margin: var(--space-2) auto 0;
    border-radius: var(--radius-pill);
    background: var(--line);
  }

  .history-menu.is-sheet .history-menu__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--line);
    background: var(--surface-muted);
  }

  .history-menu__head strong,
  .history-menu__head span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .history-menu__head span { color: var(--muted); font-size: var(--font-size-sm); }

  .history-menu__close {
    display: inline-grid;
    place-items: center;
    width: var(--icon-lg);
    height: var(--icon-lg);
    padding: 0;
    border: 0;
    color: var(--muted);
    background: transparent;
  }

  .history-menu.is-sheet .history-menu__item {
    min-height: 3.25rem;
    font-size: var(--font-size-base);
  }
}

@media (prefers-reduced-motion: reduce) {
  .history-menu,
  .history-menu.is-sheet { animation: none; }
}