/* Panneau latéral : fiche détaillée, journal, courbe de poids, sauvegarde. */
/* sheet */
.sheet-bg{position:fixed;inset:0;background:rgb(0 0 0 / .35);z-index:20}
.sheet{position:fixed;top:0;right:0;bottom:0;width:min(720px,100%);background:var(--bg);z-index:21;overflow-y:auto;
  padding:calc(18px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) 18px;
  border-left:1px solid var(--line);display:grid;gap:18px;align-content:start}
/* ouverture : le panneau glisse depuis la droite, le fond s'assombrit ; fermeture : l'inverse, en fondu */
#layer.opening .sheet{animation:slide-in .4s cubic-bezier(.2,.7,.3,1)}
#layer.opening .sheet-bg{animation:fade-in .4s ease-out}
#layer.closing .sheet{transform:translateX(48px);opacity:0;transition:transform .3s ease-in,opacity .3s ease-in}
#layer.closing .sheet-bg{opacity:0;transition:opacity .3s}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.close{border:1px solid var(--line);background:var(--surface);border-radius:8px;width:36px;height:36px;font-size:1.2rem;line-height:1;flex:0 0 auto}
.hero{display:grid;grid-template-columns:160px 1fr;gap:16px;align-items:start}
.hero .thumb{aspect-ratio:1;border-radius:var(--r)}
@media (max-width:520px){.hero{grid-template-columns:1fr}.hero .thumb{aspect-ratio:16/10}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:grid;gap:12px;min-width:0}
dl.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px 18px;margin:0}
dl.facts div{min-width:0}
dl.facts dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
dl.facts dd{margin:2px 0 0;font-weight:500;overflow-wrap:anywhere}
.quick{display:flex;flex-wrap:wrap;gap:8px}
.notes{white-space:pre-wrap;margin:0;color:var(--ink)}

/* journal */
.logform{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;align-items:end}
.timeline{list-style:none;margin:0;padding:0;display:grid}
.timeline li{display:grid;grid-template-columns:92px 1fr auto;gap:12px;padding:9px 0;border-top:1px solid var(--line);align-items:start}
.timeline li:first-child{border-top:0}
.timeline .when{font-family:var(--mono);font-size:.8rem;color:var(--muted);padding-top:2px}
.timeline .what b{font-weight:600}
.timeline .what span{color:var(--muted);font-size:.9rem}
.timeline .rm{border:0;background:transparent;color:var(--muted);font-size:1rem;padding:0 4px}
.chart svg{width:100%;height:auto;display:block}

/* sauvegarde */
textarea.export{width:100%;min-height:160px;font-family:var(--mono);font-size:.78rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:10px}