/*
============================================================================
FITXER: css/imprimir-on-es-la-xifra.css
ROL: La suma en columna d'«On és la xifra?» en paper: quadres grans per
     escriure-hi cada xifra amb un retolador gruixut, números de fora amb
     fletxa (↓ a sobre d'una columna, ← a la dreta d'una fila).
ARQUITECTURA: Fa servir el mateix DOM que el joc (TaulerXifra), però amb mides
     en mm. Graella: [signe][caselles…][pista de fila] x [pistes de columna]
     [1r nombre][2n nombre][ratlla][resultat]; la posició de cada element
     l'escriu tauler.js en línia (grid-area). Només blanc, negre i gris fosc:
     el verd i el vermell del joc es perden, i el «malament» es marca amb una
     vora gruixuda. El número del problema va a la cantonada de la targeta
     perquè la suma disposi de tot l'alt.
     NOTA: .caixa és també el quadre de les instruccions (css/imprimir.css);
     les caselles de la suma el desfan a .suma .caixa.
DEPENDÈNCIES: css/imprimir.css (s'ha de carregar abans).
============================================================================
*/
.problemes {
    margin-bottom: 3mm; /* aire entre l'última fila de targetes i el peu */
}
.problema {
    position: relative;
    align-self: stretch;
    justify-content: center;
    border: 0.4mm solid var(--gris);
    border-radius: 3mm;
}
.problema .num-problema {
    position: absolute;
    top: 2.5mm;
    left: 2.5mm;
}

.suma {
    --cel: 16mm; /* costat d'una casella */
    --ratlla-esq: 11mm; /* quant sobresurt la ratlla a l'esquerra de la primera casella (queda sota el +) */
    --signe: 14mm; /* ample de la columna del + */
    --pista-fila: 24mm; /* ample de la columna dels números de la dreta (←) */
    display: grid;
    grid-template-columns: var(--signe) repeat(var(--amp), var(--cel)) var(--pista-fila);
    grid-template-rows: 12mm var(--cel) var(--cel) 0.9mm var(--cel);
    gap: 2.5mm 3mm;
    align-items: center;
    justify-content: center;
    font-size: 19.5pt;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--tinta);
}
/* Sense cap número a sobre de les columnes, la fila de dalt no ocupa lloc */
.suma.sense-col {
    grid-template-rows: 0 var(--cel) var(--cel) 0.9mm var(--cel);
    margin-top: -2.5mm;
}

/* ---- Casella: s'hi escriu una xifra ---- */
.suma .caixa {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    margin: 0;
    padding: 0;
    border: 0.5mm solid var(--tinta);
    border-radius: 1.8mm;
    background: white;
}
/* La que cal revisar (a les instruccions): vora gruixuda, perquè no hi ha color */
.suma .caixa.malament {
    border-width: 1.2mm;
}
/* La xifra que es busca (a les instruccions): cercle, com al PDF original */
.suma .caixa.cercle::after {
    content: '';
    position: absolute;
    inset: 12%;
    border: 0.6mm solid var(--tinta);
    border-radius: 50%;
}

/* ---- Números de fora ---- */
.pista {
    display: flex;
    align-items: center;
    color: var(--tinta);
    line-height: 1;
    white-space: nowrap;
}
.pista-col {
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5mm;
}
.pista-fila {
    gap: 1.5mm;
    justify-content: flex-start;
}
.pista .fl {
    font-size: 0.85em;
    font-weight: 700;
}
.pista .p.feta::after {
    content: none; /* l'ajuda del joc no s'imprimeix */
}

/* ---- Signe + i ratlla de la suma ---- */
.signe {
    justify-self: end;
    padding-right: 2mm;
    font-size: 1.1em;
}
.ratlla {
    align-self: stretch;
    margin-left: calc(var(--signe) - var(--ratlla-esq));
    background: var(--tinta);
    border-radius: 0.4mm;
}

/* ---- El full d'instruccions: tot més compacte perquè hi càpiga ---- */
.mida-instr .regles {
    margin-bottom: 3mm;
    font-size: 12pt;
    line-height: 1.35;
}
.mida-instr > .caixa {
    margin-top: 3mm;
    padding: 2.5mm 4mm;
}
.mida-instr > .caixa h2 {
    margin-bottom: 2mm;
    font-size: 11.5pt;
}
.mida-instr > .caixa li,
.mida-instr > .caixa p {
    font-size: 10.5pt;
    line-height: 1.35;
}
.mida-instr .veredicte b {
    font-size: 12pt;
}
.mida-instr .fila {
    gap: 5mm;
}
.mida-instr .suma {
    --cel: 9.5mm;
    --ratlla-esq: 8mm;
    --signe: 10mm;
    --pista-fila: 14mm;
    grid-template-rows: 8.5mm var(--cel) var(--cel) 0.6mm var(--cel);
    gap: 1.5mm 2mm;
    font-size: 13pt;
}
.mida-instr .suma.sense-col {
    grid-template-rows: 0 var(--cel) var(--cel) 0.6mm var(--cel);
    margin-top: -1.5mm;
}
.mida-instr .suma .caixa {
    border-width: 0.4mm;
    border-radius: 1.4mm;
}
.mida-instr .suma .caixa.malament {
    border-width: 0.9mm;
}
.mida-instr .suma .caixa.cercle::after {
    border-width: 0.45mm;
}
.mida-instr .nota {
    text-align: center;
    font-weight: 700;
}