@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:#14110E;--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;--cool:#5BC8F5;--teal:#37C7A9;
    /* 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}
    .herorow>.hero{margin-bottom:0;align-self:start}   /* el hero, a la seva alçada natural */
    .rightcol{display:flex;flex-direction:column;gap:14px;min-width:0}
    .rightcol>.detall{margin-bottom:0}
    /* L'hora a hora creix per omplir la columna dreta fins a l'alçada del hero. Com que les barres són
       d'alçada fixa, en centrem el contingut vertical perquè no quedi despenjat a dalt. */
    .rightcol>.hourly{margin-bottom:0;flex:1;display:flex;flex-direction:column;justify-content:center}
  }
  #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}
  /* 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)}

  .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}
  .big.range{font-size:clamp(40px,10vw,58px)}
  @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 (Punta/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 (Punta|Nit) 1/3: la columna de màx/mín porta poc contingut i no
     necessita tant espai; el número gran del moment, sí. */
  /* 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 Punta/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 (Punta/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). */
  .ht-main{display:flex;flex-direction:column;gap:8px;min-width:0}
  .ht-main .eyebrow{margin-top:0}
  /* Dies futurs: la PUNTA va en card (com les targetes), perquè es vegi que NO és el valor d'ara
     (que va pla). Es manté el color i la mida del número. */
  .ht-main.peak{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 15px}
  .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:28px 0 0}
  .db-scale{position:absolute;left:0;right:0;top:0;height:8px;border-radius:5px;background:linear-gradient(90deg,var(--cool),var(--teal),var(--green),var(--amber),var(--orange),var(--red));opacity:.8}
  .db-feel{position:absolute;top:-3px;height:14px;border:2px solid var(--text);border-radius:6px;box-sizing:border-box}
  .db-off{position:absolute;top:12px;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)}
  .db-nowv{position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%);font-family:var(--fm);font-size:11.5px;font-weight:600;color:var(--text);white-space:nowrap}   /* valor de l'"ara" sobre el pin */
  /* 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:24px}
  .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}

  .clim{font-size:13px;color:var(--muted);margin-top:16px;line-height:1.5}   /* sense límit d'amplada: en desktop cap a una línia */
  .clim b{color:var(--text);font-weight:600}
  /* Situació de pressió: germana de .clim, més arran perquè es llegeixin com un bloc. */
  .synop{font-size:13px;color:var(--muted);margin-top:10px;max-width:62ch;line-height:1.5}
  .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}
  /* 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}
  /* ── 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 Punta/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). */
  .ptile{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;
         display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;flex:1}
  /* Dies futurs: a la dreta només hi ha la card "Nit". Que OMPLI l'alçada (flex:1 + contingut centrat,
     ja per defecte a .ptile) per igualar la punta de l'esquerra —una card curta i flotant queda lletja.
     Les columnes són 1,4/1 (esquerra gran, dreta petita) tant avui com als dies futurs. */
  .pt-main{display:flex;align-items:baseline;gap:6px}
  .ptile .pt-l{font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  .ptile .pt-v{font-family:var(--fd);font-weight:800;font-size:28px;line-height:1;font-variant-numeric:tabular-nums}
  .ptile .pt-h{font-family:var(--fm);font-size:11px;color:var(--muted)}
  .pt-sub{font-family:var(--fm);font-size:10.5px;color:var(--muted);display:flex;align-items:center;gap:5px;flex-wrap:wrap;line-height:1.3;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. */
  .detall{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{margin:0 0 13px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .detall .ct{font-family:var(--fm);font-size:var(--t-cap);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
  .detall .tiles{margin-top:0}
  .detall .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{filter:brightness(1.1)}
  .detall .fineprint{margin:0 0 14px}   /* ara va ABANS dels tiles: 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}
  /* Una sola línia SEMPRE (nowrap + alçada de línia fixa): el resum Punta/Nit i la lectura de
     l'hora que el substitueix en fer hover tenen llargades diferents; si podien fer wrap, l'alçada
     canviava i el gràfic saltava. Amb nowrap l'alçada no depèn del text; l'ellipsis és una xarxa
     per si algun text llarguíssim no hi cabés (estàtic, mai un salt). */
  .hh .hc{font-family:var(--fm);font-size:11px;line-height:1.45;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .hh .hc b{color:var(--text);font-weight:500}
  /* 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}
  .hi svg{overflow:visible;flex:none}
  .hcell{height:82px;display:flex;align-items:flex-end;padding:0 1px;position:relative}
  .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.key{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. */
  .hcell.night,.hi.night{background:rgba(0,0,0,.3)}
  .hcell.nwarm,.hi.nwarm{background:linear-gradient(rgb(var(--orange-rgb) / .13),rgb(var(--orange-rgb) / .13)),rgba(0,0,0,.28)}
  .hcell.nhot,.hi.nhot{background:linear-gradient(rgb(var(--red-rgb) / .2),rgb(var(--red-rgb) / .2)),rgba(0,0,0,.26)}
  .bar{width:100%;border-radius:2px 2px 0 0;min-height:4px;opacity:.92}
  .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{font-family:var(--fm);font-size:10px;color:var(--dim);margin-top:7px}
  /* 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. */
  .hi.scrub,.hcell.scrub{position:relative}
  .hi.scrub::after,.hcell.scrub::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{box-shadow:0 0 0 1.5px var(--text);opacity:1}
  .hc .hc-read{display:none}
  .hc.reading .hc-sum{display:none}
  .hc.reading .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: a dalt el color del DIA (punta), a baix el de la NIT (mínima) —senya
     d'identitat. 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)}
  .day::after{content:"";position:absolute;bottom:8px;left:11px;right:11px;height:3px;border-radius:3px;background:var(--acc2,transparent)}
  .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}
  .day .dr .drcur{margin-right:auto;font-size:14px;font-weight:600}
  .day .dnt{font-family:var(--fm);font-size:10.5px;color:var(--muted);margin-top:8px;padding-top:7px;border-top:1px solid var(--line);white-space:nowrap;display:flex;justify-content:space-between;align-items:baseline;gap:6px}

  .trend{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:14px 16px 15px;margin-bottom:14px;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. */
  .ticons{position:relative;height:18px;margin-top:8px}
  .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:158px;margin-top:10px}   /* la fila d'icones ja separa del títol */
  .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. */
  .tband{fill:var(--text);opacity:.08}
  .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.6;stroke-linejoin:round;stroke-linecap:round;opacity:.75;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}
  /* zona de toc: tota la columna, perquè al mòbil encertar un punt de 8 px és impossible */
  .thit{position:absolute;top:-6%;height:112%;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}
  /* 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}
  .tleg{font-family:var(--fm);font-size:10px;color:var(--dim);margin-top:8px}
  /* 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 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}
  .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}
  .laxis{position:relative;height:13px;font-family:var(--fm);font-size:9.5px;color:var(--dim);margin-top:7px}
  .laxis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
  .laxis span.on{color:var(--text);font-weight:600}
  .lc{font-family:var(--fm);font-size:11px;color:var(--muted);margin-bottom:8px;min-height:2.7em;line-height:1.3}
  .lc b{color:var(--text);font-weight:500}
  .lc .lc-read{display:none}
  .lc.reading .lc-sum{display:none}
  .lc.reading .lc-read{display:inline;color:var(--text)}
  .lleg{font-family:var(--fm);font-size:10px;color:var(--dim);margin-top:8px;line-height:1.5}
  .lleg b{color:var(--muted);font-weight:600}

  .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}