@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');
  :root{
    --ink-rgb:20 17 14;      --ink:rgb(var(--ink-rgb));--panel:#1D1913;--panel2:#26201A;--panel3:#2E2721;--line:#342C22;
    /* Vora d'elements interactius i cards: gris CLAR translúcid (com el prototip), no un marró fosc.
       Es veu la vora en repòs sense cridar. */
    --line-strong:rgb(243 238 230 / .16);
    /* Escala de contrast de text amb SÒL de llegibilitat: cap text baixa de --faint (≈4,6:1 sobre
       --ink) i MAI s'apila opacity a sobre (era el bug del hash de versió, il·legible de nit al llit). */
    --muted:#BEB4A2;--dim:#968C79;--faint:#8C8270;--teal:#37C7A9;
    --cool-rgb:91 200 245;    --cool:rgb(var(--cool-rgb));
    /* Colors amb variants d'opacitat: definits per CANALS (una sola font de veritat) i el color
       sòlid en surt. Així canviar-ne un no deixa cap rgba() amb el valor vell escampat pel full;
       s'usen com rgb(var(--x-rgb) / alfa). */
    --text-rgb:243 238 230;   --text:rgb(var(--text-rgb));
    --green-rgb:143 209 79;   --green:rgb(var(--green-rgb));
    --amber-rgb:245 197 66;   --amber:rgb(var(--amber-rgb));
    --orange-rgb:245 137 59;  --orange:rgb(var(--orange-rgb));
    --red-rgb:238 83 64;      --red:rgb(var(--red-rgb));
    --fd:'Archivo',sans-serif;--fb:'Archivo',sans-serif;--fm:'IBM Plex Mono',monospace;
    /* Escales del sistema (mida · espai base 4 · radi): tot n'ha de sortir, per ser homogeni.
       S'hi va migrant per superfícies; la intro n'és la primera. */
    --t-hero:76px;--t-xl:27px;--t-lg:19px;--t-md:15px;--t-base:13.5px;--t-sm:12px;--t-cap:10.5px;--t-micro:9.5px;
    --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:28px;--s7:40px;
    --r-lg:18px;--r-md:12px;--r-pill:999px;
  }
  *{box-sizing:border-box}
  /* Tenyim el FONS DE LA PÀGINA, no les targetes: com que són opaques, el text no
     s'assabenta i la llegibilitat queda intacta. */
  .bgtint{position:fixed;inset:0;z-index:-1;pointer-events:none;transition:background 900ms cubic-bezier(.4,0,.2,1);opacity:0;animation:bgin 2.2s ease-out .1s forwards}
  @keyframes bgin{to{opacity:1}}
  @media(prefers-reduced-motion:reduce){.bgtint{transition:none;animation:none;opacity:1}}
  body{margin:0;background:var(--ink);color:var(--text);font-family:var(--fb);-webkit-font-smoothing:antialiased;line-height:1.5;padding:18px;padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));box-sizing:border-box;display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
  /* El peu, sempre a baix. Mentre carrega, el contingut és curt i el peu pujava fins a mig
     pantalla: semblava que l'app s'hagués acabat allà. Amb #out creixent per omplir el que
     sobra, el peu es queda ancorat i no salta quan arriben les dades.
     (100svh i no 100vh: a iOS, 100vh compta la barra del navegador com si no hi fos i deixa el
     peu just per sota de la vora visible.) */
  /* Columna d'app fixa i estreta: a desktop/tablet no s'estira sparse; sempre les proporcions de
     mòbil ben plantejades (el redisseny està pensat com a columna, no com a full ample). */
  .wrap{max-width:460px;margin:0 auto;width:100%;flex:1;display:flex;flex-direction:column}
  /* Desktop: aprofitem l'amplada. Columna més ampla i el hero + "El detall" un al costat de l'altre
     (hero fix a 460, "El detall" a la seva dreta amb els seus tiles en 2 files). La resta de seccions
     (hora a hora, tendència, models, calibratge) s'adapten a tota l'amplada nova. */
  .herorow{display:block}
  @media(min-width:860px){
    .wrap{max-width:920px}
    /* En desktop les cards de 7 dies s'estiren per omplir tota l'amplada (a mòbil segueixen amb amplada
       fixa i scroll horitzontal, intactes). El min-width:104 fa de terra si mai no hi caben. */
    .days>.day{flex:1 1 0}
    /* Hero (primari) fix a 460. A la dreta, una COLUMNA (.rightcol) amb "El detall" a dalt i l'hora a
       hora a sota → omple l'alçada al costat del hero, sense forat. */
    .herorow{display:grid;grid-template-columns:460px minmax(0,1fr);gap:16px;align-items:stretch;margin-bottom:14px}
    /* Les DUES columnes s'estiren a l'alçada de la fila. Abans el hero anava a la seva alçada natural
       (align-self:start) perquè la columna dreta era la que sempre creixia; ara qualsevol de les dues
       pot ser la més alta (el hero infla amb els avisos, la dreta amb el desacord entre models), i
       amb una de sola estirada l'altra deixava un forat FLOTANT entre cards. Estirades totes dues,
       el que sobra queda DINS de la card que té menys contingut, que es llegeix com aire i no com un
       trau. */
    .herorow>.hero{margin-bottom:0}
    .rightcol{display:flex;flex-direction:column;gap:14px;min-width:0}
    /* Les DUES cards absorbeixen el que sobra de la columna, a parts iguals (flex:1 a totes dues).
       Amb l'elàstic només a "El detall", un hero molt alt (Qatar: avisos + risc de salut + nits
       seguides) li feia créixer 200px de cop mentre l'altra card es quedava clavada: la columna
       semblava mig buida a dalt i inflada a baix. */
    .rightcol>.numcard{margin-bottom:0;flex:1}
    /* "El detall" ABSORBEIX el que sobra de la columna: el hero és de mida molt variable (un dia amb
       adversos i onada creix 300px) i, sense un element elàstic, la columna dreta deixaria un forat.
       Ho fa creixent les seves sis mesures, que són contingut centrat i aguanten bé l'estirada —amb
       un sostre per fila perquè un dia d'avisos no les infli fins a l'absurd. */
    .rightcol>.detall{margin-bottom:0;flex:1;display:flex;flex-direction:column}
    /* Les mesures es queden a la seva mida i el que sobra de la columna cau DINS d'aquesta card, a
       sota. Estirar-les fins a omplir (files elàstiques) inflava sis caixes de 72px a 104 només per
       tapar un forat, i es notava: el forat ha de quedar on menys crida, no repartit pel contingut. */
    .rightcol>.detall .tiles{flex:1;align-content:start}
  }
  #out{flex:1 0 auto}   /* creix per omplir el que sobra i empeny el peu cap avall */
  ::selection{background:var(--amber);color:var(--ink)}
  .mast{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:var(--s5)}
  /* Logo i tagline apilats (el tagline SOTA el logo): amb la pastilla d'ubicació a la dreta, posar-lo
     al costat l'obligava a partir-se en dues línies quan el nom del lloc era llarg. */
  .brand{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
  .logo{font-family:var(--fd);font-weight:800;font-size:26px;letter-spacing:-.02em}
  .logo .r{color:var(--orange)}
  .tag{font-family:var(--fm);font-size:11px;letter-spacing:.04em;color:var(--muted)}
  /* Al mòbil la pastilla d'ubicació ja ocupa la dreta: el tagline s'embolicaria a dues línies,
     i és accessori. El deixem per a pantalles amples. */
  @media(max-width:500px){.tag{display:none}}

  /* Selector plegable: per defecte una sola línia amb el lloc actual, i el número
     surt de seguida a dalt. Toques i es desplega tota la llista. L'animació
     0fr→1fr de grid llisca suau amb qualsevol alçada de contingut. */
  /* padding:0 al picker → el botó locbar (amb padding propi) ocupa tot el bloc i és clicable sencer. */
  /* El selector: pastilla a dalt a la dreta (dins .mast); en obrir-la, el panell de llocs baixa
     com una card just a sota. Plegada no és cap caixa (només la pastilla mana). */
  .picker{margin-bottom:0}
  .picker.open{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg);margin-bottom:var(--s4)}
  /* A la primera visita (body.firstvisit) el selector ja és el protagonista inline: la pastilla
     "Tria un lloc" sobraria a dalt, així que l'amaguem. Amb lloc triat, la pastilla mana. */
  body.firstvisit .locbar{display:none}
  .locbar{display:inline-flex;align-items:center;gap:8px;max-width:62%;background:var(--panel);border:1px solid var(--line-strong);
          border-radius:var(--r-pill);color:var(--text);font-family:var(--fb);font-size:var(--t-base);font-weight:600;
          cursor:pointer;padding:8px 14px;-webkit-tap-highlight-color:transparent}
  .locbar:hover{border-color:var(--dim)}
  .locpin{color:var(--muted);flex:none;display:inline-flex;align-items:center}
  .locname{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .locchev{font-size:10px;color:var(--muted);flex:none;transition:transform .3s cubic-bezier(.4,0,.2,1)}
  .picker.open .locchev{transform:rotate(180deg)}
  .picker.open .locact{color:var(--muted)}
  .pickpanel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1)}
  .picker.open .pickpanel{grid-template-rows:1fr}
  /* Padding lateral SEMPRE (no lligat a .open): si no, en plegar el botó saltava a 100% i
     s'enganxava a les vores. El vertical sí que és condicional, per no ocupar alçada plegat. */
  .pickinner{overflow:hidden;min-height:0;padding-left:13px;padding-right:13px}
  .picker.open .pickinner{padding-top:14px;padding-bottom:16px}
  @media(prefers-reduced-motion:reduce){.pickpanel,.locchev{transition:none}}
  .grp{margin-bottom:9px}.grp:last-child{margin-bottom:0}
  .grpl{font-family:var(--fm);font-size:var(--t-cap);letter-spacing:.17em;text-transform:uppercase;color:var(--dim);margin-bottom:var(--s2)}
  .chips{display:flex;flex-wrap:wrap;gap:7px}
  .chip{font-family:var(--fm);font-size:12.5px;color:var(--text);background:var(--panel2);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:6px 12px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px}
  .chip:hover{border-color:var(--dim);background:var(--panel3)}
  .chip.on{background:var(--text);color:var(--ink);border-color:var(--text);font-weight:600}
  .chip.saved{border-style:dashed}
  .chip.home{border-style:solid;border-color:var(--amber);color:var(--amber)}
  .chip.home::before{content:"⌂";margin-right:1px;opacity:.85}
  .chip.home.on{background:var(--amber);color:var(--ink);border-color:var(--amber)}
  .chip .x{font-size:13px;line-height:1;opacity:.5;margin:-2px -3px -2px 0;padding:0 2px}
  .chip .x:hover{opacity:1;color:var(--red)}
  /* Marge de sota més gran que el de dalt: lliga la cerca amb el botó d'ubicació (les dues
     maneres d'arribar a qualsevol lloc) i la separa de la llista de llocs, que és una altra cosa. */
  .srow{display:flex;gap:var(--s2);margin-top:11px;margin-bottom:var(--s4)}
  .srow input{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line-strong);border-radius:11px;color:var(--text);font-family:var(--fb);font-size:16px;padding:10px 13px;outline:none}
  .srow input:focus{border-color:var(--dim)}
  /* El text que s'escriu es queda a 16px (evita el zoom d'iOS en enfocar), però el
     PLACEHOLDER va més petit i tènue perquè combini amb els xips i la resta de la card
     (abans, a 16px, cantava molt més gros que tot el que l'envolta). opacity:1 → Firefox
     no l'aclareix pel seu compte. */
  .srow input::placeholder{font-size:13px;color:var(--dim);opacity:1}
  .srow button{background:var(--panel2);border:1px solid var(--line-strong);border-radius:11px;color:var(--text);font-family:var(--fm);font-size:var(--t-sm);padding:0 14px;cursor:pointer}
  .srow button:hover{border-color:var(--dim)}

  .hero{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:22px 22px 24px;margin-bottom:14px}
  .hhead{display:flex;justify-content:space-between;align-items:center;gap:12px}
  .hclock{text-align:right;flex:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .hclock:active{opacity:.6}
  .hclab.warn{color:var(--amber)}   /* dades velles de fa una hora o més: el codi de color dels avisos */
  .hctime{font-family:var(--fm);font-size:20px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;line-height:1}
  .hclab{font-family:var(--fm);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:3px}
  .hclab:empty{display:none}   /* fresc i mateix fus: sense etiqueta → el rellotge queda en una sola línia */
  /* La icona del cel, aquí: si està tapat, el commutador sol/ombra no serveix de
     res (sense feix directe, sol = ombra). S'ha de veure abans de tocar-lo. */
  /* Icona del temps GRAN a l'esquerra, centrada sobre les dues files (nom + altitud). */
  .hplace{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
  .hpicon{flex:none;display:flex;align-items:center}
  .hpinfo{min-width:0}   /* deixa encongir l'embolcall perquè l'ellipsis del nom (.place) retalli dins la card */
  .place{font-family:var(--fd);font-weight:700;font-size:19px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .when{font-family:var(--fm);font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Dia que s'està mirant (no avui): FORA de la card, com a títol de secció sobre la hero,
     perquè es vegi clar de quin dia parlem abans de llegir-ne el detall. */
  .dayhead-out{display:flex;align-items:center;gap:10px;margin:2px 0 12px;padding:0 2px}
  .dayhead-out>span{font-family:var(--fm);font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
  .dayhead-out .acts{margin-left:auto}
  /* "Avui ·" més fi i tènue perquè el dia (Diumenge 19/07) sigui el que destaqui. */
  .dayhead-out .dhpre{font-weight:700;color:var(--text)}
  /* Accions de lloc (desa/casa/comparteix): botons nets amb estat clar (redisseny) — inactiu ghost
     llegible, actiu en color (verd=desat, ambre=casa). */
  .acts{display:flex;gap:7px;flex:none}
  .act{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;
       padding:6px 10px;font-family:var(--fm);font-size:11.5px;color:var(--text);cursor:pointer;transition:.14s;-webkit-tap-highlight-color:transparent}
  .act svg{color:var(--muted)}
  .act:hover{border-color:var(--dim);background:var(--panel2)}
  .act.only{padding:6px 8px}
  .act.saved{color:var(--green);border-color:rgb(var(--green-rgb) / .55);background:rgb(var(--green-rgb) / .12)}
  .act.saved svg{color:var(--green)}
  .act.home{color:var(--amber);border-color:rgb(var(--amber-rgb) / .55);background:rgb(var(--amber-rgb) / .1)}
  .act.home svg{color:var(--amber)}
  /* Commutador sol/ombra estil Apple: pista amb vora que engloba + pastilla interior que llisca. */
  .modes{display:inline-flex;flex:none;background:var(--panel2);border:1px solid var(--line-strong);border-radius:10px;padding:2px}
  .modes button{background:none;border:0;color:var(--muted);font-family:var(--fm);font-size:12px;padding:6px 12px;border-radius:8px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:.15s}
  .modes button.on{background:var(--text);color:var(--ink);font-weight:600}
  .save{font-family:var(--fm);font-size:11px;color:var(--muted);background:none;border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .save:hover{color:var(--text);border-color:var(--dim)}
  /* Desat = clarament verd i amb fons, perquè es vegi que ja hi és (abans el ✓ moll
     quedava igual que el +). */
  .save.issaved{color:var(--green);border-color:var(--green);background:rgb(var(--green-rgb) / .12);font-weight:600}
  /* Compartir: vora grisa (diferent de la resta) i icona SVG centrada. */
  /* Mateix aspecte que "home" (.save inactiu): vora i color hereten de .save; només centrem la
     icona SVG. Així ⌂ i el share van igual —repòs var(--muted), hover var(--text) via .save:hover. */
  .sharebtn{display:inline-flex;align-items:center;padding:6px 9px}
  /* Avís efímer (p. ex. "Enllaç copiat"). */
  /* Centrat amb left:0/right:0 + margin auto, NO amb left:50%+translateX. Amb left:50% l'amplada
     disponible per a la caixa és només la meitat de la pantalla (195px en un iPhone), o sigui que
     el text es partia en dues línies encara que hi cabés de sobres; el translateX ho recol·locava
     després, quan el mal ja estava fet. Així disposa de tota l'amplada i només parteix si de
     debò no hi cap. */
  .toast{position:fixed;left:0;right:0;margin-inline:auto;width:fit-content;max-width:calc(100% - 32px);
         bottom:calc(22px + env(safe-area-inset-bottom));text-align:center;
         background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:10px;
         padding:9px 15px;font-size:13px;font-family:var(--fm);opacity:0;transition:opacity .2s;pointer-events:none;z-index:20}
  .toast.show{opacity:1}
  /* AVÍS D'ACTUALITZACIÓ: l'únic amb dibuix. Es feia invisible enmig de la resta d'avisos, i com
     que és el que et diu QUINA versió tens, que passi de llarg li treu tot el valor.
     SENSE CAP CAIXA, i ara de debò: ni fons, ni vora, ni ombra, ni tan sols el bassal de fosca que
     hi havia al darrere —feia exactament l'efecte que no volíem, el d'una card—. El que es veu són
     les ones i el text, i prou. El dibuix ja s'acaba sol als extrems, i la llegibilitat la porta
     tota el CONTORN de les lletres. */
  .toast.upd{background:radial-gradient(52% 118% at 50% 50%,
               rgb(var(--ink-rgb) / .62), rgb(var(--ink-rgb) / .44) 42%,
               rgb(var(--ink-rgb) / .16) 68%, rgb(var(--ink-rgb) / 0) 86%);
             border:0;box-shadow:none;border-radius:0;
             /* Ample perquè hi hagi dibuix a banda i banda del text (que fa uns 230px): a 440 en
                queden uns 100 a cada costat. Al mòbil mana el marge de 56px, que és el que evita
                que els caps del fus toquin la vora de la pantalla. */
             width:min(440px,calc(100vw - 56px));max-width:none;padding:22px 10px;
             font-size:14.5px;letter-spacing:.01em;
             /* L'ENTRADA. No ha d'aparèixer de cop: puja una mica, s'eixampla des d'un pèl més petit
                i entra DESENFOCADA fins a quedar nítida. El desenfoc és el que ho fa agradable —una
                cosa que es materialitza, no que s'encén—, i la corba frena molt al final perquè
                s'aturi sola en comptes de clavar-se. Mig segon: prou per notar-ho, prou poc per no
                fer esperar. */
             transform:translateY(12px) scale(.97);filter:blur(3px);
             transition:opacity .5s ease, transform .55s cubic-bezier(.16,.9,.24,1), filter .45s ease}
  .toast.upd.show{transform:none;filter:none}
  /* EL CONTORN, NOMÉS AMB OMBRES. Sense plafó, el peu de la pàgina i els números passen just al
     darrere del text i cal separar-lo del fons.
     Es va fer amb `-webkit-text-stroke` + `paint-order:stroke fill`, que pinta el traç SOTA la
     lletra. A Chrome perfecte; a l'iPhone, una vora negra enorme que se't menja els glifs. Es va
     provar de protegir-ho amb `@supports (paint-order: stroke)` i NO N'HI HA PROU: `@supports`
     comprova que la propietat es PARSEGI, no que el navegador la RESPECTI. WebKit la parseja i
     després pinta el traç a sobre igualment, o sigui que el guard passa i el defecte hi és. No hi ha
     manera de detectar-ho des del CSS ni des del JS.
     Tercera vegada en aquesta peça que una propietat moderna falla A MITGES en comptes de no fer
     res —paint-order, backdrop-filter i ara altre cop paint-order—, que és el pitjor cas possible:
     no es pot detectar. Per a la peça que ha de garantir que el text es llegeixi, el mecanisme ha
     de ser dels que es pinten igual a tot arreu, i les ombres ho són.
     Nou de radi creixent i opacitat decreixent: fan la mateixa massa fosca, sense cap vora dura i
     sense dependre de res. */
  .toast .ttxt{position:relative;z-index:1;font-weight:500;
               /* CONTORN A BASE D'OMBRES CURTES REPETIDES. Dues ombres del mateix radi s'acumulen en
                  opacitat, o sigui que repetint-ne d'1 i 2px es densifica el halo JUST arran del glif
                  —que és el que fa de contorn— sense l'aresta d'un traç, que és el que a WebKit
                  acabava pintat sobre la lletra. Les de radi llarg, al final, el fonen amb el fons.
                  Cada radi hi va DUES vegades a posta: és la manera de doblar-ne la densitat sense
                  eixamplar el halo, que amb les ones just al darrere és el que calia. */
               text-shadow:0 0 1px var(--ink),0 0 1px var(--ink),0 0 1px var(--ink),0 0 2px var(--ink),
                           0 0 2px var(--ink),0 0 2px var(--ink),0 0 3px var(--ink),0 0 3px var(--ink),
                           0 0 4px var(--ink),0 0 4px var(--ink),0 0 6px var(--ink),0 0 6px var(--ink),
                           0 0 8px var(--ink),0 0 8px var(--ink),0 0 11px var(--ink),0 0 11px var(--ink),
                           0 0 15px var(--ink),0 0 15px var(--ink),0 0 21px var(--ink),
                           0 0 30px rgb(var(--ink-rgb) / .85),0 0 44px rgb(var(--ink-rgb) / .6)}
  .toast .tones{position:absolute;inset:0;z-index:0;pointer-events:none;
                -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
                mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
  .toast .tones svg{width:100%;height:100%;display:block}
  /* ⚠️ LA LLUM NO POT SORTIR D'UN `filter` SOBRE ELEMENTS SVG. Amb `drop-shadow()` a cada `<path>`
     Chrome encenia les ones i WebKit no en pintava CAP —fils durs, sense llum—, i el defecte no es
     pot detectar: WebKit parseja el filtre i el `getComputedStyle` el torna sencer. És el quart cop
     que aquesta peça ensopega amb una propietat que falla A MITGES (paint-order dos cops,
     backdrop-filter, i ara això). El mecanisme, doncs, ha de ser dels que es pinten igual a tot
     arreu: una CÒPIA desenfocada de les mateixes ones, amb `blur()` sobre un element HTML.
     La capa de llum va de germana de la nítida i no a dins: així el desenfoc no viu dins d'un
     element amb màscara, que és una altra combinació que WebKit resol quan vol.
     El blur ha de ser CURT. Passat de 6px, la llum de les vuit ones s'acumula fins a omplir tot el
     quadre amb una boira groguenca i, com que el SVG retalla als seus límits, allò acaba dibuixant
     la vora d'una caixa —just el que portem tota l'estona evitant. */
  /* La VERSIÓ, a la seva línia: mono, petita i apagada. És una dada per si algun dia reportes una
     cosa rara, no part de la notícia; i tenint-la a part, la frase no s'estira fins a tapar el
     dibuix. Hereta el contorn d'ombres de .ttxt, que és el que la fa llegible sobre les ones. */
  .toast .tver{display:block;margin-top:4px;font-style:normal;font-size:11px;font-weight:500;
               letter-spacing:.08em;color:var(--muted)}
  .toast .tglow{filter:blur(4.5px);opacity:.95}
  .toast .wvg{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
  /* El traç FOSC de la capa nítida: el que separa cada ona del que tingui al darrere. Va sense cap
     llum a posta —si en portés, il·luminaria la mateixa fosca que ha de fer de contorn—. El gruix
     (color + 3,4px) i l'opacitat els posa el JS, en proporció a cada ona. */
  .toast .wvb{fill:none;stroke:var(--ink);stroke-linecap:round;vector-effect:non-scaling-stroke}
  /* I el de color a sobre. Pot ser fi i viu perquè el contorn el sosté i la llum ja ve de sota. */
  .toast .wv{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
  /* Qui demana menys moviment: sense pujada, sense escala i sense desenfoc. Només el fos, que no
     és moviment. */
  @media(prefers-reduced-motion:reduce){
    .toast.upd{transform:none;filter:none;transition:opacity .3s}
  }
  /* Banner de consentiment (opt-in real: res d'analítica fins que s'accepta). Fix a baix,
     reutilitza tokens i el safe-area del toast; ample a desktop, s'empila a mòbil (flex-wrap). */
  .cbanner{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;
           max-width:680px;margin:0 auto;background:var(--panel2);border:1px solid var(--line);border-radius:14px;
           padding:14px 16px;box-shadow:0 8px 30px rgba(0,0,0,.45);display:flex;align-items:center;gap:14px;
           flex-wrap:wrap;font-size:13px;line-height:1.5;color:var(--muted)}
  .cbanner.hide{display:none}
  .cbanner .cb-t{flex:1;min-width:210px}
  .cbanner .cb-t b{color:var(--text);font-weight:600}
  .cbanner .cb-t a{color:var(--amber);text-decoration:underline}
  .cbanner .cb-btns{display:flex;gap:8px;flex:none;margin-left:auto}
  .cbanner button{font-family:var(--fm);font-size:12px;border-radius:9px;padding:9px 14px;cursor:pointer;
                  border:1px solid var(--line);-webkit-tap-highlight-color:transparent}
  .cbanner .cb-no{background:var(--panel);color:var(--muted)}
  .cbanner .cb-no:hover{color:var(--text);border-color:var(--dim)}
  .cbanner .cb-yes{background:var(--amber);color:var(--ink);border-color:var(--amber);font-weight:600}
  .cbanner .cb-yes:hover{filter:brightness(1.06)}
  /* A mòbil: els dos botons a tota amplada i partits (tap fàcil, i rebuig igual de visible). */
  @media(max-width:460px){.cbanner .cb-btns{width:100%;margin-left:0}.cbanner .cb-btns button{flex:1}}
  /* Enllaç persistent (fora de #foot: no el toca renderFoot) per gestionar galetes/privacitat. */
  .cfoot{max-width:720px;margin:10px auto 0;font-size:11px;color:var(--dim);text-align:center}
  .cfoot a{color:var(--dim);text-decoration:underline;cursor:pointer;margin:0 7px}
  .cfoot a:hover{color:var(--muted)}
  .cfoot .ver{display:block;margin-top:6px;font-family:var(--fm);font-size:10.5px;color:var(--faint)}

  /* ── Afegir a la pantalla d'inici (v. index.html, initInstall) ────────────────────
     Targeta del final, JUST SOBRE la ratlla del "Com funciona": hi arribes quan ja has vist el que
     havies vingut a veure, i llavors "guarda-te-la" té sentit. Amb aire a banda i banda —enganxada
     al contingut semblava una fila més de dades i no una cosa que et proposem. Amb `hidden` de debò (l'app ja instal·lada no l'ha de veure mai):
     el reset del document ja fa [hidden]{display:none}, i aquí no la contradiem amb cap display. */
  .instwrap{display:flex;align-items:center;gap:12px;max-width:720px;margin:38px auto 26px;padding:12px 14px;
            background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg)}
  .instwrap .inst-i{flex:none;display:block;border-radius:9px}
  .instwrap .inst-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .instwrap .inst-t b{font-size:13px;color:var(--text);font-weight:600}
  .instwrap .inst-t span{font-size:11.5px;color:var(--dim);line-height:1.4}
  /* El botó va APAGAT, no en ambre. L'ambre és l'accent de la temperatura i del que demana
     atenció ara; això és una comoditat que hi és per si la vols, i no ha de competir amb el
     veredicte ni semblar una tanca publicitària al final de la pàgina. La targeta sencera —icona,
     títol i frase— ja fa prou perquè es trobi. */
  .instwrap .inst-b{flex:none;font-family:var(--fm);font-size:12px;font-weight:600;border-radius:10px;
                    padding:9px 15px;cursor:pointer;background:var(--panel3);color:var(--text);border:1px solid var(--line-strong)}
  .instwrap .inst-b:hover{border-color:var(--dim);background:var(--panel2)}
  /* Estret: el botó a tota amplada sota el text, com al banner de galetes (tap gros, res encabit). */
  @media(max-width:460px){.instwrap{flex-wrap:wrap}.instwrap .inst-b{width:100%}}

  /* Full de passos d'iOS. Ancorat A BAIX a posta: el botó Comparteix que han de tocar tot seguit
     és allà mateix, i així la mirada no ha de tornar a pujar. z-index per sobre del banner de
     galetes (30) i del toast (20), que és l'únic que hi podria coincidir. */
  .isheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
          background:rgb(0 0 0 / .58);padding:14px;padding-bottom:calc(14px + env(safe-area-inset-bottom));
          animation:ishfade .18s ease both}
  .isheet .ish-card{width:100%;max-width:420px;background:var(--panel2);border:1px solid var(--line-strong);
                    border-radius:var(--r-lg);padding:16px 16px 14px;animation:ishup .22s cubic-bezier(.2,.7,.2,1) both}
  @keyframes ishfade{from{opacity:0}to{opacity:1}}
  @keyframes ishup{from{transform:translateY(14px)}to{transform:none}}
  @media(prefers-reduced-motion:reduce){.isheet,.isheet .ish-card{animation:none}}
  .isheet .ish-h{font-family:var(--fd);font-weight:700;font-size:16px;color:var(--text)}
  .isheet .ish-sub{font-size:12px;color:var(--dim);margin-top:3px;line-height:1.45}
  .isheet .ish-s{margin:12px 0 0;padding-left:20px;font-size:13px;color:var(--muted);line-height:1.6}
  .isheet .ish-s li{margin-bottom:5px}
  .isheet .ish-s b{color:var(--text);font-weight:600}
  .isheet .ish-ic{vertical-align:-2px;color:var(--cool)}
  .isheet .ish-w{margin-top:10px;font-size:11.5px;line-height:1.45;color:var(--muted);
                 background:rgb(var(--amber-rgb) / .10);border:1px solid rgb(var(--amber-rgb) / .30);
                 border-radius:10px;padding:8px 10px}
  .isheet .ish-w b{color:var(--amber);font-weight:600}
  .isheet .ish-x{margin-top:14px;width:100%;font-family:var(--fm);font-size:12.5px;font-weight:600;cursor:pointer;
                 background:var(--amber);color:var(--ink);border:1px solid var(--amber);border-radius:10px;padding:10px 14px}
  .isheet .ish-x:hover{filter:brightness(1.06)}

  .eyebrow{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:8px}
  .bigrow{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-top:2px}
  .big{font-family:var(--fd);font-weight:800;font-size:clamp(66px,17vw,86px);line-height:.88;letter-spacing:-.04em;font-variant-numeric:tabular-nums;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
  /* La incertesa del sol, com a MATÍS del número i no en comptes seu (v. index.html, mostraUnc).
     Petita i apagada a posta: ha d'estar sempre visible sense competir amb el veredicte. */
  /* Sense nowrap: la columna esquerra del hero és estreta al mòbil i el text es tallava a mitja
     frase. Val més que ajusti a dues línies que no pas perdre'n el final. */
  .bunc{font-family:var(--fm);font-size:10.5px;color:var(--dim);margin-top:3px;line-height:1.35}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.big{animation:none}}
  .bigside{padding-bottom:12px}
  .verdictword{font-family:var(--fd);font-weight:700;font-size:19px}
  /* Banda superior en dues columnes: esquerra (feel d'ara + veredicte) i dreta (Màxima/Mínima/Nit
     apilades). Totes dues amb card de fons; mateixa alçada (stretch). Mateixa graella a mòbil i
     desktop —el número (clamp/vw) hi cap sempre. */
  /* Esquerra (l'"ara") 2/3, dreta (Màxima|Mínima|Nit) 1/3: les targetes són xifres curtes i no
     necessiten amplada; el número gran del moment, sí. Des que en són tres, la columna de la dreta
     sol ser la més ALTA de les dues —i és correcte: hi ha més dia a explicar que un sol número—. */
  /* Mòbil: dues columnes iguals (targetes amples, poc buit al mig). Desktop (≥481): el número
     s'ajusta al seu contingut i les targetes passen a FILA per omplir l'amplada sense buit. */
  .herotop{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s3);align-items:stretch;margin-top:var(--s4)}
  /* El número d'ara va PLA sobre la card del hero (com el redisseny): sense caixa pròpia, perquè
     no competeixi amb les targetes de Màxima/Mínima/Nit. Aquestes sí que són caixes; el número, no. */
  /* El bloc del número, alineat A DALT (no centrat): així queda junt sota el commutador i no deixa
     un forat gran quan la columna de la dreta (Màxima/Mínima/Nit) és més alta. */
  .ht-left{background:none;border:0;padding:0;display:flex;flex-direction:column;justify-content:flex-start;gap:10px;min-width:0}
  /* Rellotge a dalt a l'ESQUERRA, en una sola línia (hora + etiqueta al costat), fent bloc amb
     l'eyebrow. Abans anava a la dreta i en una card estreta quedava flotant amb un buit al costat. */
  .ht-clock{display:flex;justify-content:flex-start}
  .ht-clock .hclock{display:flex;align-items:baseline;gap:7px;text-align:left}
  .ht-clock .hctime{font-size:17px}
  .ht-clock .hclab{margin-top:0;font-size:8px;opacity:.85}   /* "hora local"/edat, discret al costat de l'hora */
  .ht-left .eyebrow{margin-top:0}
  .ht-left .bigrow{flex-direction:column;align-items:flex-start;gap:1px;margin-top:0}
  .ht-left .bigside{padding-bottom:0}
  .ht-right{display:flex;flex-direction:column;gap:8px;min-width:0}
  /* El commutador sol/ombra va a BAIX de la columna del número, a tota amplada: ompleix l'espai
     que quedava buit sota el número i queda connectat (el control just sota el valor que canvia). */
  /* El bloc del número va SEMPRE en card, tant avui com als dies futurs. Abans, avui anava pla i el
     dia futur en caixa, per distingir-los; el problema és que en canviar de dia la meitat esquerra
     es reestructurava sencera, i la distinció ja la porten dues coses més explícites que una vora:
     el RELLOTGE (només hi és avui) i l'etiqueta ("Ara, al sol" vs "De dia, de mitjana").
     Amb la caixa a totes dues, la fila queda simètrica —caixa a l'esquerra, caixa a la dreta— i no
     salta res en moure't pels dies.
     LA VORA DISTINGEIX, i ho fa dient alguna cosa: la NORMAL de qualsevol card quan el número és un
     INSTANT de debò (ara, amb el seu rellotge al costat) i DISCONTÍNUA quan no ho és —"de dia, de
     mitjana" no
     és cap lectura concreta, és una construcció—. Discontinu ja vol dir "derivat, no mesurat" a la
     resta de l'app (`.tof`, la ratlla de l'aire dels models; `.ltoday`, la marca d'avui), o sigui
     que no s'inventa cap llenguatge nou. Es va provar només amb la vora més clara i la diferència
     no es veia: dues vores fosques gairebé iguals no distingeixen res. */
  .ht-main{display:flex;flex-direction:column;gap:8px;min-width:0;
           background:var(--panel2);border-radius:var(--r-md);padding:13px 15px;
           border:1px solid var(--line)}
  .ht-main .eyebrow{margin-top:0}
  /* ARA no porta res: és la vora NORMAL de qualsevol card de l'app (--line). És la vista per defecte
     i no ha de cridar; el que es marca és l'EXCEPCIÓ. */
  .ht-main.peak{border-style:dashed;border-color:rgb(var(--text-rgb) / .22)}   /* mitjana: discontínua */
  .modes.wide{display:flex;width:100%}
  .modes.wide button{flex:1;text-align:center}

  /* Bar del dia: escala de color (fred→calor), amb la CAIXA del que notaràs (Nit→Punta) i la
     banda grisa de la previsió oficial (aire mín→màx) a sota. Avui, el pin de l'ara. */
  .daybar{position:relative;height:8px;margin:30px 0 0}   /* lloc per a la fila de xifres de sobre */
  /* El DEGRADAT el posa secHero en línia, no aquí: la pista s'eixampla quan el dia no hi cap
     (Ushuaia, Doha) i les parades de color s'han de recol·locar amb ella, o els colors deixarien
     de correspondre als graus. Amb la pista de sempre surt idèntic al que hi havia. */
  .db-scale{position:absolute;left:0;right:0;top:0;height:8px;border-radius:5px;opacity:.8}
  .db-feel{position:absolute;top:-3px;height:14px;border:2px solid var(--text);border-radius:6px;box-sizing:border-box}
  /* La banda OFICIAL, separada de la nostra: enganxades (a 1px) es llegien com una sola peça de dos
     tons, i són dues mesures de dues fonts diferents. Amb 4px de carrer ja es veuen com dues. */
  .db-off{position:absolute;top:16px;height:5px;border-radius:3px;background:var(--muted);opacity:.55}
  .db-now{position:absolute;top:-6px;width:3px;height:20px;border-radius:3px;background:var(--text);transform:translateX(-50%);box-shadow:0 0 0 3px var(--panel)}
  /* L'"ara": mateixa fila que els caps i CENTRADA AL PIN. Qui s'aparta, quan es toquen, és el cap
     (v. secHero), no ella: el seu sentit és marcar on ets. */
  .db-nowv{position:absolute;bottom:calc(100% + 4px);transform:translateX(-50%);font-family:var(--fm);
           font-size:11.5px;font-weight:600;color:var(--text);white-space:nowrap;
           font-variant-numeric:tabular-nums;pointer-events:none}
  /* ⚠️ REGLA DE LA BARRA: A DALT LA SENSACIÓ, A SOTA NOMÉS L'AIRE. Els caps de la caixa van amunt
     amb el pin de l'"ara" —tots tres són sensació—; a sota només hi queda la banda grisa oficial,
     que és d'aire. Posats a sota, quedaven enganxats a la banda grisa i es llegien com si en fossin
     els extrems: dos eixos diferents amb la mateixa pinta, que és justament el que l'app no fa.
     Tots tres van a la MATEIXA fila. El que evita que es trepitgin no és separar-los en dos pisos
     sinó l'ancoratge: els caps van FORA de la caixa (flanquejant-la, o sigui que en un dia pla
     s'allunyen en comptes d'acostar-se) i l'"ara" va ancorada DINS segons on caigui. */
  .db-lo,.db-hi{position:absolute;bottom:calc(100% + 4px);font-family:var(--fm);font-size:10.5px;font-weight:500;
                font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
  /* El carrer de 6px ja va DINS del `left` que calcula secHero (allà s'ha de poder comparar amb
     la posició de l'"ara" en píxels); aquí, cap padding, o es comptaria dues vegades. */
  .db-lo{transform:translateX(-100%)}
  /* row-gap curt: quan els tres ítems es parteixen en mòbil (una línia cadascun) no s'han de
     separar tant com quan van de costat (abans, gap:14px feia 14px també entre línies → massa aire). */
  .db-leg{display:flex;column-gap:14px;row-gap:5px;flex-wrap:wrap;font-family:var(--fm);font-size:10.5px;color:var(--muted);margin-top:26px}
  .db-k{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .db-k::before{content:"";width:13px;flex:none}
  .db-k.feel::before{height:7px;border:1.5px solid var(--text);border-radius:2px;box-sizing:border-box}
  .db-k.off::before{height:4px;background:var(--muted);opacity:.7;border-radius:2px}

  /* (Aquí hi havia el plec de la derivació. Ja no hi és: el desglossament viu sempre visible dins la
     card "D'on surt el número" —és la resposta al seu títol i és curt—, i així desplegar-lo no pot
     desquadrar la columna de la dreta.) */
  /* La frase de la card: diu en paraules el que la barra diu en gràfic. */
  .numsay{font-size:13px;color:var(--muted);line-height:1.45;margin:0 0 2px}
  .numsay b{color:var(--text);font-weight:600}
  /* Context del dia: clima i sinòptica, un sol bloc (responen la mateixa pregunta). El marge el
     posa el contenidor, no cada paràgraf, o entre els dos hi queda un buit que els separa. */
  .ctxblock{margin-top:16px}
  .clim,.synop{font-size:13px;color:var(--muted);line-height:1.5;margin:0}
  .synop{max-width:62ch;margin-top:8px}
  .clim b,.synop b{color:var(--text);font-weight:600}
  /* flex-wrap: els xips es parteixen a la línia següent en comptes de desbordar (abans,
     nowrap + sense espais entre xips = una sola línia impartible que eixamplava la pàgina). */
  .decomp{font-family:var(--fm);font-size:11.5px;color:var(--dim);margin-top:var(--s5);line-height:1.9;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:5px}
  .decomp .dcl{letter-spacing:.14em;text-transform:uppercase;font-size:9.5px;flex-basis:100%;margin-bottom:2px}
  .decomp .dc{white-space:nowrap}
  .decomp .dc b{font-weight:500}
  .decomp .sep{opacity:.5}
  /* Escapatòria com a CALLOUT (redisseny): vora sencera del color de l'accent + fons subtil, en lloc
     de la vora esquerra soleta. El color el segueix posant l'estil inline (border-color). */
  .escape{font-size:13px;color:var(--muted);line-height:1.5;margin-top:var(--s5);
          border:1px solid;border-radius:var(--r-md);padding:13px 15px;background:rgb(var(--text-rgb) / .025)}
  .escape b{color:var(--text);font-weight:600}
  .est{font-size:12px;color:var(--dim);line-height:1.5;margin-top:10px;max-width:64ch;border-left:2px solid var(--line);padding-left:10px}
  .est b{color:var(--muted);font-weight:600}
  /* L'enllaç a l'avís oficial dins d'aquestes notes. Sense regla, sortia el blau (i el lila de "visitat")
     per defecte del navegador, fora de la paleta. Pes i color del text destacat del bloc, subratllat amb
     el to de la pluja, que és on surt. */
  .escape a,.escape a:visited{color:var(--text);font-weight:600}
  .est a,.est a:visited{color:var(--muted);font-weight:600}
  .escape a,.est a{text-decoration:underline;text-decoration-color:rgb(var(--cool-rgb) / .55);text-underline-offset:2px}
  .escape a:hover,.est a:hover{text-decoration-color:var(--cool)}
  /* Avís d'onada (extrem relatiu al lloc): anella d'accent al capdamunt de la hero. */
  /* Una sola columna: etiqueta a dalt, text a sota (res de dues columnes, que quedava malament
     tant a desktop com a mòbil). */
  .wave{display:flex;flex-direction:column;gap:6px;margin:16px 0 4px;padding:14px 16px;
        border:1.5px solid;border-radius:14px;background:var(--panel);font-size:13px;line-height:1.5}
  .wave .wv-l{font-family:var(--fm);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
  .wave .wv-b{color:var(--muted)}
  .wave .wv-b b{color:var(--text);font-weight:700}
  /* FENOMEN ADVERS. Surt poques vegades l'any i, quan surt, ha de manar la pantalla: per això, a
     diferència de .wave (ratxa de calor, que és CONTEXT), va en vermell, amb la vora més gruixuda
     i el fons tenyit. No s'ha de poder confondre amb una nota de context ni passar de llarg fent
     scroll. La línia de l'avís oficial va SEPARADA per un filet i més apagada, perquè és una altra
     VEU —no som nosaltres qui avisa— i s'ha de llegir com a tal. */
  .sev{display:flex;flex-direction:column;gap:8px;margin:16px 0 4px;padding:15px 16px;
       border:2px solid var(--red);border-radius:14px;background:rgb(var(--red-rgb) / .07);
       font-size:13.5px;line-height:1.5}
  .sev .sv-l{font-family:var(--fm);font-size:11px;font-weight:700;letter-spacing:.08em;
             text-transform:uppercase;color:var(--red)}
  .sev .sv-b{color:var(--text)}
  .sev .sv-b b{font-weight:700}
  .sev .sv-o{border-top:1px solid rgb(var(--red-rgb) / .28);padding-top:9px;font-size:12px;color:var(--muted)}
  .sev .sv-o b{color:var(--text);font-weight:600}
  .sev .sv-o a{color:var(--red);font-weight:600}
  /* Marca d'advers a la card de dia: taronja i prima, dins la capçalera al costat de la icona de
     cel. No pot ser un bloc de color —la card ja fa servir el color per a la SENSACIÓ (les dues
     barretes d'accent), i un tercer color ple s'hi barallaria. */
  .dsevw{color:var(--orange);display:inline-flex;align-items:center;flex:none}
  /* CONFIANÇA: va dins la zona "d'on surt", amb la mateixa veu que .synop/.clim (context, no
     alarma). Vora esquerra com a .est perquè es llegeixi com un matís del número, no com un avís. */
  .conf{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:12px;max-width:64ch;
        border-left:2px solid var(--line-strong);padding-left:10px}
  .conf b{color:var(--text);font-weight:600}
  /* ── bento: tiles compartides (parell Punta|Nit + mesures) ────────────────────────
     Mateix idioma de card que .src/.day: fons --panel2, vora --line, arrodonit. */
  /* Entrada als models, com a ítem més de la llegenda del bar (així en desktop tot va en una línia;
     en mòbil, el flex-wrap el baixa). La card oficial gran s'ha retirat: el bar ja fa la comparació. */
  .ofsrc{background:none;border:none;padding:0;font-family:var(--fm);font-size:10.5px;color:var(--muted);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
  .ofsrc:hover{color:var(--text)}

  /* Targetes Màxima/Mínima/Nit (columna dreta). STAT compacte: etiqueta a DALT, número+hora a sota
     (alineats a l'esquerra). El "space-between" estirava el número a l'altra punta i en desktop
     feia un forat buit lleig. La nit hi afegeix una sub-línia (paraula de son + badge integrat). */
  /* UNA card amb TRES FILES (Màxima · Mínima · Nit), no tres caixes apilades: tres vores, tres radis
     i tres ombres competien entre elles i el resum del dia es veia com tres coses soltes. Files
     separades per una línia fina; etiqueta a l'esquerra, valor i hora a la dreta → es llegeix en
     columna, com una taula, i el número queda alineat amb el de sobre i el de sota. */
  .ptile{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);
         display:flex;flex-direction:column;min-width:0;flex:1;overflow:hidden}
  /* Fila d'una línia: etiqueta (esquerra) · número (empès a la dreta) · hora. Tres columnes fixes →
     els números de les tres files queden en columna, alineats, passi el que passi amb els dígits
     (tabular-nums) i amb el signe. La nit hi afegeix una segona línia amb el descriptor i el badge. */
  .ptrow{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:6px;
         padding:7px 11px;flex:1;align-content:center;min-width:0}
  .ptrow+.ptrow{border-top:1px solid var(--line)}
  .ptile .pt-l{font-family:var(--fm);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
  .ptile .pt-v{font-family:var(--fd);font-weight:800;font-size:23px;line-height:1.05;font-variant-numeric:tabular-nums;justify-self:end}
  .ptile .pt-h{font-family:var(--fm);font-size:9.5px;color:var(--muted)}
  .pt-sub{grid-column:1/-1;justify-self:end;text-align:right;font-family:var(--fm);font-size:10px;
          color:var(--muted);line-height:1.25;margin-top:1px}
  .pt-sub .pt-badge{margin-left:4px;display:inline-block}
  /* El recorregut de la nit, a la seva línia: és una dada, no un adjectiu, i enganxada al descriptor
     es llegia com si en formés part. */
  .pt-rang{display:block;color:var(--dim);font-size:9.5px;margin-top:1px}
  .ptile .pt-badge{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--red);
                   border:1px solid var(--red);border-radius:4px;padding:0 4px}

  .tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
  .tile{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 8px;
        display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;min-width:0}
  .tile .ti-ic{color:var(--muted);height:16px;display:flex;align-items:center}
  .tile .ti-v{font-family:var(--fm);font-size:15px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
  /* la "cel" és text, no xifra: que pugui fer salt de línia i no desbordi la card */
  .tile .ti-v.wx{white-space:normal;font-size:13px;line-height:1.12}
  .tile .ti-v .ti-u{font-size:10px;color:var(--dim);font-weight:400}
  .tile .ti-l{font-family:var(--fm);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:auto}
  /* El bento va a la SEVA card ("El detall"), separada del hero (redisseny): dona aire i jerarquia. */
  /* Cards de suport del hero: "D'on surt el número" i "El detall". Mateixa pell (fons, vora, radi) i
     mateixa capçalera, perquè es llegeixin com una parella: el mètode i les mesures d'on surt. */
  .detall,.numcard{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:15px 16px 16px;margin-bottom:14px;box-shadow:inset 0 1px 0 rgb(255 255 255 / .04)}
  .detall .chead,.numcard .chead{margin:0 0 13px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .detall .ct,.numcard .ct{font-family:var(--fm);font-size:var(--t-cap);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
  /* Dins la card, la barra ja no necessita el marge que la separava del text del hero. */
  .numcard .daybar{margin-top:26px}
  .numcard .decomp{margin-top:var(--s4)}
  .detall .tiles{margin-top:0}
  .detall .clink,.numcard .clink{font-family:var(--fm);font-size:var(--t-sm);color:var(--amber);background:none;border:0;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
  .detall .clink:hover,.numcard .clink:hover{filter:brightness(1.1)}
  .detall .fineprint,.numcard .fineprint{margin:0 0 14px}   /* va ABANS del contingut: marge a sota, cap a les cards */

  .fineprint{margin-top:10px}
  .fineprint>summary{font-family:var(--fm);font-size:11.5px;color:var(--amber);cursor:pointer;list-style:none;
                     -webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;gap:5px}
  .fineprint>summary::-webkit-details-marker{display:none}
  .fineprint>summary::before{content:"▸";font-size:10px;transition:transform .2s}
  .fineprint[open]>summary::before{transform:rotate(90deg)}
  .fineprint>summary:hover{color:var(--text)}
  .fineprint p{font-size:12px;color:var(--dim);line-height:1.5;max-width:64ch;margin:8px 0 0}
  .fineprint p b{color:var(--muted)}

  .homecmp{font-family:var(--fm);font-size:11px;color:var(--dim);margin-top:9px}
  .homecmp b{color:var(--muted);font-weight:500}
  .ctx{margin-top:14px;background:rgb(var(--orange-rgb) / .09);border:1px solid rgb(var(--orange-rgb) / .35);border-radius:10px;padding:9px 12px;font-size:12px;color:var(--amber);line-height:1.45}

  /* hourly */
  /* Card pròpia (abans anava enganxada al resum amb un border-top). */
  /* Widget interactiu (scrubber): res del seu text s'ha de poder seleccionar → arrossegar per llegir
     les hores no ha d'engegar una selecció de text (etiquetes, eix, llegenda). */
  .hourly{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:15px 16px;margin-bottom:14px;box-shadow:inset 0 1px 0 rgb(255 255 255 / .04);
          user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  /* Columna (dia SOBRE la lectura), no fila que fa wrap: si el dia i la lectura competien en una
     mateixa fila amb flex-wrap, segons la llargada del text la lectura de vegades cabia al costat
     (1 línia) i de vegades saltava a sota (2 línies). Això canviava l'alçada de la capçalera i
     EMPENYIA el gràfic amunt/avall a cada hora que llegies — trencava el hover. Apilats + .hc a una
     sola línia fixa (v. sota), l'alçada de la capçalera és constant i el gràfic no es mou mai. */
  .hh{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:12px}
  .hh .hl{font-family:var(--fm);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
  /* El dia, al davant i en crema, com el text de les hores destacades (.hc b): és el que
     situa la card. "Hora a hora · al sol" queda com a etiqueta petita darrere. Abans el dia
     anava enterrat, dim i uppercase, al mig de la línia; i hi havia un botó "← avui" duplicat
     (el bo és al capçal de dia, just a sobre). */
  .hh .hl .hl-day{text-transform:none;letter-spacing:.01em;font-size:11px;color:var(--text);font-weight:500}
  /* Alçada FIXA de DUES línies. La invariant que no es pot trencar és que l'alçada no depengui del
     text —si canvia, el gràfic salta a cada hora que llegeixes i es trenca el hover—, i això ho dona
     una alçada fixa, no el fet que sigui UNA línia. Amb una de sola hi cabien 320px a 390px de
     pantalla, i la lectura d'una hora (hora · sensació · cel · pluja% · els dos factors que la mouen)
     en demana fins a 400 —a Bergen es tallaven 31 de 34—. Escurçar-la volia dir treure informació
     de debò, o sigui que se li dona l'espai. Al repòs hi va el resum de les tres mesures del dia
     (punta · mínima · nit), que a mòbil n'ocupa dues justes: l'alçada fixa és el preu de no haver de
     retallar mai res. */
  .hh .hc{font-family:var(--fm);font-size:11px;line-height:1.45;color:var(--muted);
          height:calc(1.45em * 2);overflow:hidden;max-width:100%}
  .hh .hc b{color:var(--text);font-weight:500}
  /* ── JERARQUIA DE LA LECTURA ────────────────────────────────────────────────────────────────
     La capçalera deia sis coses amb el mateix pes i havies de llegir-les totes per trobar la que
     buscaves. Ara cada peça té el seu paper: l'HORA és l'índex (discreta), la TEMPERATURA és la
     resposta (gran i amb el seu color), el CEL acompanya i la lletra petita —pluja, marge de
     models, què mou l'hora— va apagada.
     ⚠️ La mida gran NO pot fer créixer la línia: la capçalera té alçada FIXA de dues línies perquè
     el gràfic no salti mentre el llegeixes. Per això `.r-t` porta line-height propi (13 × 1.2 =
     15,6px) que cap dins la línia del contenidor (11 × 1,45 = 15,95px). Si algun dia se'n puja la
     mida, s'ha de recalcular aquest line-height, no deixar-lo heretar. */
  .r-h,.r-k,.r-s,.r-x{font-style:normal}
  .r-h{color:var(--dim)}
  .r-k{color:var(--dim);letter-spacing:.04em}
  .r-t{font-size:13px;line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums;margin:0 3px}
  .r-s{color:var(--muted)}
  .r-x{color:var(--faint);font-size:10px}
  /* DOS NIVELLS a la lectura: la resposta a la primera línia (hora · TEMPERATURA · cel) i la lletra
     petita —pluja, marge de models, què mou l'hora— a la SEGONA. La capçalera ja té alçada fixa de
     dues línies (perquè el gràfic no salti mentre el llegeixes) i, amb tot en una tira, la segona
     quedava buida la meitat de les vegades i la primera, atapeïda. Ara l'espai reservat es fa servir
     i es llegeix en dos cops d'ull en comptes d'un de llarg. */
  .hc-read .r-x,.lc-read .r-x{display:block;line-height:1.25}
  /* La capçalera de l'hora a hora té alçada FIXA: si la segona línia s'embolica, es tallaria en sec
     i sense avisar. Amb nowrap+el·lipsi, quan no hi cap es veu que s'ha retallat —i el que es perd
     és sempre l'últim factor, que és el menys decisiu. */
  .hc-read .r-x{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hc-read .r-s{margin-left:1px}
  /* Separadors amb aire de debò: el punt volat va amb marge, no enganxat al mot ("serè· models"). */
  .r-x .sep{opacity:.55}
  /* La base de la gràfica és la MÍNIMA del dia, no el zero: la llargada de la barra
     és la posició dins del recorregut d'avui, i el valor absolut el porten el color
     (bandes UTCI) i les xifres. Però quan el dia creua el zero, el zero s'ha de
     veure — als Pirineus a l'hivern és LA pregunta. */
  .hwrap{position:relative;touch-action:pan-y}   /* vertical = scroll de pàgina; horitzontal = scrubber de la lectura */
  .hzero{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--cool);opacity:.55;z-index:1;pointer-events:none}
  .hzero span{position:absolute;right:0;top:-13px;font-family:var(--fm);font-size:9px;color:var(--cool)}
  .hgrid{display:grid;grid-template-columns:repeat(24,minmax(0,1fr))}
  .hi{height:18px;display:flex;align-items:center;justify-content:center;overflow:visible;position:relative}
  .hi svg{overflow:visible;flex:none}
  /* L'alçada del gràfic la mana AQUÍ (el dibuix va en % de la cel·la, v. secHourly). En desktop, on
     ocupa tota l'amplada, creix: amb 34 barres de 25px d'ample, 82px d'alt quedava xato. */
  .hcell{height:82px;display:flex;align-items:flex-end;padding:0 1px;position:relative}
  @media(min-width:860px){.hcell{height:152px}}
  .hval{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--fm);font-size:9.5px;
        font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
  .hval{z-index:2}          /* per damunt de la franja de desacord, que és absoluta amb z-index 1 */
  .hval.key{font-size:11px;font-weight:500}
  /* Les hores NO clau ja porten la seva etiqueta al marcatge, amagada: l'scrubber només l'encén. El
     número surt SOBRE la barra que mires, que és on el busques, i no cal crear cap element ni tornar
     a calcular cap posició a cada moviment del dit. */
  .hval.ghost{opacity:0;transition:opacity .09s linear}
  /* ⚠️ La xifra amagada es revela NOMÉS amb el dit a sobre (`scrub`), mai al repòs (`here`). Al
     repòs la marca es queda quieta i, si cau al costat de la màxima —que és el cas normal a mitja
     tarda—, les dues xifres es muntarien l'una sobre l'altra de manera permanent. Mentre hi passes
     per sobre no molesta perquè hi ets, i el valor el porta la capçalera igualment. */
  .hcell.scrub .hval.ghost{opacity:1;font-size:11px;font-weight:500}
  /* Fons de nit: s'aplica a la fila d'ICONES (.hi) i a la de BARRES (.hcell) alhora, perquè
     la franja de nit sigui un sol bloc continu. Nit CALOROSA: el fons crema (bona pràctica:
     el fons mostra la intensitat; les barres mantenen l'escala única de temperatura, sense
     salts de color). Fresca=negre neutre · càlida=taronja · tòrrida=vermell. */
  /* ⚠️ DOS SENYALS, DOS CANALS. El fons feia dues feines alhora: marcar la NIT (fosc) i dir com de
     calorosa era (tint taronja/vermell). A Qatar el resultat era que la franja de nit sortia MÉS
     CLARA i càlida que la del dia, amb una llegenda que deia "fons fosc = de nit": literalment fals.
     Barrejar dues variables en un sol canal és el defecte; la solució és separar-les.
       · NIT      → fons fosc NEUTRE, idèntic sempre. Ara la llegenda és certa a tot arreu.
       · CALOROSA → una ratlla de color sota la fila d'ICONES, que abraça just les hores de la nit.
     La ratlla va a la fila d'icones i no a la de barres a posta: allà no hi ha res que la tapi (les
     barres creixen des de baix i una nit tòrrida les té altes). */
  .hcell.night,.hi.night{background:rgba(0,0,0,.3)}
  /* La ratlla de "nit calorosa": un element propi i no una vora interna, perquè pugui SEPARAR-SE de
     la fila d'icones (enganxada a les barres quedava apretada) i arrodonir els caps. Els segments de
     cada hora es toquen i formen una barreta contínua; només la primera i l'última del tram
     arrodoneixen (n-ini / n-fi). */
  /* ── HORES DURES: una ratlla + un degradat llarg ────────────────────────────────────────────
     La RATLLA (3px, sota la fila d'icones) marca l'hora; el DEGRADAT li dona cos i evita que un tram
     curt sembli una barreta flotant. El degradat NO és un element per damunt sinó el FONS de la
     cel·la: així pot ser llarg de debò (fins al 62% de l'alçada) sense tenyir mai les barres, que hi
     passen per davant. Amb un degradat curt semblava una ombra; amb un d'aquests, la franja es
     llegeix com encesa per dalt.
     Colors: ambre = risc de nivell 1 o nit que no refresca · vermell = nivell 2 · blau = fred. */
  .hcell.d-h1{--g-rgb:var(--orange-rgb)} .hi.d-h1::before{background:rgb(var(--orange-rgb) / .92)}
  .hcell.d-h2{--g-rgb:var(--red-rgb)}    .hi.d-h2::before{background:rgb(var(--red-rgb) / .95)}
  .hcell.d-c1{--g-rgb:var(--cool-rgb)}   .hi.d-c1::before{background:rgb(var(--cool-rgb) / .92)}
  .hcell.d-c2{--g-rgb:var(--cool-rgb)}   .hi.d-c2::before{background:rgb(var(--cool-rgb) / .95)}
  .hi.d-h1::before,.hi.d-h2::before,.hi.d-c1::before,.hi.d-c2::before{
    content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px}
  /* Només els extrems del tram arrodoneixen: un tram sencer es veu com UNA barreta, no com una
     filera de segments escapçats. */
  .hi.n-ini::before{border-top-left-radius:2px;border-bottom-left-radius:2px}
  .hi.n-fi::before{border-top-right-radius:2px;border-bottom-right-radius:2px}
  /* Alfa BAIXA a posta. A un lloc com Doha les hores dures són gairebé tot el dia i, amb el degradat
     fort, la card sencera quedava tenyida i el senyal es diluïa: si tot crida, res crida. El que ha
     de saltar a la vista és la RATLLA; el degradat només li dona cos i lliga el color amb la franja. */
  .hcell.d-h1,.hcell.d-h2,.hcell.d-c1,.hcell.d-c2{
    background:linear-gradient(to bottom,transparent 0 6px,
      rgb(var(--g-rgb) / .12) 6px, rgb(var(--g-rgb) / 0) 52%)}
  .hcell.night.d-h1,.hcell.night.d-h2,.hcell.night.d-c1,.hcell.night.d-c2{
    background:linear-gradient(to bottom,transparent 0 6px,
      rgb(var(--g-rgb) / .16) 6px, rgb(var(--g-rgb) / 0) 58%),rgba(0,0,0,.3)}
  .bar{width:100%;border-radius:5px 5px 2px 2px;min-height:4px;opacity:.92}
  /* Franja de DESACORD entre models (v. bandOf a index.html): del mínim al màxim de la sensació
     que en surt. Neutra —el color ja vol dir temperatura— i per damunt de la barra, amb els dos
     caps marcats perquè es llegeixi com un rang i no com una ombra qualsevol. Prou fluixa per no
     tapar el color de sota: el que ha de saltar a la vista és l'ALÇADA, no la taca. */
  /* MARGE ENTRE MODELS: la barra CONTINUA, esvaïda, fins on arriben els models. Ha passat per tres
     formes i val la pena deixar-ho escrit:
       1. Ombra translúcida al 12% amb dues vores fines → la forma era bona però NO ES VEIA, i la
          llegenda l'havia d'anomenar "ombra", la pitjor paraula possible en una app que separa sol
          i OMBRA.
       2. Vidre glaçat (backdrop-filter) → es veia, però tapava el color de la barra, arribava a
          tapar les xifres i feia efecte postís.
       3. Barra d'error amb caps → correcta i llegible, però visualment lletja: una reixa de "T"
          sobre unes barres arrodonides.
     Torna la forma 1 —que és la que s'integra amb el dibuix— amb el que li faltava: farciment més
     present, un CAP superior nítid que marca el límit de debò, i el mateix radi que la barra, o
     sigui que es llegeix com la seva prolongació i no com una taca a sobre. Va per SOTA de les
     etiquetes (z-index), i l'etiqueta de l'hora es col·loca damunt del cap (v. secHourly). */
  .hband{position:absolute;left:1px;right:1px;z-index:1;pointer-events:none;border-radius:5px 5px 2px 2px;
         background:rgb(var(--text-rgb) / .17);
         border-top:2px solid rgb(var(--text-rgb) / .6);
         border-bottom:1px solid rgb(var(--text-rgb) / .28)}
  .hcell.now .bar{opacity:1;box-shadow:0 0 0 1.5px var(--text)}
  .haxis{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));font-family:var(--fm);font-size:9px;color:var(--dim);margin-top:5px}
  .haxis span{grid-column:span 1;text-align:center;white-space:nowrap;overflow:visible}
  .hleg{margin-top:8px}
  .hleg .hhint{display:block;font-family:var(--fm);font-size:10px;color:var(--dim)}
  .hleg .lgnd{margin-top:5px}
  /* Mostres pròpies del gràfic horari: el QUADRAT és el fons de la nit i el BLOC ESVAÏT, el marge
     entre models (les línies ja les fan servir les altres cards; aquí no n'hi ha cap). */
  .lgnd i>b.box{height:10px;border:0;border-radius:2px;background:rgba(0,0,0,.55);
                box-shadow:inset 0 0 0 1px rgb(var(--text-rgb) / .14)}
  .lgnd i>b.fade{height:10px;border:0;border-radius:2px;background:rgb(var(--text-rgb) / .17);
                 box-shadow:inset 0 2px 0 rgb(var(--text-rgb) / .6)}
  /* Canvi de dia: només a l'eix, la data en clar i mica més forta que les hores (--dim) → marca el
     dia sense cap línia (que competiria amb l'ARA) ni to de color (el color ÉS la temperatura). */
  .haxis .ax-day{color:var(--text);font-weight:600;white-space:nowrap}
  /* Hora d'ARA: línia vertical clara CENTRADA sobre la barra (a més del contorn). Es distingeix del
     separador de dia (fi, a la VORA, i amb data a l'eix). */
  .hi.now,.hcell.now{position:relative}
  .hi.now::after,.hcell.now::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--text);opacity:.6;transform:translateX(-1px);z-index:2;pointer-events:none}
  /* Lectura (toca/llisca): la cel·la EXACTA que llegeixes (icona+barra) s'il·lumina + línia centrada.
     Posició EXACTA sobre la reixa (classe a la cel·la), sense el desquadre d'un % sobre .hwrap. */
  /* `here` = la barra que la capçalera descriu AL REPÒS; `scrub` = la que tens sota el dit. Mateixa
     marca (fil vertical + anella) perquè volen dir el mateix: "d'aquesta parla la capçalera". */
  .hi.scrub,.hcell.scrub,.hi.here,.hcell.here{position:relative}
  .hi.scrub::after,.hcell.scrub::after,.hi.here::after,.hcell.here::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--text);opacity:.5;transform:translateX(-.5px);z-index:3;pointer-events:none}
  .hcell.scrub .bar,.hcell.here .bar{box-shadow:0 0 0 1.5px var(--text);opacity:1}
  /* La capçalera SEMPRE porta una lectura (la de la barra marcada), no un resum que s'amaga: per
     això no hi ha cap estat "reading" ni res per commutar. L'alçada fixa de dues línies segueix
     valent —ara amb més motiu, perquè el contingut és sempre de la mateixa mena. */
  .hc .hc-read{display:inline;color:var(--text)}

  .sources{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:14px;box-shadow:inset 0 1px 0 rgb(255 255 255 / .04)}
  .sh{font-family:var(--fm);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:11px}
  .slist{display:flex;flex-wrap:wrap;gap:8px}
  /* Card de model en dues línies: (nom | temp) a dalt, i la NUVOLOSITAT sota, amb tota l'amplada
     (abans anava al costat de la temp i el % saltava a una segona línia). */
  .src{flex:1;min-width:150px;display:flex;flex-direction:column;gap:3px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 11px}
  .src .srctop{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
  /* Fila de baix en dues columnes, alineades amb les de dalt: núvols sota el nom (esquerra),
     nit sota la màxima (dreta). */
  .src .srcbot{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
  .src .snm{font-size:12.5px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .src .ssub{font-family:var(--fm);font-size:9.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .src .scl{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
  .src .sv{font-family:var(--fm);font-size:15px;color:var(--muted);display:inline-flex;align-items:center;gap:4px;flex:none}
  .src .svnit{font-family:var(--fm);font-size:9.5px;color:var(--muted);flex:none}   /* mínima nocturna, alineada a la dreta sota la màxima */
  .src .sv svg{flex:none}
  /* La NOSTRA lectura destaca per ELEVACIÓ i PES, no per color. El taronja que hi havia
     abans xocava dues vegades: és color semàntic (= fa calor) i alhora l'accent del banner
     de nits tropicals, o sigui que cada cop que el gastàvem aquí el devaluàvem allà. I en
     tema fosc els colors saturats vibren contra el fons: Material resol l'elevació aclarint
     la superfície, no saturant-la. Ara la card puja de to, el número va en blanc i bold, i
     la vora és blanca a poca opacitat (contrast de VALOR, sense reclamar cap significat).
     Sobreviu en escala de grisos → compleix WCAG 1.4.1 sense dependre del color. */
  .srcus{background:var(--panel3);border-color:rgba(255,255,255,.15)}
  .srcus .sv{color:var(--text);font-weight:600}
  .srcus .snm{color:var(--text);font-weight:600}
  .srcus .ssub{color:var(--muted)}
  .srcgroup{margin-bottom:2px}
  .srccrit{font-family:var(--fm);font-size:11px;color:var(--muted);margin-bottom:9px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .srccrit b{color:var(--text);font-weight:600}
  .srccount{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
  .baseline{font-family:var(--fm);font-size:11.5px;color:var(--muted);margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);line-height:1.5}
  .baseline b{color:var(--text);font-weight:500}
  /* Caveat de desacord entre models (cel/pluja). Viu AQUÍ, a Lectures dels models, perquè
     compara els models entre ells; abans anava despenjat a la card principal. */
  .srccaveat{font-family:var(--fm);font-size:11.5px;color:var(--amber);margin-top:10px;line-height:1.5}
  .srccaveat b{color:var(--text);font-weight:600}
  .bridge{font-size:12px;color:var(--dim);line-height:1.5;margin:14px 0;max-width:64ch;border-left:2px solid var(--line);padding-left:10px}
  .bridge b{color:var(--muted);font-weight:600}
  /* Mòbil: cada model a FILA SENCERA (abans 2 targetes atapeïdes de 150px per fila, amb el "· nit X°"
     i la nuvolositat cramats i illegibles). A tota l'amplada respiren nom + màx + nit + nuvolositat. */
  @media(max-width:500px){.src{min-width:100%}}

  /* Fila única amb scroll horitzontal (abans es partia en dues al mòbil). Mostra
     els MATEIXOS dies que la tendència, perquè triar-ne un des del gràfic sempre
     tingui la seva card ressaltada. */
  /* Sense scroll-snap (feia una sensació d'enganxat) i amb més separació entre cards. */
  /* Barra d'scroll amagada (scrollbar-width:none + ::-webkit-scrollbar) — segueix
     rossegant-se amb el dit/trackpad. L'afordança de "n'hi ha més" la dona l'última
     card, que queda tallada a la vora dreta. */
  .days{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:3px 0 2px;scrollbar-width:none;-ms-overflow-style:none}
  .days::-webkit-scrollbar{display:none}
  /* Prou amples perquè la card d'avui hi càpiga amb l'abreviatura del dia ("avui dg 19",
     ~10 car. en mono + icona) sense créixer respecte de les altres: així la fila queda uniforme. */
  .day{flex:0 0 auto;min-width:104px}
  .day:last-child{margin-right:2px}
  /* Indicador de color DINS la card: barra arrodonida a dalt, SEPARADA de la vora (marge), no la
     toca. El número gran ja porta el color de temp; això és un extra per escanejar la fila. */
  .day{background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;padding:15px 11px 13px;cursor:pointer;transition:.12s;-webkit-tap-highlight-color:transparent;position:relative}
  /* Dues barres-accent, i les dues del MATEIX EIX: a dalt la MÀXIMA, a baix la MÍNIMA, totes dues
     amb l'escala de confort. Abans la de baix era la nit, que va amb una altra escala (nightC): dues
     barres aparellades que en realitat mesuraven coses diferents. Alineades amb el CONTINGUT (no la
     vora), respirades i amb extrems arrodonits. */
  .day::before{content:"";position:absolute;top:8px;left:11px;right:11px;height:3px;border-radius:3px;background:var(--acc,transparent)}
  /* La de BAIX són dues: NIT (un quart, esquerra) i MÍNIMA (tres quarts, dreta), separades per un
     petit espai i cadascuna amb la seva escala de color. Les proporcions diuen el pes: el dia mana i
     la nit és el complement, però no desapareix —una nit tropical s'ha de veure des de la fila—. */
  .day .dbot{position:absolute;bottom:8px;left:11px;right:11px;height:3px;display:flex;justify-content:space-between}
  .day .dbot>b{flex:0 0 30%;border-radius:3px}    /* nit */
  .day .dbot>i{flex:0 0 66%;border-radius:3px}    /* mínima; el 4% que queda és la separació */
  .day .dbot.solo>i{flex:1}                       /* sense nit (dies sense finestra nocturna): la mínima sola, a tota l'amplada */
  .day:hover{border-color:var(--dim);transform:translateY(-1px)}
  .day:active{transform:translateY(0) scale(.98);filter:brightness(1.2)}
  /* Dia actiu: 1,5px amb el crema --text (243,238,230) a ~82% d'opacitat. Provat abans amb
     --dim (no es veia), --muted (beix apagat), blanc neutre mig (grisenc: es barreja amb el
     fons càlid) i el crema a plena opacitat (ressaltava una mica massa). Rebaixem-lo un pèl:
     prou per trobar el dia d'un cop d'ull, sense cridar. El crema (i no el blanc neutre)
     manté el to càlid en abaixar l'opacitat, o sigui que no torna a tirar a gris. */
  .day.on{background:var(--panel2);box-shadow:inset 0 0 0 1.5px rgb(var(--text-rgb) / .82)}
  .backnow{font-family:var(--fm);font-size:11px;color:var(--amber);background:none;border:1px solid var(--amber);border-radius:8px;padding:2px 8px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  /* min-height reserva el lloc del botó "Torna a avui": abans, en aparèixer, feia
     créixer la fila i tot saltava. */
  /* Barra de controls: sol/ombra + accions a l'esquerra, "Torna a avui" a la dreta.
     min-height reserva el lloc del botó perquè aparèixer no faci saltar res. */
  .dayshead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;min-height:34px}
  .dhctrl{display:flex;align-items:center;gap:7px}
  /* Outline (no ple): un botó ambre massís es podia confondre amb "estem a avui". */
  .backnow:hover{background:rgb(var(--amber-rgb) / .12)}
  .dhead{display:flex;justify-content:space-between;align-items:center;gap:6px}
  .day .dn{font-family:var(--fm);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
  .day .dr{font-family:var(--fd);font-weight:800;font-size:23px;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums;display:flex;justify-content:flex-end;align-items:baseline}
  /* "ARA" (només a la card d'avui): etiqueta petita a la cantonada de dalt a l'esquerra de la MATEIXA
     fila, ABSOLUTA i sense ocupar alçada. Va aquí i no a sobre perquè totes les cards han de fer
     exactament la mateixa mida: amb un marge extra només a la d'avui, la divisòria i el bloc
     Nit/Mín li quedaven uns píxels més avall que a les altres i la fila es veia desquadrada.
     L'espai hi és de franc: la fila fa l'alçada del número gran (23px) i la xifra petita (14px) seu
     a la mateixa línia base, o sigui que a dalt a l'esquerra no hi ha res.
     Sense l'etiqueta, dues xifres a la mateixa fila es llegien com "mín màx" —el patró de totes les
     apps del temps— i la Mín de sota les desmentia. */
  .day .dr{position:relative}
  .day .dr .drcur{margin-right:auto;font-size:14px;font-weight:600}
  .day .dr.hasnow::before{content:"ara";position:absolute;left:0;top:0;
    font-family:var(--fm);font-size:8px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
    color:var(--dim);line-height:1}
  /* MÍNIMA i NIT, en dues columnes amb l'etiqueta a dalt i el valor a sota (el mateix patró d'STAT
     que les targetes del hero). En una sola línia no hi cabien: la card fa 104px d'ample a mòbil i
     "Mín 13° Nit 15°" en demana ~88 de text pelat. Apilades, cada columna en gasta ~40. */
  .day .dmm{display:grid;grid-template-columns:1fr auto;column-gap:6px;row-gap:1px;font-family:var(--fm);margin-top:8px;padding-top:7px;border-top:1px solid var(--line);white-space:nowrap}
  .day .dml{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);line-height:1.3}
  .day .dmv,.day .dntv{font-size:12px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.2}
  .day .dmr{text-align:right}   /* la MÍNIMA, alineada a la dreta: cau sota la màxima, que també hi va */

  .trend{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:13px 15px 12px;margin-bottom:12px;box-shadow:inset 0 1px 0 rgb(255 255 255 / .04)}
  /* Fila d'icones del cel a DALT del gràfic de 7 dies, alineades amb cada columna de dia (reusa
     daySky/wIcon, com la tira de dies). Discretes (opacity) per no competir amb la corba.
     Es van provar a baix, enganxades a l'eix, per llegir icona i dia junts; a la pràctica es veia
     millor a dalt (el gràfic queda net per sota i la fila d'icones fa de capçal del que ve). */
  .ticons{position:relative;height:18px;margin-top:6px}
  .tic{position:absolute;top:0;transform:translateX(-50%);display:flex;opacity:.85}
  .tic svg{width:15px;height:15px}
  .tchart{position:relative;height:120px;margin-top:4px}
  .tchart.tall{height:176px;margin-top:10px}   /* la fila d'icones ja separa del títol; alt perquè les dues línies baixes respirin */
  .tchart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  /* La franja entre les dues línies ÉS el recorregut del dia: no calen barres. */
  /* LA BANDA ÉS EL DIA (de la mínima a la punta), i per això va TENYIDA de càlid: així el dia és un
     OBJECTE i la línia de la nit —blava, prima— s'hi llegeix a sobre encara que passi arran de la
     vora de baix. Amb el gris neutre d'abans, les dues línies baixes es confonien. */
  .tband{fill:var(--orange);opacity:.09}
  .tof{fill:none;stroke:var(--dim);stroke-width:1.2;stroke-dasharray:3 3;opacity:.7;vector-effect:non-scaling-stroke}
  .tmax{fill:none;stroke:var(--orange);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
  .tmin{fill:none;stroke:var(--cool);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;opacity:.95;vector-effect:non-scaling-stroke}
  /* LA MÍNIMA DEL DIA: la vora de baix de la banda del dia (.tband va de la punta fins aquí). Mateixa
     família de color que la punta —són els dos caps del MATEIX objecte, el dia— però prima i apagada,
     perquè la que mana és la punta. La nit va en blau a posta: és una altra pregunta (com dormiràs). */
  .tday{fill:none;stroke:var(--orange);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;opacity:.45;vector-effect:non-scaling-stroke}
  .tzero{stroke:var(--cool);stroke-width:1;stroke-dasharray:2 2;opacity:.5;vector-effect:non-scaling-stroke}
  .tzlab{position:absolute;right:0;transform:translateY(-50%);font-family:var(--fm);font-size:9px;color:var(--cool);opacity:.7}
  .tdot{position:absolute;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);
        border:1.5px solid var(--panel);pointer-events:none}
  .tdot.sm{width:6px;height:6px}
  /* Evolució amb un mes d'arc: a 390 px hi ha ~8 px per dia, i punts de 8 px es tocarien fins a fer
     una cinta. Més petits, la línia recupera l'aire i cada dia segueix sent un punt. */
  .tchart.dense .tdot{width:6px;height:6px;border-width:1px}
  .tchart.dense .ltoday-dot{width:9px;height:9px;border-width:1.5px}
  /* zona de toc: tota la columna, perquè al mòbil encertar un punt de 8 px és impossible. No arriba
     ni a dalt ni a baix de tot: sobresortint es feia una barra llarguíssima que gairebé tocava el nom
     del dia de l'eix i semblava que el subratllés. Amb el marge inferior, la marca i l'etiqueta
     respiren i es veu que són coses diferents (encara cobreix els dos números, punta i nit). */
  .thit{position:absolute;top:1%;height:96%;width:34px;transform:translateX(-50%);cursor:pointer;
        border-radius:8px;-webkit-tap-highlight-color:transparent}
  .thit:hover{background:rgb(var(--text-rgb) / .05)}
  .thit.on{background:rgb(var(--text-rgb) / .08);box-shadow:inset 0 0 0 1px var(--line)}
  .tlab{position:absolute;transform:translate(-50%,-100%);margin-top:-7px;font-family:var(--fm);font-size:11.5px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
  .tlabn{position:absolute;transform:translate(-50%,0);margin-top:7px;font-family:var(--fm);font-size:10.5px;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;opacity:.9}
  .tlabn.trop::after{content:"•";color:var(--red);margin-left:2px}
  .tlabn.up{transform:translate(-50%,-100%);margin-top:-6px}   /* la nit, per damunt del punt: deixa el lloc de sota a la mínima */
  /* posicionats amb el MATEIX X() que els punts, no amb una graella:
     una graella de 7 columnes els centra a 7,1%/21,4%/… i els punts van a 0%/16,7%/…,
     o sigui que només coincidien al mig i la desviació creixia cap als extrems. */
  .taxis{position:relative;height:13px;font-family:var(--fm);font-size:9.5px;color:var(--dim);margin-top:7px}
  .taxis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
  .taxis span.on{color:var(--text)}
  .tread{font-size:13px;color:var(--muted);margin-top:12px;max-width:62ch}
  .tread b{color:var(--text);font-weight:600}
  /* LLEGENDA: una clau per traç (mostra + tres paraules), no un paràgraf. Cada .lgnd i porta el COLOR
     del seu traç a `color`, i la mostra el pinta amb currentColor → la clau i el que hi ha al gràfic
     no poden divergir. Les dues cards en fan servir de diferents perquè expliquen coses diferents:
     la Previsió, la FORMA d'un dia (punta/nit/entremig); l'Evolució, la COMPARACIÓ entre dies. */
  .lgnd{display:flex;flex-wrap:wrap;gap:4px 13px;font-family:var(--fm);font-size:9.5px;color:var(--dim);margin-top:7px}
  .lgnd i{display:inline-flex;align-items:center;gap:6px;font-style:normal;color:var(--dim)}
  .lgnd i>b{flex:none;width:16px;height:0;border-top:2px solid currentColor;border-radius:0}
  .lgnd i>b.dash{border-top-width:1.5px;border-top-style:dashed}
  .lgnd i>b.soft{border-top-width:1.5px;opacity:.5}   /* traç secundari (la mínima del dia): el mateix color, més fluix */
  .lgnd i>b.band{height:9px;border:0;border-radius:2px;background:rgb(var(--text-rgb) / .14)}
  .lgnd i>b.dot{width:8px;height:8px;border:0;border-radius:50%;background:currentColor}
  /* EVOLUCIÓ (card pròpia): franja del normal (aire), línia de sensació amb punts de color, marca d'avui
     i cursor de lectura. */
  .lwrap{position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  .lband{fill:var(--text);opacity:.09}   /* mig 50% climàtic (AIRE) — context, mai sensació */
  /* La banda, ANOTADA DINS del gràfic. Amb dues línies (màxima i mínima) al mateix panell, una franja
     grisa sense nom convida a llegir-la com el normal de TOTES DUES —i la mínima, que hi passa per
     sota, semblava "per sota del normal" quan aquell normal no és el seu—. La llegenda ho deia, però
     la llegenda es llegeix després; l'etiqueta, alhora. */
  .lbandlab{position:absolute;transform:translateY(-50%);font-family:var(--fm);font-size:8.5px;
            letter-spacing:.06em;color:var(--dim);opacity:.9;pointer-events:none;white-space:nowrap}
  /* La línia connecta; el COLOR el porten els punts (un per dia, com a la previsió). Traç fi perquè
     els punts destaquin. */
  .lfeel{fill:none;stroke:var(--orange);stroke-width:1.5;opacity:.7;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
  /* LA NIT de cada dia, al SEU panell (mai barrejada amb la de les puntes: la banda grisa d'aquell
     gràfic és el normal climàtic de la MÀXIMA de l'aire, i una línia de nits per sota convidava a
     una comparació que no existeix). Sense punt per dia a posta: amb 38 dies, una fila més de punts
     seria soroll —el que s'ha de llegir és si el TERRA puja o baixa, que és forma, no xifres—. */
  .lnight{fill:none;stroke:var(--cool);stroke-width:1.7;opacity:.95;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
  /* Títol de cada panell de l'Evolució: diu QUÈ pinta, que és el que evita la barreja. */
  .lpt{font-family:var(--fm);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0}
  .lpt2{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}   /* separa els dos panells de debò */
  .tchart.lday{height:150px;margin-top:6px}
  .tchart.lnit{height:112px;margin-top:6px}   /* més baix: hi va una sola línia de sensació */
  .ltoday{stroke:var(--text);stroke-width:1.2;opacity:.4;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
  .ltoday-dot{width:10px;height:10px;box-shadow:0 0 0 3px var(--panel),0 0 0 4.4px var(--text)}   /* avui: punt amb anella */
  .ltoday-lab{font-weight:700;font-size:12.5px}
  .lavui{position:absolute;top:1px;transform:translateX(-50%);font-family:var(--fm);font-size:9px;letter-spacing:.04em;color:var(--text);opacity:.75;font-weight:600;pointer-events:none;white-space:nowrap}
  .lcursor{position:absolute;top:0;bottom:0;width:2px;background:var(--text);transform:translateX(-50%);opacity:0;pointer-events:none}
  .lcursor.on{opacity:.8}
  /* El PIN: la xifra del dia que llegeixes, just damunt del seu punt, en cada panell. Amb fons del
     panell i vora del color del valor perquè sigui llegible passi per sobre del que passi (línies,
     franja climàtica o punts). El cursor vertical diu QUIN dia; el pin, QUANT. */
  .lpin{position:absolute;transform:translate(-50%,-100%);margin-top:-9px;opacity:0;pointer-events:none;
        font-family:var(--fm);font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;
        background:var(--panel);border:1px solid currentColor;border-radius:7px;padding:1px 6px;white-space:nowrap}
  .lpin.on{opacity:1}
  .laxis{position:relative;height:13px;font-family:var(--fm);font-size:9.5px;color:var(--dim);margin-top:6px}
  .laxis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
  .laxis span.on{color:var(--text);font-weight:600}
  /* El resum i la lectura d'un dia, APILATS a la mateixa cel·la de graella: la caixa fa sempre
     l'alçada del més alt dels dos i canviar de l'un a l'altre no mou ni un píxel.
     Abans anaven amb display:none i s'excloïen: en repòs manava el resum (158 caràcters, 57px a
     390px) i en tocar el gràfic el substituïa la lectura d'una línia (30px), o sigui que la card
     ENCONGIA 27px i el gràfic pujava aquests 27px SOTA EL DIT. Arrossegar entre dies al mòbil era
     una loteria, i el mateix passava entre dies quan una lectura ocupava una línia i la següent
     dues. És el mateix mal que ja es va tancar a la capçalera de l'hora a hora (.hh .hc), que allà
     es va resoldre amb alçada fixa; aquí no serveix una xifra fixa perquè el resum canvia de
     llargada amb les dades, i la graella se n'ajusta sola.
     visibility i no display: tots dos han de seguir ocupant lloc perquè la mesura no variï. */
  .lc{display:grid;font-family:var(--fm);font-size:11px;color:var(--muted);margin-bottom:8px;min-height:2.7em;line-height:1.3}
  .lc>span{grid-area:1/1}
  .lc b{color:var(--text);font-weight:500}
  .lc .lc-read{visibility:hidden;color:var(--text)}
  .lc.reading .lc-sum{visibility:hidden}
  .lc.reading .lc-read{visibility:visible}

  .calib{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:16px;margin-bottom:12px;box-shadow:inset 0 1px 0 rgb(255 255 255 / .04)}
  .calh{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .calh>span{font-family:var(--fm);font-size:var(--t-cap);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:400}
  .calreset{font-family:var(--fm);font-size:10.5px;font-weight:400;color:var(--dim);background:none;border:0;cursor:pointer;padding:2px 0}
  .calreset:hover{color:var(--red)}
  .calstat{font-family:var(--fm);font-size:11.5px;color:var(--muted);margin:4px 0 13px}
  .calstat b{color:var(--teal)}
  .ratelab{font-size:12.5px;color:var(--muted);margin-bottom:9px}.ratelab b{color:var(--text)}
  /* «Clavat» té una línia i la resta dues: sense flex el text s'enganxava a dalt
     i quedava descentrat respecte dels veïns. */
  .rate{display:flex;gap:5px;flex-wrap:wrap;align-items:stretch}
  .rb{flex:1;min-width:66px;min-height:52px;display:flex;align-items:center;justify-content:center;
      font-family:var(--fb);font-size:11.5px;font-weight:600;background:var(--panel2);
      border:1px solid var(--line);border-radius:9px;padding:8px 4px;cursor:pointer;text-align:center;
      transition:.12s;line-height:1.3;-webkit-tap-highlight-color:transparent}
  .rb:hover{border-color:currentColor;filter:brightness(1.15)}
  .rb:active{transform:scale(.96);filter:brightness(1.3)}
  .rate.off{opacity:.4;pointer-events:none}
  /* A mòbil no hi caben 5 en fila i el 5è baixava sol (semblava ressaltat): forcem 3+2. */
  @media(max-width:430px){.rate{display:grid;grid-template-columns:repeat(3,1fr)}}
  .caltip{font-size:11.5px;color:var(--dim);margin-top:11px}.caltip b{color:var(--muted)}
  .callink{color:var(--amber);background:none;border:0;font:inherit;cursor:pointer;padding:0;text-decoration:underline}

  .foot{font-size:11.5px;color:var(--dim);line-height:1.6;border-top:1px solid var(--line);padding-top:13px;margin-top:16px}
  .foot code{font-family:var(--fm);color:var(--muted)}
  .foot b{color:var(--muted);font-weight:600}
  .foot .fh{color:var(--text)}
  .loading,.err{text-align:center;color:var(--muted);font-family:var(--fm);font-size:13px;padding:24px 14px;min-height:36vh;display:flex;align-items:center;justify-content:center}
  /* En cursiva: és una acció en curs («Llegint…», «Cercant…»), no un estat. L'error, dret. */
  .loading{font-style:italic}
  .err{color:var(--orange)}
  /* Estat de benvinguda (sense lloc triat) i botó de geolocalització (reusat al picker). */
  /* Intro de primera visita. Sense caixa ni vora a posta: si li poséssim panell competiria amb
     la card d'ubicació, que és on ha d'anar l'ull tot seguit. La jerarquia la fa la mida. */
  /* Primer contacte lleuger: el ganxo (una pregunta que reconeixes) fa de títol i respira; a
     sota, la diferència en prosa, amb "l'aire, a l'ombra" i "el que notaràs tu" destacats. */
  .intro{margin-bottom:var(--s5);max-width:52ch}
  .intro .ilead{font-family:var(--fd);font-size:21px;font-weight:700;line-height:1.26;letter-spacing:-.015em;margin:0 0 var(--s3);text-wrap:balance}
  .intro .ibody{color:var(--muted);font-size:14px;line-height:1.55;margin:0 0 var(--s3)}
  .intro .ibody b{color:var(--text);font-weight:600}
  .intro .icta{font-family:var(--fm);font-size:var(--t-sm);color:var(--amber);margin:0;letter-spacing:.02em}
  .welcome{text-align:center;padding:26px 14px 54px;max-width:36ch;margin:0 auto}
  .welcome .wmsg{color:var(--muted);font-size:14px;margin:8px 0 18px;line-height:1.5}
  .geobtn{font-family:var(--fb);font-size:14.5px;font-weight:700;color:var(--ink);background:var(--amber);
          border:0;border-radius:var(--r-md);padding:13px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;
          box-shadow:0 8px 22px -12px rgb(var(--amber-rgb) / .7)}
  .geobtn:hover{filter:brightness(1.06)} .geobtn:active{transform:scale(.98)}
  .pickinner>.geobtn{display:block;width:100%;margin-bottom:10px}
  :focus-visible{outline:2px solid var(--amber);outline-offset:2px}