/* ---- IMPROVED EDITORIAL COMPARATIVE GRAPH ---- */
.fmt-graph-card{
  background:var(--panel);border:2.5px solid var(--cocoa);border-radius:var(--r);
  box-shadow:var(--elev);padding:18px;margin-bottom:18px;
}
.fmt-segmented-tape{
  display:flex;width:100%;height:38px;border:2.5px solid var(--cocoa);border-radius:9999px;
  overflow:hidden;box-shadow:inset 0 3px 0 rgba(46,30,20,.18);background:var(--cream);position:relative;
}
.fmt-segment-v{
  background:var(--red);color:var(--cocoa);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:0.75rem;letter-spacing:.03em;
  transition:width .45s cubic-bezier(.34,1.56,.64,1);overflow:hidden;white-space:nowrap;
  border-right:2.5px solid var(--cocoa);
  container-type:inline-size;
}
.fmt-segment-i{
  background:var(--blue);color:var(--cocoa);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:0.75rem;letter-spacing:.03em;
  transition:width .45s cubic-bezier(.34,1.56,.64,1);overflow:hidden;white-space:nowrap;
  container-type:inline-size;
}
/* a segment narrower than the word + number ("FOTO 12.3%") drops the word instead of clipping the text: the
   share is the payload and the legend right below names the colour. Unsupported browsers keep the old clip. */
@container (max-width:74px){.seg-word{display:none}}
.graph-metric-row{
  display:flex;flex-direction:column;gap:6px;padding:12px 0;border-bottom:1.5px dashed var(--line);
}
.graph-metric-row:last-child{border-bottom:0}
.graph-bar-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;row-gap:4px;font-size:0.71875rem;
}
.graph-bar-slot{
  flex:1;min-width:64px;height:20px;background:var(--cream);border:2px solid var(--cocoa);
  border-radius:9999px;overflow:hidden;position:relative;box-shadow:inset 0 2px 0 rgba(46,30,20,.12);
}
.graph-bar-fill{
  height:100%;border-radius:9999px;transition:width .45s cubic-bezier(.34,1.56,.64,1);
  display:flex;align-items:center;justify-content:flex-end;padding-right:8px;
  color:var(--cocoa);font-family:var(--display);font-weight:800;font-size:0.65625rem;
  white-space:nowrap;min-width:32px;
}

@media (min-width:1024px){
  #mainSidebar.sidebar-collapsed{width:5.25rem!important}
  #mainSidebar.sidebar-collapsed .sidebar-text{display:none!important}
  #mainSidebar.sidebar-collapsed .sidebar-nav-item{justify-content:center!important;padding-left:0!important;padding-right:0!important}
}
@media (max-width:1023px){
  #mainSidebar{position:fixed!important;top:0;bottom:0;left:0;z-index:70;transform:translateX(-100%);box-shadow:8px 0 26px rgba(46,30,20,.28)}
  #mainSidebar.mobile-open{transform:translateX(0)}
  /* the fixed bottom nav overlays the scroll container, so the clearance belongs on the panel itself.
     Doubled class keeps the old `main.view-panel` specificity: the Tailwind CDN appends its utilities
     after this file, so plain `.view-panel` would lose the padding to `p-4`. */
  .view-panel.view-panel{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  #mobileBottomNav{padding-bottom:calc(.625rem + env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion: reduce){
  .boot{animation:none;display:none}
  .boot-letter,.boot-splat{animation:none;opacity:1;transform:none}
  .ketchy .flip-frame{animation:none}
  .ketchy .flip-frame:nth-child(2),.ketchy .flip-frame:nth-child(3),.ketchy .flip-frame:nth-child(4){display:none}
  .ketchy .flip-frame:nth-child(1){opacity:1}
  .bumped{animation:none}
  .falling-bottle{transition:none}
  .clean-btn,.clean-btn.leaving,.splat-card,.splat-card.leaving,.ketchup-splat{animation:none}
  .ketchup-splat.wiped{display:none}   /* reduced motion: the wipe-out is instant instead of animated */
  .dust-cloud{display:none}   /* and dust would sit there forever with animation:none, so it just doesn't appear */
  .edge-tomato-peeker{transition:none}
  .edge-tomato-peeker.peeking{transform:translateY(calc(-1 * var(--peek-lift))) scale(1)}
  .edge-tomato-peeker.peeking .ketchy-peeker-wrap{animation:none}
  .edge-tomato-peeker.falling{animation:none!important;transform:translateY(160%)!important}
  .ketchy-peeker-wrap{transition:none}
  .peeker-bubble{transition:none}
  .edge-tomato-peeker.peeking .peeker-bubble{opacity:1;transform:translateX(-50%) scale(1) rotate(-3deg)}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .peel-cover,.peel-peek{transition:none}
  .peel.peeled #heroTip{animation:none}
  .pop-in,.vu-scale>span,.stamped,.chip-topic.on,#resetTagBtn,.scanner-dot,.drop-in{animation:none}
  .graph-bar-fill,.fmt-segment-v,.fmt-segment-i{transition:none}
  .splat-in{animation:none}
}