/* ============================================================
   Calculadoras (/calculadoras/). Usa os tokens de styles.css e a
   coluna de leitura de conteudos.css. A calculadora é o mesmo
   cartão a flutuar da página inicial. Sem saltos de layout: o
   resultado, o gráfico e as linhas de aviso têm altura reservada.
   ============================================================ */

.cc {
    margin: 1.8rem 0 2.6rem;
    padding: 1.6rem 1.7rem 1.4rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
}

.cc-form {
    display: block;
}

.cc-rotulo {
    display: block;
    font-size: var(--fs-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--mut);
    margin-bottom: .55rem;
    line-height: 1.3;
}

/* ----- Modos: controlo segmentado (rádios nativos, setas do teclado incluídas) ----- */
.cc-modos {
    border: 0;
    margin: 0 0 1.4rem;
    padding: 0;
    min-width: 0;
}

.cc-seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.cc-seg label {
    position: relative;
    display: block;
    cursor: pointer;
}

.cc-seg input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.cc-seg label > span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: .35rem .5rem;
    border-radius: 7px;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    color: var(--ink-2);
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.cc-seg input:checked + span {
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 1px var(--line);
}

.cc-seg input:focus-visible + span {
    outline: 2px solid var(--ink);
    outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
    .cc-seg input:not(:checked):hover + span { color: var(--ink); }
}

/* Num ecrã estreito o rótulo encurta («Taxa» em vez de «Taxa (CAGR)») para os modos caberem numa linha. */
.cc-seg .cc-extra { display: inline; min-height: 0; padding: 0; border-radius: 0; }

@media (max-width: 420px) {
    .cc-seg .cc-extra { display: none; }
}

/* ----- Campos ----- */
.cc-campos {
    display: grid;
    grid-template-columns: 1fr;
    gap: .35rem 1rem;
}

@media (min-width: 600px) {
    .cc-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cc-campo[hidden] {
    display: none;
}

.cc-input {
    position: relative;
}

.cc-input input {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 .95rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-2);
    color: var(--ink);
    font: inherit;
    font-size: 1.15rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: border-color .2s ease, background-color .2s ease;
}

.cc-input input:focus {
    border-color: var(--ink);
    background: var(--white);
}

.cc-input input:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -1px;
}

.cc-input input[aria-invalid="true"] {
    border-color: var(--bad);
}

.cc-sufixo input {
    padding-right: 2.2rem;
}

.cc-sufixo span {
    position: absolute;
    right: .95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mut);
    font-weight: 500;
    pointer-events: none;
}

.cc-unidade input {
    padding-right: 6rem;
}

.cc-unidade select {
    position: absolute;
    top: 6px;
    right: 6px;
    bottom: 6px;
    width: 5.4rem;
    padding: 0 1.7rem 0 .7rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background-color: var(--white);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2309090b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right .4rem center;
    background-repeat: no-repeat;
    background-size: 1.05em 1.05em;
    color: var(--ink);
    font: inherit;
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.cc-unidade select:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -1px;
}

/* Uma linha reservada por baixo de cada campo: o aviso aparece sem empurrar nada. */
.cc-msg {
    min-height: 1.3rem;
    margin: .35rem 0 .45rem;
    font-size: .82rem;
    line-height: 1.3rem;
    color: var(--mut);
}

.cc-msg-erro {
    color: var(--bad);
}

/* ----- Resultado ----- */
.cc-res {
    margin-top: .4rem;
    padding: 1.5rem 1.2rem 1.4rem;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    text-align: center;
}

.cc-res-tit {
    font-size: var(--fs-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--mut);
    margin-bottom: .7rem;
}

.cc-res-num {
    font-size: clamp(2.3rem, 1.6rem + 3vw, 2.9rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    margin-bottom: .55rem;
}

.cc-res-frase {
    min-height: 1.6em;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink-2);
    text-wrap: balance;
}

.cc-res-erro {
    color: var(--bad);
}

.cc-sem .cc-res-num,
.cc-sem .cc-det dd {
    color: var(--mut-2);
}

.cc-det {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1rem 0 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.cc-det > div {
    /* coluna flexível: o valor fica sempre no fundo da célula, alinhado com os vizinhos mesmo quando um rótulo tem duas linhas */
    display: flex;
    flex-direction: column;
    padding: .85rem .6rem;
    text-align: center;
}

.cc-det > div + div {
    border-left: 1px solid var(--line);
}

.cc-det dt {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mut);
    line-height: 1.35;
    margin-bottom: .3rem;
}

.cc-det dt span {
    display: block;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.cc-det dd {
    margin-top: auto;
    font-size: 1.12rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

@media (max-width: 520px) {
    .cc { padding: 1.2rem 1rem 1.1rem; }
    .cc-det { grid-template-columns: 1fr; }
    .cc-det > div {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: .7rem .9rem;
        text-align: left;
    }
    .cc-det > div + div { border-left: 0; border-top: 1px solid var(--line); }
    .cc-det dt { margin: 0; }
    .cc-det dt span { display: inline; }
    .cc-det dd { margin-top: 0; white-space: nowrap; }
}

/* ----- Gráfico: SVG desenhado à largura real, altura fixa (sem saltos) ----- */
.cc-graf {
    margin: 1.4rem 0 0;
}

.cc-graf-area {
    height: 220px;
    overflow: hidden;
}

.cc-graf-area svg {
    display: block;
}

.cc-graf-area text {
    font-family: 'Inter', 'Inter Fallback', sans-serif;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    fill: var(--mut);
}

.cc-grelha { stroke: var(--line-soft); stroke-width: 1; }
.cc-eixo { stroke: var(--line); stroke-width: 1; }
.cc-area { fill: var(--ink); fill-opacity: .045; }
.cc-linha { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cc-ponto { fill: var(--white); stroke: var(--ink); stroke-width: 1.5; }
.cc-ponto-fim { fill: var(--ink); }

.cc-graf figcaption {
    margin-top: .5rem;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--mut);
    text-align: center;
}

@media (max-width: 520px) {
    .cc-graf-area { height: 190px; }
}

/* ----- Tabela ano a ano (recolhida por defeito) ----- */
.cc-tabela {
    margin-top: 1.1rem;
    border-top: 1px solid var(--line);
}

.cc-tabela summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.cc-tabela summary::-webkit-details-marker {
    display: none;
}

.cc-tabela summary::after {
    content: "";
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .2s var(--ease-out);
}

.cc-tabela[open] summary::after {
    transform: translateY(2px) rotate(225deg);
}

.cc-tabela summary:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    border-radius: 4px;
}

.cc-tabela-scroll {
    max-height: 420px;
    overflow: auto;
    margin-bottom: .6rem;
}

.cc-tabela table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
}

.cc-tabela th,
.cc-tabela td {
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--line-soft);
    text-align: right;
    white-space: nowrap;
}

.cc-tabela th:first-child {
    text-align: left;
}

.cc-tabela thead th {
    position: sticky;
    top: 0;
    background: var(--white);
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mut);
    border-bottom: 1px solid var(--line);
}

.cc-tabela tbody th {
    font-weight: 500;
    color: var(--ink-2);
}

.cc-tabela td {
    color: var(--ink);
}

@media (max-width: 520px) {
    .cc-tabela th,
    .cc-tabela td { padding: .45rem .4rem; }
    .cc-tabela thead th { white-space: normal; letter-spacing: .05em; font-size: .7rem; vertical-align: bottom; }
}

.cc-tabela td[colspan] {
    text-align: center;
    color: var(--mut-2);
}

.cc-graf-vazio {
    font-size: 13px;
    fill: var(--mut-2);
}

.cc-tabela-nota {
    font-size: .82rem;
    color: var(--mut);
    margin-bottom: .6rem;
}

/* ----- Texto da página ----- */
.art-calculadora .art-corpo {
    margin-top: .4rem;
}

.art-calculadora .formula {
    text-align: center;
    margin: 1.2rem 0 1.4rem;
}

.art-corpo .legenda-formula {
    list-style: none;
    margin-left: 0;
}

.art-corpo .legenda-formula li {
    padding-left: 0;
}

.art-calculadoras .art-entrada a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--mut-2);
    text-underline-offset: 3px;
}

/* ----- Cartões das calculadoras (índice e «Outras calculadoras») ----- */
.calc-grelha {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.6rem;
}

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

.rel .calc-grelha {
    margin-top: 0;
}

.calc-cartao {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: 1.3rem 1.4rem 1.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.calc-cartao-tit {
    font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif;
    font-weight: 500;
    font-optical-sizing: auto;
    font-size: 1.4rem;
    line-height: 1.15;
    letter-spacing: -.018em;
    text-wrap: balance;
}

.calc-cartao-txt {
    font-size: .95rem;
    line-height: 1.55;
    color: var(--ink-2);
}

.calc-cartao:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .calc-cartao:hover {
        border-color: var(--line-strong);
        box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 20px rgb(0 0 0 / .06);
    }
}

/* ============================================================
   Inclinação em percentagem (/calculadoras/inclinacao-percentagem/)
   Reutiliza o cartão .cc. Próprio desta calculadora: as opções
   de segunda linha (medida, alvo, unidade), dois campos por linha
   e o triângulo em SVG com altura fixa.
   ============================================================ */
.ci-opcoes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.4rem 1rem;
    margin-bottom: 1.4rem;
}

/* As opções dos três modos partilham as mesmas células: «Comprimento medido» (A) e «Quero saber» (C) na primeira,
   a unidade na segunda e a nota do modo B por cima das duas. As que não se aplicam ficam invisíveis mas ocupam o
   lugar, por isso a altura do bloco é a mesma nos três modos e nada salta ao mudar de separador. */
.ci-opcao {
    grid-row: 1;
    grid-column: 1;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.ci-opcoes > .ci-opcao[hidden] {
    display: block;
    visibility: hidden;
}

.ci-unid {
    grid-column: 2;
}

.ci-nota-b {
    grid-column: 1 / -1;
    align-self: center;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--mut);
    text-wrap: pretty;
}

.cc-seg.cc-seg-peq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cc-seg-peq label > span {
    min-height: 38px;
    font-size: .9rem;
}

.ci-unid .cc-seg-peq label > span {
    min-width: 3.2rem;
}

@media (min-width: 600px) {
    .ci .cc-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
    .ci-opcoes { grid-template-columns: 1fr; }
    .ci-unid { grid-row: 2; grid-column: 1; }
    .ci-unid .cc-seg-peq { width: 50%; }
    .ci-nota-b { grid-row: 1 / span 2; grid-column: 1; }
}

.ci-svg {
    display: block;
    width: 100%;
    height: 200px;
}

/* O número do resultado tem altura fixa: um valor comprido encolhe lá dentro em vez de sair do cartão ou mudar a altura. */
.ci .cc-res-num {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.1em;
    white-space: nowrap;
}

.ci .cc-res-num.ci-num-longo {
    font-size: clamp(1.3rem, .9rem + 2vw, 1.9rem);
    height: calc(1.1 * clamp(2.3rem, 1.6rem + 3vw, 2.9rem));
}

@media (max-width: 520px) {
    .ci-svg { height: 150px; }
    /* no telemóvel a legenda pode ter duas linhas: ficam as duas reservadas */
    .ci .ci-legenda { min-height: 3em; }
    /* o título do resultado numa só linha («Comprimento horizontal» cabe a 320 px) */
    .ci .cc-res-tit { white-space: nowrap; letter-spacing: .06em; }
    /* e a frase do resultado também (com uma só linha, fica centrada no mesmo espaço) */
    .ci .cc-res-frase {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 3.2em;
    }
    /* cada linha dos detalhes tem a altura de um rótulo em duas linhas: «Ao longo da rampa» parte ao lado de um valor
       comprido e não parte ao lado de «—», sem mudar a altura */
    .ci .cc-det > div {
        align-items: center;
        min-height: 3.45rem;
    }
}

/* Três modos numa linha a 320 px: rótulos curtos («Inclinação», «Converter», «Medidas») com letra um pouco menor. */
@media (max-width: 360px) {
    .ci .cc-modos .cc-seg label > span { font-size: .84rem; padding: .35rem .2rem; }
}

/* a letra da variável (h, c, L) no rótulo em maiúsculas fica minúscula e em itálico, como na fórmula */
.ci-var {
    font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif;
    font-style: italic;
    font-size: 1.2em;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    line-height: 0; /* não aumenta a linha: os rótulos com e sem letra têm a mesma altura */
    color: var(--ink-2);
    margin-left: .15em;
}

.ci-area { fill: var(--ink); fill-opacity: .045; }
.ci-base,
.ci-alt { stroke: var(--mut-2); stroke-width: 1.5; stroke-linecap: round; }
.ci-hip { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.ci-reto,
.ci-arco { fill: none; stroke: var(--mut); stroke-width: 1.2; }

.ci-rot {
    font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif;
    font-style: italic;
    font-size: 18px;
    fill: var(--ink-2);
}

.ci-nota {
    font-family: 'Inter', 'Inter Fallback', sans-serif;
    font-size: 11px;
    fill: var(--mut);
}

/* a legenda tem sempre uma linha reservada (fica vazia sem resultado) */
.ci-legenda {
    min-height: 1.5em;
    font-variant-numeric: tabular-nums;
}

/* várias fórmulas seguidas: centradas e juntas */
.art-calculadora .formulas {
    margin: 1.2rem 0 1.5rem;
}

.art-calculadora .formulas .formula {
    margin: .25rem 0;
}

/* tabela de equivalências */
.ci-tabela {
    width: 100%;
    max-width: 30rem;
    margin: .4rem auto 1.6rem;
    border-collapse: collapse;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}

.ci-tabela th,
.ci-tabela td {
    padding: .55rem .6rem;
    border-bottom: 1px solid var(--line-soft);
    text-align: right;
    white-space: nowrap;
}

.ci-tabela th:first-child,
.ci-tabela td:first-child {
    text-align: left;
}

.ci-tabela thead th {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mut);
    border-bottom-color: var(--line);
}

.ci-tabela td {
    color: var(--ink);
}

.ci-tabela td:first-child {
    font-weight: 600;
}

/* ----- CAGR: valores muito compridos nunca saem do cartão (ronda 2 do testador) ----- */
/* O número do resultado encolhe para caber numa linha: a largura do cartão (100cqi) dividida pelo número de carateres
   (--len, posto pelo ui.js) vezes a largura média de um algarismo. Abaixo de .9rem, parte em vez de encolher.
   Os valores dos detalhes fazem o mesmo, a partir de 1,12rem, na largura da sua célula. */
[data-calc="cagr"] .cc-res,
[data-calc="cagr"] .cc-det {
    container-type: inline-size;
}

[data-calc="cagr"] .cc-res-num {
    font-size: max(.9rem, min(clamp(2.3rem, 1.6rem + 3vw, 2.9rem), calc(100cqi / (var(--len, 6) * .62))));
}

[data-calc="cagr"] .cc-det dd {
    font-size: max(.75rem, min(1.12rem, calc((100cqi / 3 - 1.3rem) / (var(--len, 8) * .66))));
}

[data-calc="cagr"] .cc-res-num,
[data-calc="cagr"] .cc-res-frase,
[data-calc="cagr"] .cc-det dd {
    overflow-wrap: anywhere;
}

/* No telemóvel, rótulo e valor partilham a linha quando cabem. Quando não cabem, o valor passa para a linha de baixo,
   encostado à direita, e o rótulo nunca fica espremido numa palavra por linha. */
@media (max-width: 520px) {
    [data-calc="cagr"] .cc-det > div {
        flex-wrap: wrap;
        column-gap: 1rem;
        row-gap: .15rem;
    }
    [data-calc="cagr"] .cc-det dt {
        flex: 1 0 auto;
        max-width: 100%;
    }
    [data-calc="cagr"] .cc-det dd {
        font-size: max(.75rem, min(1.12rem, calc((100cqi - 1.9rem) / (var(--len, 8) * .66))));
        flex: 0 1 auto;
        min-width: 0;
        margin-left: auto;
        white-space: normal;
        text-align: right;
    }
}

/* Com um valor de detalhe muito comprido (mais de 17 carateres, classe posta pelo ui.js), as três células passam a
   linhas em qualquer largura, como no telemóvel: o valor fica inteiro numa linha em vez de partir a meio. */
[data-calc="cagr"] .cc-det.cc-det-longo {
    grid-template-columns: 1fr;
}

[data-calc="cagr"] .cc-det-longo > div {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 1rem;
    row-gap: .15rem;
    padding: .7rem .9rem;
    text-align: left;
}

[data-calc="cagr"] .cc-det-longo > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
}

[data-calc="cagr"] .cc-det-longo dt {
    flex: 1 0 auto;
    max-width: 100%;
    margin: 0;
}

[data-calc="cagr"] .cc-det-longo dt span {
    display: inline;
}

[data-calc="cagr"] .cc-det-longo dd {
    font-size: max(.75rem, min(1.12rem, calc((100cqi - 1.9rem) / (var(--len, 8) * .66))));
    flex: 0 1 auto;
    min-width: 0;
    margin-top: 0;
    margin-left: auto;
    white-space: normal;
    text-align: right;
}