html, body {
    height: 100%;
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

#out {
    width: 100vw;
    height: 100vh;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Splash de càrrega del WASM: un FULL DE PLÀNOL que es dibuixa a si mateix.
   Es veu uns segons (13 MB de runtime), per això val la pena que digui la veritat:
   la barra és progrés REAL de descàrrega i el caixetí mostra la fase.
   Ull: això és HTML/CSS, no Avalonia — aquí SÍ que hi ha fonts del sistema.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Quan Avalonia ja ha muntat el canvas, el splash desapareix. Es cobreixen els dos casos:
   el canvas com a germà anterior (regla CSS) i, per si l'ordre canvia, la classe que hi
   posa main.js en detectar-lo (MutationObserver). */
#out canvas ~ .pia-splash,
.pia-splash.pia-fora {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .45s ease;
}

.pia-splash {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1C2A38;
    /* Paper mil·limetrat: retícula fina de 8 px + retícula gruixuda de 40 px */
    background:
        repeating-linear-gradient(0deg, rgba(28,42,56,.055) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, rgba(28,42,56,.055) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(0deg, rgba(28,42,56,.028) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(90deg, rgba(28,42,56,.028) 0 1px, transparent 1px 8px),
        radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, #F7F5F1 100%);
}

/* El full: paper blanc amb ombra, com una làmina sobre la taula */
.pia-full {
    position: relative;
    width: min(92vw, 620px);
    padding: 18px 18px 0;
    background: #FFFFFF;
    border: 1px solid #DDD9D0;
    box-shadow: 0 18px 50px -18px rgba(28,42,56,.28), 0 1px 0 rgba(28,42,56,.05);
    animation: pia-entra .5s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes pia-entra {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* ── El dibuix tècnic ───────────────────────────────────────────────────────── */
.pia-dibuix {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.pia-dibuix path {
    fill: none;
    stroke-linecap: square;
    /* La longitud real de cada traç la calcula main.js (getTotalLength) i la fixa a
       --len; així el traçat és exacte sigui quina sigui la geometria. */
    stroke-dasharray: var(--len, 800);
    stroke-dashoffset: var(--len, 800);
    /* Cicle curt a propòsit: el splash pot durar tan sols el mínim visible (1,2 s), i amb un
       cicle llarg no s'hi arribava a veure res dibuixant-se. */
    animation: pia-traca 4s ease-in-out infinite;
}

/* Murs i envans: tinta gruixuda. Cotes: accent taronja i traç fi. Eix: discontinu. */
.pia-dibuix .t  { stroke: #1C2A38; stroke-width: 2.4; }
.pia-dibuix .t2 { stroke-width: 1.8; }
.pia-dibuix .t3 { stroke-width: 1.8; }
.pia-dibuix .t4, .pia-dibuix .t4b, .pia-dibuix .t5 { stroke: #1C2A38; stroke-width: 1.4; }
.pia-dibuix .c  { stroke: #E2600C; stroke-width: 1; }
.pia-dibuix .e  { stroke: #A8B0B8; stroke-width: 1; }

/* Ordre de traçat: primer els murs, després envans, obertures, cotes i eix. */
.pia-dibuix .t1  { animation-delay: .03s; }
.pia-dibuix .t2  { animation-delay: .34s; }
.pia-dibuix .t3  { animation-delay: .50s; }
.pia-dibuix .t4  { animation-delay: .62s; }
.pia-dibuix .t4b { animation-delay: .70s; }
.pia-dibuix .t5  { animation-delay: .80s; }
.pia-dibuix .c1  { animation-delay: .95s; }
.pia-dibuix .c2  { animation-delay: 1.05s; }
.pia-dibuix .e   { animation-delay: 1.15s; }

/* Es traça, es manté un moment i s'esvaeix per tornar a començar: en connexions lentes
   el dibuix no queda mai congelat. */
@keyframes pia-traca {
    0%   { stroke-dashoffset: var(--len, 800); opacity: 1; }
    22%  { stroke-dashoffset: 0; opacity: 1; }
    84%  { stroke-dashoffset: 0; opacity: 1; }
    95%  { stroke-dashoffset: 0; opacity: 0; }
    100% { stroke-dashoffset: var(--len, 800); opacity: 0; }
}

/* ── El caixetí ─────────────────────────────────────────────────────────────── */
.pia-caixeti {
    margin: 6px -18px 0;
    border-top: 1px solid #DDD9D0;
    padding: 12px 18px 14px;
    background: #FCFBF8;
}

.pia-caixeti-marca {
    display: flex;
    align-items: center;
    gap: 11px;
}

.pia-logo {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 7px;
    background: #E2600C;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px -2px rgba(226,96,12,.6);
}

.pia-nom { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.pia-nom span { color: #E2600C; }
.pia-sub { font-size: 11.5px; color: #6B7075; margin-top: 1px; }

/* Camps del caixetí, en monoespaiada com a un plànol de debò */
.pia-caixeti-camps {
    display: flex;
    flex-wrap: wrap;
    gap: 0 22px;
    margin: 11px 0 9px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 10.5px;
}

.pia-camp { display: flex; gap: 6px; align-items: baseline; }
.pia-camp span { color: #868C96; text-transform: uppercase; letter-spacing: .08em; }
.pia-camp b { color: #1C2A38; font-weight: 600; }

/* Barra de progrés amb aspecte d'escala gràfica */
.pia-escala {
    position: relative;
    height: 7px;
    background: #EFEDE8;
    border: 1px solid #DDD9D0;
    overflow: hidden;
}

.pia-escala-plena {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #E2600C, #F08A3C);
    transition: width .35s cubic-bezier(.3,.9,.3,1);
}

/* Marques de l'escala cada 10 % */
.pia-escala-ticks {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 10%, rgba(28,42,56,.22) 10%, rgba(28,42,56,.22) calc(10% + 1px));
}

/* Mentre no sabem el total (primera visita) la barra fa un escombrat indeterminat */
.pia-escala.pia-indeterminada .pia-escala-plena {
    width: 34% !important;
    animation: pia-escombra 1.5s ease-in-out infinite;
}

@keyframes pia-escombra {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(320%); }
}

.pia-peu {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 9px;
    font-size: 12px;
}

.pia-frase { color: #3A3D40; }
/* La frase entra amb un lleu desplaçament cada vegada que canvia */
.pia-frase.pia-canvia { animation: pia-frase-entra .4s ease both; }

@keyframes pia-frase-entra {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.pia-xifra {
    flex: none;
    color: #868C96;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* Accessibilitat: qui demana menys moviment veu el dibuix acabat i sense animacions. */
@media (prefers-reduced-motion: reduce) {
    .pia-full { animation: none; }
    .pia-dibuix path { animation: none; stroke-dashoffset: 0; }
    .pia-frase.pia-canvia { animation: none; }
    .pia-escala.pia-indeterminada .pia-escala-plena { animation: none; }
    .pia-escala-plena { transition: none; }
}